摘要：
### webpack 介绍 * 什么是webpack<https://www.webpackjs.com/> * Webpack是一个模块打包器(bundler)。 * 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理 * 它将根据模块 阅读全文
摘要：
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 阅读全文