VUE3对比VUE2的优势及新特性原理

1.Vue3.0新特性

1. 性能比Vue2.x快1.2~2倍
   原因1：
   diff方法优化：
   vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）
   vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容
   原因2：静态提升
   vue2无论元素是否参与更新，每次都会重新创建然后再渲染
   vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可
   原因3：时间侦听器缓存
   默认情况下onClick会被视为动态绑定，所以每次都会追踪它的变化
   但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可
   原因4：ssr渲染
2. 按需编译，体积比vue2.x更小
3. 组合API（类似react hooks）
4. 更好的Ts支持
5. 暴露了自定义渲染API
6. 更先进的组件
7. Fragment:模板可以有多个根元素

vue3.0-快速上手

创建vue3的3种方式

1. Vue-Cli

npm i -g @vue/cli@next // 升级vue-cli v4.5版本

2. Webpack
3. Vite

什么是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

组合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 === obj2  // 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文件，需要进行如下配置（配置完后 标红已消失）