vue2和vue3的兼容，vue2与vue3区别
1.Vue3.0新特性 性能比Vue2.x快1.2~2倍
原因1：
diff方法优化：
vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）
vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容
原因2：静态提升
vue2无论元素是否参与更新，每次都会重新创建然后再渲染
vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可
原因3：时间侦听器缓存
默认情况下onClick会被视为动态绑定，所以每次都会追踪它的变化
但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可
原因4：ssr渲染按需编译，体积比vue2.x更小组合API（类似react hooks）更好的Ts支持暴露了自定义渲染API更先进的组件Fragment:模板可以有多个根元素 vue3.0-快速上手 创建vue3的3种方式 Vue-Cli npm i -g @vue/cli@next // 升级vue-cli v4.5版本 WebpackVite 什么是Vite
vite是vue作者开发的一款意图取代webpack的工具
实现原理是利用ES6的import发送请求去加载文件的特性，拦截这些请求，做些预编译，省去webpack冗长的打包时间
安装vite npm install -g create-vite-app 利用vite创建vue3项目 create-vite-app projectName 安装依赖运行项目 cd projectNamenpm installnpm run dev 组合API的使用(组合API即 将数据和业务逻辑放在一起处理，而不是像vue2，将数据放在data中，业务逻辑分别放在methods，watch，computed中等) 1.定义变量
写法二：
Composition API 和 Option API 混合使用
setup执行时机 beforeCreate: 表示组件刚被创建出来，data和methods还没有初始化好—–> setup—–> created:表示组件刚被创建出来，并且data和methods已经初始化好 setup注意点
由于在执行setup函数时，还没有执行created函数生命周期，所以在setup函数中不能使用data和methods
由于无法在setup函数中使用data和methods，所以vue为避免错误使用，它直接将setup函数中this修改成了undefined！！！
setup函数只能是同步的，不能是异步的
什么是reactive reactive是vue3中提供的实现响应式数据的方法 在vue2中的响应式数据是通过defineProperty实现的 而vue3中响应式数据使用过ES6的proxy来实现的 reactive注意点
reactive参数必须是对象(json/array)
如果给reactive传递了其他对象（如：时间对象），默认情况下，修改对象，界面不会自动更新
如果想更新，可通过重新赋值的方式
什么是ref ref和reactive一样也是用来实现响应式数据的方法 –由于reactive必须传递一个对象，所以导致开发中，如果只想让某个变量实现响应式数据就会非常麻烦 所以vue3提供了ref方法，实现对简单值得监听 ref本质 ref底层得本质还是reactive，系统会根据我们给ref传入得值将它转换成ref(xx)–>reactive({value: xx}) ref注意点
vue中ref的值不用通过value获取
js中使用ref的值必须通过value获取
ref和reactive的区别
1.如果在template里使用的是ref类型的数据，vue会自动帮我们添加.value；如果是reactive类型的数据，vue则不会帮我们添加.value
–通过引入import { isRef，isReactive } from \’vue\’方法可以自行判断数据是否是ref和reactive类型的
递归监听 默认情况下，无论是通过ref还是reactive都是递归监听
递归监听存在的问题
如果数据量比较大，非常消耗性能
非递归监听
只能监听第一层，不能监听其他层
使用到的函数import { shallowReactive, shallowRef } from \’vue\’
注意：如果是通过shallowRef创建数据，vue监听的是.value的变化，并不是第一层的变化
如果要使用shallowReactive那种写法修改state的值，则需要新引入import { triggerRef } from \’vue\’，并在设置完某一层数据后，调用triggerRef(state)
注意：vue3只提供了triggerRef方法，没有提供triggerReactive方法
所以如果是reactive类型的数据，是无法主动触发界面更新的
递归监听和非递归监听应用场景 一般情况下 使用ref和reactive即可 只有在需要监听的数据量比较大的时候，我们才推荐使用shallowRef和shallowReactive toRaw 从Reactive 或 Ref中得到原始数据
作用 ref/reactive数据类型特点：每次修改都会被追踪，都会更新UI界面，非常消耗性能，所以如果不需要追踪时，不需要更新UI，此时可以通过toRaw方法拿到他的原始数据，对原始数据进行修改，这样就不会被追踪，不会更新UI界面，性能就好了 obj === ob活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看j2 // true 通过reactive得到的数据，拿到原始数据
通过ref得到的数据，拿到原始数据（需要.value）
markRaw 作用：让数据永远不被追踪，UI也就不会发生改变，响应式也不生效
toRef 如果利用ref将某个对象的属性变成相应书数据，我们修改响应式数据时，不会影响到原始数据 如果利用toRef将某个对象的属性变成相应书数据，我们修改响应式数据时，是会影响到原始数据，但是并不会触发UI界面的更新 import { toRef } from \’vue\’ 两个参数，第一个：对象名；第二个：key
ref和toRef区别
ref是复制，修改响应式数据不会影响原始数据；界面会自动更新
toRef是引用，修改响应式数据会影响原始数据；界面不会自动更新
toRef应用场景
如果想让响应式数据和以前的数据关联起来，并且更新响应式数据后不想更新UI，则使用toRef
toRefs 用于修改对象的多个属性，选中的语句相当于执行了上面注释的两句代码
customRef 自定义ref，返回一个ref对象，可以显示地控制依赖追踪和触发响应
注意：不能在get方法中发送网络请求，因为渲染界面要调用get方法–>发送网络–>保存数据–>更新界面–>调用get 会陷入死循环
解决方法：在return之前就调用请求
通过ref获取dom元素
1.引入onMounted
2.定义boxRef，并暴露出去
3. 创建dom元素，并赋值ref=“boxref”
readonly 用于创建一个只读数据，并且是递归只读
shallowReadOnly 用于创建一个只读数据，但不是递归只读
isReadOnly 用于判断是否是只读的 const和readonly的区别
const:赋值保护，不能给！！！变量！！！重新赋值
readonly:属性保护，不能给！！！属性！！！重新赋值
VUE3中响应式数据本质 vue2中通过defineProperty来实现响应式数据的 vue3中是通过proxy来实现响应式数据的（具体实现如下）
setup中使用计算属性 import { computed } from \’vue\’ computed是一个函数，当传入一个函数时，返回一个不允许被修改的计算属性
computed是一个函数，当传入一个对象时，返回一个允许被修改的计算属性
setup中使用监听属性 import { watch } from \’vue\’ watch接受三个参数
参数1：监听的数据源，可以是一个ref获取是一个函数
参数2：回调函数（val, oldVal）=> {}
参数3：额外的配置 是一个是对象时进行深度监听，添加 { deep：true， immediate: true}
监听多个值
vue3中生命周期
vue3依赖注入（provide，inject）
可用于父组件传数据给子组件
父组件provide提供方法
vue3中也能使用props，在setup里可以接受参数，第一个参数即为props，前提：也需要注册props
vue3中使用typescript 1.安装typescript npm install typescript –save-dev 2.初始化tsconfig.json npx tsc –init 3.将main.js修改为main.ts，同时将index.html里的引用也修改为main.ts，修改完后重启项目
若此时标红，表示ts还未能识别到.vue文件，需要进行如下配置（配置完后 标红已消失）
96133162
《vue2和vue3的兼容，vue2与vue3区别》来自互联网同行内容，若有侵权，请联系我们删除！
