随笔分类 - vue3.x
摘要：function shallowRef(val) { return shallowReactive({value:val}); } function shallowReactive(obj) { return new Proxy(obj, { get(obj, key){ return obj[ke
阅读全文
摘要：什么是 Proxy？ MDN 上是这么描述的——Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。 其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作
阅读全文
摘要：利用readonly封装数据，递归只读 <template> <div> <p>{{state.name}}</p> <p>{{state.attr.age}}</p> <p>{{state.attr.height}}</p> <button @click="myFn">按钮</button> </
阅读全文
摘要：ref 过去在 Vue2 中，我们采用 ref 来获取标签的信息，用以替代传统 js 中的 DOM 行为。 <template> <div ref="box"> I am div </div> </template> console.log(this.$refs.box); 在 Vue3 的组合 A
阅读全文
摘要：customRef 返回一个ref对象,可以显式地控制依赖追踪和触发响应 示例 <template> <div> <p>{{obj}}</p> <button @click="inc">button</button> </div> </template> <script> import { cust
阅读全文
摘要：ref和toRef区别: ref->复制, 修改响应式数据不会影响原始数据 toRef->引用, 修改响应式数据会影响原始数据 ref->数据发生改变, 界面就会自动更新 toRef->数据发生改变, 界面也不会自动更新 toRef应用场景: 如果想让响应式数据和以前的数据关联起来, 并且更新响应式
阅读全文
摘要：reactive类型数据代码 <template> <div> <p>{{state}}</p> <button @click="myFn">按钮</button> </div> </template> <script> import {reactive} from 'vue'; export de
阅读全文
摘要：递归监听 默认情况下，Vue3 中的 ref 和 reactive 都是递归监听的(层级深的对象)，即能实时监听对象的底层变化。 例如，在 ref 中 <template> <div> <p>msg.a.b.c = {{msg.a.b.c}}</p> <p>msg.e.f = {{msg.e.f}}
阅读全文
摘要：1. ref和reactive区别: 如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value 如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value 2. Vue是如何决定是否需要自动添加.value的 Vue在解析
阅读全文
摘要：1.什么是ref? - ref和reactive一样, 也是用来实现响应式数据的方法 - 由于reactive必须传递一个对象, 所以导致在企业开发中 如果我们只想让某个变量实现响应式的时候会非常麻烦 所以Vue3就给我们提供了ref方法, 实现对简单值的监听 2.ref本质: - ref底层的本质
阅读全文
摘要：reactive reactive 是 Vue3 中提供的实现响应式数据的方法。 在 Vue2 中响应式数据是通过 defineProperty 来实现的，在 Vue3 中响应式数据是通过 ES6 的 Proxy 来实现的。具体参照Vue双向数据绑定，Vue3 的 Proxy 和 definePro
阅读全文
摘要：新的 setup 组件选项在创建组件之前执行。 1.Composition API 和Option API(vue2.x)混合使用 2.Composition API本质 (组合API/注入API) 3.setup执行时机 4.setup注意点 1.setup执行时机 beforeCreate: 表
阅读全文
摘要：1，用vue2.x，实现一个todos <template> <div> <form> <input type="text" v-model="stu.id"> <input type="text" v-model="stu.name"> <input type="text" v-model="st
阅读全文
摘要：1.Vue3.0-快速上手 - 创建Vue3的3种方式 + Vue-CLI + Webpack + Vite 我用 Vite （尤自创的方案） 2.什么是Vite? - Vite是Vue作者开发的一款意图取代webpack的工具 - 其实现原理是利用ES6的import会发送请求去加载文件的特性,
阅读全文
摘要：Vue3.0是如何变快的? - diff算法优化: https://vue-next-template-explorer.netlify.app/ + Vue2中的虚拟dom是进行全量的对比，同级对比，不管修改和未修改的数据都会对比 + Vue3新增了静态标记(PatchFlag), 在与上次虚拟节
阅读全文
摘要：Object.defineProperty 劫持数据 只是对对象的属性进行劫持 无法监听新增属性和删除属性 需要使用 vue.set, vue.delete 深层对象的劫持需要一次性递归 var obj = { a: 1, o: { b: 2, o1: {} } } 无法监听原生数组，需要特殊处理，
阅读全文