小马Ti的博客

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

setup的注意点1.setup的执行时机：​ 在beforeCreate之前执行一次，this是undefined 2.setup的参数：​ props：值为对象，包含：组件外部传递过来、且组件内部声明接受了的属性 ​ context：上下文对象 ​ attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs ​ slots：收到的插槽内容，相当于this.$slots ​ emit：分发自定义事件的函数，相当于this.$emit

ref函数定义一个响应式的数据 语法const xxx=ref(initValue) ​ 创建一个包含响应式数据的引用对象（reference对象） 使用方法​ JS中操作数据：xxx.value ​ 模板中读取数据：不需要.value，直接 备注​ 接收的数据可以是基本类型，也可以是对象类型 ​ ①基本类型的数据：响应式依然是靠Object.defineProperty()中的get和set完成 ​ ②对象类型的数据：内部求助了Vue3中的一个新函数—reactive函数

readonly与shallowReadonlyreadonly：让一个响应式数据变为只读的（深只读） shallowReadonly：让一个响应式数据变为只读的（浅只读） 目的不希望数据被修改时使用