vite+vue3.0构建项目

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)
  }
})

写个最简单的数据绑定：




  
  
  
  Document


  高度：

此时在输入框内输入的数字就会在旁边的span标签内实时显示。

VUE3内两个响应式api: ref()和reactive()

ref：用于基本类型的变量进行响应式，原理也是Object.definepropty()，也可用于引用对象的响应式，此时的原理是Proxy（）

20c7bab3b46190f980586b041de9fe5.jpg

reactive():只能用于对象类型的响应式数据。

vue2有这么一段代码:

{{item}}

你会发现页面并没有修改，想要响应式的修改数组不可以直接更改下标，而是要选择使用数组的原生方法，比如push（）之类的，这就是Object.definepropty()的弊端之一，而proxy()则没有这个问题。
再来一段vue2代码:

{{dataForm}}

没错，也不能响应式的操作对象属性的添加和删除，要监测必须使用this.美元符delete()）。
就是因为definepropty的set和get不能监听到对象的添加和删除。
用proxy简单实现一个响应式的功能：




  
  
  
  Document


  height:

proxy可以直接监听整个对象的属性变化，而不是像definepropty那样只能监听某一个属性的变化，不需要递归遍历，性能上就要优于后者很多。

b065ec5774d407508f1b24b568a1d05.jpg

8d750087fb8644fcce7a93314031ffa.jpg