为什么VUE 3.0可以提速1.2~2倍

diff方法优化

vue2中的虚拟dom是进行全量对比。vue3新增了静态标记（Patchflag），在与上次虚拟节点进行对比的时候，只对比带有PatchFlag的节点，并且可以通过flag的信息得知当前节点要对比的内容。简单说就是添加标记，如果数据不会改变即是死数据那就没有节点。也就不用参与比较，只比较带标记的自然效率会高。

hoistStatic 静态提升

vue2中无论元素是否参与更新，每次都会重新创建，然后重新渲染。vue3中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时候直接复用即可。通俗讲大概意思就是把不参与创建的元素在方法外以var创建成对象，渲染时候不重新创建了，直接服用。

cacheHandlers 事件侦听器缓存

默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。

ssr渲染

当有大量静态的内容的时候，这些内容会被当做纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟dom来渲染的快上很多很多。当静态内容大到一定量级时候，会用_createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

创建vue3的三种方式

Vue-cliWebpackVite（vue3特制）

什么是Vite

Vite是vue作者开发的一款意图取代webpack的工具其实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间。

安装Vite

npm install -g create-vite-app

利用Vite创建VUE3项目

create-vite-app 'projectName'

安装依赖运行项目

cd 'projectName npm install npm run dev

setup组合API，个人最喜欢之一，

超方便，主要解决data与method分离的问题

注意：ref监听简单类型，reactive复杂类型

提示：类似于java面向对象的思路，这里也同样可以将具体增删改方法提取到一个JS中然后export出来，vue页面中直接import视同就可以了同样也在setup中进行参数互传，即最后return的对象都是可以作为参数传递给这其中的其他方法的。

ref相关代码

<template> {{count}} <br> <button @click="myRef()">提交</button> </template> <script> import {ref} from 'vue'; export default { name: 'App', // setup函数是组合API的入口函数 setup() { // 定义了一个名称为count的变量，这个变量的初始值为0 //这个变量发生改变后，Vue会自动更新UI //注意ref函数只能监听简单类型的变化，不能监听复杂类型的变化（数组/对象） let count = ref(0) //在组合API中如果想定义方法，不用定义到methods中，直接定义即可 function myRef(){ count.value++; console.log(count.value) } // 注意点：在组合API中定义的变量/方法，要想在外界使用，必须通过return {xxx,xxx}暴露出去,必须用{} return {count,myRef} }, components: {} } </script>

这个组合API就是不用再去将属性，方法等等去分开定义只需要引入’ref’，然后写入setup()再return就好，具体情况参照上边代码。 reactive相关代码

<template> <ul> <li v-for="(item,index) in this.state.stus" :key="item.id" @click="remStu(index)">{{item.name}}-{{item.age}} </li> </ul> </template> <script> import {reactive} from 'vue'; export default { name: 'App', setup() { let {state, remStu} = outMethod(); return {state, remStu}; }, } //单功能数据与方法整合在一个function内，在setup中直接可以调用。 function outMethod() { let state = reactive({ stus: [ {id: 1, name: 'a', age: 11}, {id: 2, name: 'b', age: 12}, {id: 3, name: 'c', age: 13}, ] }); function remStu(index) { state.stus = state.stus.filter((stu, ids) => ids != index); } return {state, remStu} } </script>

setup执行时机

beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没有初始化好。setupCreated ：表示组件刚刚被创建出来，并且组件的data和methods已经初始化好了。

setup注意点

由setup执行时机可知，由于执行setup函数的时候，还没执行Created生命周期方法，所以在setup函数中，是无法使用data和methods的。由于我们不能在setup函数中使用data和methods，所以Vue3为了避免错误使用，直接将setup函数中的this修改成了undefined。setup函数是同步的，如果想使其异步，可以在setup前边加async。 async setup(){}

reactive 介绍

什么是reactive

reactive是vue3中提供的实现响应式数据的方法在Vue2中响应式数据是通过defineProperty来实现的而在Vue3中响应式数据通过ES6的Proxy来实现的

reactive注意点

reactive参数必须是对象（json/arr）

如果reactive传递了其他对象，即除了json或者arr以外的其他类型对象，如时间对象。

默认情况下修改对象，界面不会自动更新如果想更新，可以通过重新赋值的方式

ref 介绍

什么是ref

ref和reactive一样，也是用来实现响应式数据的方法由于reactive必须传递一个对象，所以导致在企业开发中如果我们只想让某个变量响应式的时候回非常麻烦，所以Vue3就给我们提供了ref方法，实现对简单值的监听。

ref本质

ref底层的本质其实还是reactive，系统会自动根据我们给ref传入的值将它转换成ref(xxx) -> reactive({value:xx})如果利用ref将某个对象中的属性变成响应式的数据，我们修改响应式数据是不会修改原始数据的。

ref注意点

在vue中使用ref的值不用通过value获取在JS中使用ref的值必须通过value获取

ref和reactive区别

如果在template里使用的是ref类型的数据，那么Vue会自动帮我们添加.value如果在template里使用的是reactive类型的数据，那么Vue不会自动帮我们添加.valueVue是如何决定是否添加.value的 Vue在解析数据之前会自动判断这个数据是否是ref类型的，如果是就自动添加.value，如果不是就不添加。 Vue是如何判断当前数据是否是ref类型的 通过当前数据对象的__v_ref属性来判断的，如果有这个属性并且这个属性为true，那么就代表是一个ref类型的数据。 我们自己也可以判断数据是ref还是reactive的 Vue提供了isRef，isReactive这两个方法，isRef(age); isReactive(age);即可。

toRef()

let state = toRef(obj,'name'); 如果利用toRef()将对象中的某个属性变成响应式数据，在对响应式数据修改后是会对原始数据进行修改的，但是不会刷新页面。

ref和toRef的区别及应用场景

区别 ref-----复制，修改响应式数据不会影响原始数据，界面会发生改变toRef-----引用，修改响应式数据会影响原始数据，界面不发生改变

toRefs

将对象整体toRef，具体使用

//原始 let name = toRef(obj,"name"); let age = toRef(obj,"age"); name.value = 'zs'; age.value = 66 //toRefs() let state = toRefs(obj) state.name.value = 'zs'; state.age.value = 66

Composition Api 和 Option Api 混合使用

Option Api即原本Vue2中使用的data，methods方式 Composition Api即Vue3中的setup方式 Composition Api（组合API/注入API）：本质其实就是将setup中的属性注入data，方法注入methods中。

toRaw()

ref/reactive数据类型特点： 每次修改都会被渲染，都会更新UI界面，但是这样其实是非常消耗性能的，所以如果我们有一些操作是不需要追踪的，不需要更新UI界面，那么这时候我们就可以通过toRaw方法拿到它的原始数据，对原始数据进行修改这样就不会被追踪，这样就不会更新UI界面，这样性能就得到的提升。个人理解:ref/reactive有点类似于浅拷贝(地址相同)，其实本质是创建一个proxy对象，这个对象中引用了obj。而toRaw类似于深拷贝(地址改变)。注意点：如果想通过toRaw拿到ref类型的原始数据(创建时传入的那个数据)那么就必须明确的告诉toRaw方法要获取的是.value的值，因为经过Vue处理后，.value中保存的才是当初创建时传入的那个原始数据。

markRaw ()

如果某个对象永远都不要被追踪使用markRaw()。