随笔分类 - VUE3.X
摘要：Teleport 直译为传送的意思，顾名思义 vue3 的 teleport PAI 能把组件的 html 结构移动倒指定的位置 例子： 原始结构 使用teleport,移动到body去 就是这么神奇
阅读全文
摘要：父组件通过 provide 提供数据 provide('data',data) 后代组件提供 inject 接收数据 inject('data') 父组件 后代组件（无论层级）
阅读全文
摘要：定义：toRefs可以将对象（只能接收ractive对象）中的属性变成响应式 正常reactive对象数据也是响应式的，如果用toRefs解构出去会更加方便 用法： <h3>{{name}}</h3> let obj = reactive({ name:'kebi' }) return { ...t
阅读全文
摘要：vue3中引入 hooks 概念， hooks 本质是一个函数，是对 setup 中使用的 composition API的封装 hooks 复用率高，使setup中逻辑更清晰 例子： 新建一个 hook 函数组件 usePoint.js 页面中调用
阅读全文
摘要：在我看来 watchEffect 是 watch的升级版 1、watchEffect 不指明那个属性，谁调用，就监测谁（watch 需要指明那个属性） 2、watchEffect 和计算属性computed有点像， 但是computed需要return返回 而watchEffect不需要return
阅读全文
摘要：总体来说vue3的watch属性和vue2差不多，但是也有几个不同点 1、需要从vue中引入 2、vue3中的watch属性不能监测到响应式数据 reactive 对象，否则获取不到属性旧值（深度监测deep设置无效） watch能监测ref响应式数据，且能返回新旧值 3、vue3中watch可以监
阅读全文
摘要：reactive 定义数据响应式 1、实现：基于ES6的 proxy 实现 2、参数：接收一个 对象 或者 数组 3、优点：能对深层次数据进行处理 能直接修改数组 能直接把对象属性进行新增、修改、删除（Object.defineProPerty 需要遍历对象的每一个属性，然后再去操作） 对比 ref
阅读全文
摘要：vue2 中的 ref 获取一个 dom 元素和实例对象 vue3 中 ref 是用来定义数据响应式 特别注意：ref 可以接收基本数据类型，也可以是对象类型 1、基本数据类型：基本数据类型 ref 的处理方式还是 Object.defineProPerty() 的get()和set() 完成 2、
阅读全文
摘要：vue3和vue2不同的地方就是不必写 data、methods、等代码块了 所有的东西都可以在 setup 中返回 setup 可以返回两种值： 1、返回对象，对象中的属性、方法都可以直接在模板中使用 2、返回渲染函数，可以自定义渲染内容（其实也就是 render 函数）注意：渲染函数优先级还高，
阅读全文
摘要：一、总体性能 官方给出量化数据为： 1、打包大小减少41% 2、初次渲染快 55%，更新渲染快133% 3、内存减少54% 二、源码升级 1、使用 proxy 来代替 definProperty 实现响应式 2、重写虚拟DOM 3、Tree-Shaking （树摇） 三、拥抱 typescript
阅读全文
