1.安裝vite
npm install vite -g
2.初始化項目
npm init @vitejs/app
根據(jù)提示褪测，初始化好一個項目
3.安裝依賴+跑起來
npm install
npm run dev
沒錯及塘，只用了421ms就跑起來了抖拴，讓我們看看同樣是新創(chuàng)建的基于vue-cli4的vue3.0項目要跑多久
用了2S鐘凑懂，這就是vite的重大優(yōu)勢，而且隨著項目體積的不斷增大虽惭，這個優(yōu)勢會更加明顯橡类。
當然，如果你是vue3.0的初學者芽唇，還是建議先使用vue-cli來構建項目練手顾画，因為vite封裝了更多了api，不適合新手一開始就接觸匆笤。
來講講vue2.0和vue3.0生命周期函數(shù)的改變
其中beforeCreate和created被去掉了研侣。在這些鉤子中編寫的任何代碼都應該直接在 setup 函數(shù)中編寫。
這里著重講一下onRenderTracked()和 onRenderTriggered()鉤子函數(shù)的使用
onRenderTracked直譯過來就是狀態(tài)跟蹤疚膊，它會跟蹤頁面上所有響應式變量和方法的狀態(tài)义辕，也就是我們用return返回去的值，它都會跟蹤寓盗。只要頁面有update的情況灌砖，它就會跟蹤，然后生成一個event對象傀蚌，我們通過event對象來查找程序的問題所在基显。
onRenderTracked((event) => {
console.log("狀態(tài)跟蹤組件----------->");
console.log(event);
});
onRenderTriggered直譯過來是狀態(tài)觸發(fā)，它不會跟蹤每一個值善炫，而是給你變化值的信息撩幽，并且新值和舊值都會給你明確的展示出來。
如果把onRenderTracked比喻成散彈槍箩艺，每個值都進行跟蹤窜醉，那onRenderTriggered就是狙擊槍，只精確跟蹤發(fā)生變化的值艺谆，進行針對性調試榨惰。
onRenderTriggered((event) => {
console.log("狀態(tài)觸發(fā)組件--------------->");
console.log(event);
});
對 event 對象屬性的詳細介紹：
- key 那邊變量發(fā)生了變化
- newValue 更新后變量的值
- oldValue 更新前變量的值
- target 目前頁面中的響應變量和函數(shù)
vue2的defineProperty和vue3的proxy
首先來講講defineProperty，它有四個數(shù)據(jù)描述符静汤，大部分人應該都知道琅催，來回顧一下
var person = {
name:'張三',
age:20,
sex:'男'
}
Object.defineProperty(person,'height',{
value:160,
enumerable:true, //能否被枚舉
writable:true, //能否被修改
configurable:true //能否被配置刪除
})
還有兩個存取描述符
Object.defineProperty(person,'height',{
get(){
console.log('獲取了height')
},
set(value){
console.log('修改了height,值為'+value)
}
})
寫個最簡單的數(shù)據(jù)綁定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
高度：<input type="text" id="input" onkeyup="changeInput()">
<span id="show"></span>
</body>
<script>
var person = {
name:'張三',
age:20,
sex:'男'
}
Object.defineProperty(person,'height',{
get(){
console.log('獲取了height')
},
set(value){
console.log('修改了height,值為'+value)
show.innerHTML = value
}
})
function changeInput(val){
person.height = input.value
}
</script>
</html>
此時在輸入框內輸入的數(shù)字就會在旁邊的span標簽內實時顯示居凶。
VUE3內 兩個響應式api: ref()和reactive()
ref：用于基本類型的變量進行響應式，原理也是Object.definepropty()藤抡，也可用于引用對象的響應式侠碧，此時的原理是Proxy（）
reactive():只能用于對象類型的響應式數(shù)據(jù)。
vue2有這么一段代碼:
<span v-for="(item) in arrDemo">{{item}}</span>
<button @click="arrDemo[0] = 2">修改</button>
你會發(fā)現(xiàn)頁面并沒有修改缠黍，想要響應式的修改數(shù)組不可以直接更改下標弄兜，而是要選擇使用數(shù)組的原生方法，比如push（）之類的嫁佳，這就是Object.definepropty()的弊端之一挨队，而proxy()則沒有這個問題。
再來一段vue2代碼:
<span>{{dataForm}}</span>
<button @click="dataForm.name = 'haha'">修改</button>
沒錯蒿往，也不能響應式的操作對象屬性的添加和刪除盛垦，要監(jiān)測必須使用this.美元符delete()）。
就是因為definepropty的set和get不能監(jiān)聽到對象的添加和刪除瓤漏。
用proxy簡單實現(xiàn)一個響應式的功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
height:<input type="text" id="input" onkeyup="changeInput()">
<span id="show"></span>
<script>
let person = {
name:'張三',
age:18
}
let p = new Proxy(person,{
get(target,tagName){
console.log('觸發(fā)了get')
return target[tagName]
},
//set能監(jiān)聽到屬性的修改和增加
set(target,tagName,value){
console.log('觸發(fā)了set')
show.innerHTML = value
target[tagName] = value
},
deleteProperty(target,tagName){
console.log('觸發(fā)了刪除')
return delete target[tagName]
}
})
function changeInput(){
console.log(input.value)
p.height = input.value
}
</script>
</body>
</html>
proxy可以直接監(jiān)聽整個對象的屬性變化腾夯，而不是像definepropty那樣只能監(jiān)聽某一個屬性的變化，不需要遞歸遍歷蔬充，性能上就要優(yōu)于后者很多蝶俱。
