1.安装vite
npm install vite -g
2.初始化项目
npm init @vitejs/app
根据提示，初始化好一个项目
微信截图_20211108165523.png
3.安装依赖+跑起来
npm install
npm run dev
微信截图_20211108165757.png
没错，只用了421ms就跑起来了，让我们看看同样是新创建的基于vue-cli4的vue3.0项目要跑多久
微信截图_20211108165942.png
用了2S钟，这就是vite的重大优势，而且随着项目体积的不断增大，这个优势会更加明显。
当然，如果你是vue3.0的初学者，还是建议先使用vue-cli来构建项目练手，因为vite封装了更多了api，不适合新手一开始就接触。
来讲讲vue2.0和vue3.0生命周期函数的改变
微信截图_20211108173034.png
其中beforeCreate和created被去掉了。在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
这里着重讲一下onRenderTracked()和 onRenderTriggered()钩子函数的使用
onRenderTracked直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。
onRenderTracked((event) => {
console.log("状态跟踪组件----------->");
console.log(event);
});
onRenderTriggered直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。
如果把onRenderTracked比喻成散弹枪，每个值都进行跟踪，那onRenderTriggered就是狙击枪，只精确跟踪发生变化的值，进行针对性调试。
onRenderTriggered((event) => {
console.log("状态触发组件--------------->");
console.log(event);
});
对 event 对象属性的详细介绍：
- key 那边变量发生了变化
- newValue 更新后变量的值
- oldValue 更新前变量的值
- target 目前页面中的响应变量和函数
vue2的defineProperty和vue3的proxy
首先来讲讲defineProperty，它有四个数据描述符，大部分人应该都知道，来回顾一下
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)
}
})
写个最简单的数据绑定：
<!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>
此时在输入框内输入的数字就会在旁边的span标签内实时显示。
VUE3内 两个响应式api: ref()和reactive()
ref：用于基本类型的变量进行响应式，原理也是Object.definepropty()，也可用于引用对象的响应式，此时的原理是Proxy（）
20c7bab3b46190f980586b041de9fe5.jpg
reactive():只能用于对象类型的响应式数据。
vue2有这么一段代码:
<span v-for="(item) in arrDemo">{{item}}</span>
<button @click="arrDemo[0] = 2">修改</button>
你会发现页面并没有修改，想要响应式的修改数组不可以直接更改下标，而是要选择使用数组的原生方法，比如push（）之类的，这就是Object.definepropty()的弊端之一，而proxy()则没有这个问题。
再来一段vue2代码:
<span>{{dataForm}}</span>
<button @click="dataForm.name = 'haha'">修改</button>
没错，也不能响应式的操作对象属性的添加和删除，要监测必须使用this.美元符delete()）。
就是因为definepropty的set和get不能监听到对象的添加和删除。
用proxy简单实现一个响应式的功能：
<!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('触发了get')
return target[tagName]
},
//set能监听到属性的修改和增加
set(target,tagName,value){
console.log('触发了set')
show.innerHTML = value
target[tagName] = value
},
deleteProperty(target,tagName){
console.log('触发了删除')
return delete target[tagName]
}
})
function changeInput(){
console.log(input.value)
p.height = input.value
}
</script>
</body>
</html>
proxy可以直接监听整个对象的属性变化，而不是像definepropty那样只能监听某一个属性的变化，不需要递归遍历，性能上就要优于后者很多。
b065ec5774d407508f1b24b568a1d05.jpg
8d750087fb8644fcce7a93314031ffa.jpg
网友评论