小马Ti的博客

Vue3生命周期 与Vue2的对应关系Vue3也提供了Composition API形式的生命周期钩子，与Vue2中钩子对应关系如下： beforeCreate===>setup() created===>setup() beforeMount===>onBeforeMount mounted===>onMounted beforeUpdate===>onBeforeUpdate updated===>onUpdated beforeUnmount===>onBeforeUnmount unmounted===>onUnmounted

原理总结实现原理： ​ 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、、属性的添加。属性的删除等 ​ 通过Reflect（反射）：对被代理对象（源对象）的属性进行操作

Reflect1234567891011121314const p=new Proxy(data,{ // 拦截读取属性值 get(target,prop){ return Reflect.get(target,prop) }, //拦截设置属性值或添加新属性 set(target,prop,value){ return Reflect.set(target,prop,value) }, //拦截删除属性 deleteProperty(target,prop){ return Reflect.deleteProperty(target,prop) }})

Proxy123456789101112131415//模拟Vue3中实现响应式const p=new Proxy(person,{ // 有人读取p的某个属性时调用 get(target,propName){ return target[propName] }, //有人修改p的某个属性、或给p追加某个属性时调用 set(target,propName,value){ target[propName]=value }, //有人删除p的某个属性时调用 deleteProperty(target,propName){ return delete target[propName] }})

vue2响应式原理实现原理​ 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持） ​ 数组类型：通过重写更新数组的一系列方法来实现拦截（对数租的变更方法进行了包裹） 1234Object.defineProperty(data,'count',{ get(){}, set(){}}) 存在问题​ 新增属性、删除属性，界面不会更新 ​ 直接通过下标修改数组，界面也不会更新

toRef与toRefs作用：创建一个ref对象，其value值指向另一个对象中的某个属性 语法：const name=toRef(person,”name”) 应用：要将响应式对象中的某个属性单独提供给外部使用时 示例1234567891011121314151617181920212223242526272829303132333435363738<template> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <h2>薪资：{{salary}}</h2> <button @click="name+='~'">修改姓名</button> <button @click="age++">增长年龄</button> ...

toRaw与markRawtoRaw作用将一个由reactive生成的响应式对象转为普通对象 使用场景用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新 markRaw作用标记一个对象，使其永远不会再成为响应式对象 应用场景1.有些值不应被设为响应式的，例如复杂的第三方类库等 2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

Teleport组件什么是Teleport？’​ Teleport是一种能够将我们的组件html结构移动到指定位置的技术 案例123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<template> <div> <button @click="isShow=true">点我弹窗</button> <teleport to="body"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>我是一个弹窗</h3> <h4>一些内容</h4> ...

Suspense组件等待异步组件时额外渲染一些内容，让应用有更好的用户体验 示例123456789101112131415161718192021222324252627282930313233<template><div class="app"> <h3>我是App组件（祖）</h3> <Suspense> <template v-slot:default> <Child/> </template> <template v-slot:fallback> <h3>稍等，加载中……</h3> </template> </Suspense></div></template><script>import {defineAsyncComponent} from "vue";const...

shallowReactive与shallowRefshallowReactive：只处理对象最外层属性的响应式（浅响应式） shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理 使用方法​ 如果有一个对象数据，结构比较深，但变化时只是外层属性变化：shallowReactive ​ 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换：shallowRef