大家好，我是讯享网，很高兴认识大家。



目录

Vue3.0

与2.0的区别

基本代码体

ref、reactive

ref、toref

torefs

inputref

CustomRef

shallowReactive、shallowRef

响应式原理proxy和reflect

setup

生命周期

hooks

readonly、shallowReadonly

toRaw与markRaw

provide、inject

响应式判断

vue3中支持vue2的大多数特性。比如内置指令、自定义指令、watch监听器、computed、methods、路由、组件、vuex...

创建方式：

①脚手架创建。 ，只要vue版本高于4就ok，

②提高vite创建。，npm run sev运行

1. 性能提升、打包大小减少了40%，第一次渲染快了55%左右，更新提高了大概130%、内存减少了50%左右
2. 可以使用vite构建项目，也可以用脚手架创建
3. 响应式原理

   使用proxy代理配合reflect反射，不用再和vue2一样每一个属性都写一个set和get

4. 重写虚拟DOM的实现和Tree-Shaking（摇树）
5. 新增Composition（组合）API
   • 不在使用mixin封装函数，而是使用hook封装
   • Vue的响应式特性、Vue的生命周期
6. 可以使用ts语法
7. setup

   ref和reactive（写在setup里的数据不是响应式的，需要他们来协助，vue2中data的数据都是响应式的） computed和watch 新的生命周期函数 provide.与inject

8. Vue3中Template支持多个根标签（会默认包裹一个Fragment标签，但是不会渲染到页面），Vue2不支持【根标签】
9. 新增组件：Teleport瞬移组件、Suspense异步加载组件、loading界面
10. 全局api的修改，以前都是Vue.xxx，现在修改为app.xxx
11. 模板语法的细微变化

基本代码体

讯享网

ref是一个函数

作用：定义一个响应式的数据，返回一个ref对象，对象中有一个value属性，如果需要对数据进行操作，需要使用该Ref对象调用value属性的方式进行数据的操作

讯享网

ref、toref

都是把reactive包裹的对象内的属性变为ref响应式的

讯享网

区别：toref使得操作对象的属性，{{对象}}和对象内{{属性}}都变为响应式，而ref仅让{{属性}}变为响应式，对象不发生变化

torefs

包裹一个对象，把对象内部的属性变为响应式的。把响应式对象变为普通对象，但是对象内属性变为ref响应式

reactive会将一个对象变成响应式{{obj}}，但是如果页面中的内容是{{具体某一个属性}}，则无法实现页面响应式。

和toref区别：对象内的全部属性都变为ref响应式，可以解构{xxx，xxx}或...state出来

讯享网

inputref

获取表单元素

例如：实现页面的输入框初始就有焦点

讯享网

CustomRef

自定义的ref

防抖：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

shallowReactive、shallowRef

对象的浅劫持

注意：

页面中有除了目标变化以外的任何一个可以刷新页面的操作,都会影响浅度劫持,将其变成深度劫持,发生牵连影响。

也就是说，浅劫持命令只在没有其他刷新操作的页面起作用

讯享网

好处

对整个对象进行代理proxy，内部的所有属性都可以被劫持到变化，可以实现深度监听（对象内地对象属性）。简单方便，包含到的使用场景多。

setup

细节：setup在beforeCreate.之前执行的，并且只执行一次

推断出：setup在执行的时候，当前组件还没有被创建出来，

意味着：组件实例对象this根本就不能用，this是undefined,所以不能通过this再去调用data/computed/methods/props巾的相关内容了，其实所有的组合API相关的回调函数中都不可以

setup中的返回值是一个对象，内部的属性和方法和data函数中的return对象的属性是给html模板使用的

混合使用

setup中的对象内部的属性和data函数中的return对象的属性会合并为组件对象的属性

setup中的对象中的方法和methods对象中的方法会合并为组件对象的方法

注意

在vue3中尽量不要混合使用，因为methods可以访问setup提供的属性和方法，但是setup中方法不能访问methods(setup比beforecreate先执行，this无法访问加载的方法)

setup尽量不要是个async函数，因为返回值不再是return的对象了，而是promise对象,模板根本看到return对象中对象中的属性数据了

讯享网setup可以接收一些参数`setup(props，{atters，slots，emit})`    //props参数：是一个对象，里面有父组件向子组件传递的数据，并且是在子组件通过props声明接收的所有属性 ​ /*context参数：是一个对象(可以解构，选择其中的部分对象)，里面有 attrs对象(获取当前组件标签上所有的属性对象，且是在props中没有声明接收过的所有属性的对象)， emit方法（分发事件的）在子组件的方法中直接触发父组件定义的方法（类似自定义事件，直接对父组件的内容进操作）emit（"方法名"，"参数"）， slots对象（插槽）*/ ​ props和atters、slots都是proxy对象 

默认导出封装的一些函数，return变量，在组件setup中解构获取变量,以此应用到网络中

比如封装一个点击显示页面鼠标位置方法，通过组合API来实现Vue的响应式特性(ref/reactive)、Vue的生命周期、hooks写法…

讯享网  

讯享网                 

readonly、shallowReadonly

readonly深只读和shallowReadonly浅只读

shallowReadonly仍可以对对象内属性是对象，其内的属性可以进行修改，但是，对象内的属性不可以（浅只读）

readonly无论套多少层对象，都是不可修改的

toRaw与markRaw

toRaw：将一个由reactive生成的响应式对象转为普通对象。如果是ref定义的话，是没有效果的（包括ref定义的对象）

但是如果在后续操作中对数据进行了添加的话，添加的数据仍为响应式数据，当然要是将数据进行markRaw操作后就不会变为响应式

provide、inject

父-子孙组件传递数据，不需要借助父组件一层一层传值

父组件provide(“color”,color)

子孙组件const color =inject(‘color’)

响应式判断

isRef: 检查值是否为一个 ref 对象。 isReactive：检查对象是否是由 reactive 创建的响应式代理。 isReadonly: 检查对象是否是由 readonly 创建的只读代理。 isProxy：检查对象是否是由 reactive 或 readonly 创建的 proxy。