标签：aa console log cc Vue3 value reactive 聊下
介绍
众所周知，vue3 相较于 vue2 进行了很大提升，很大的一方面就是响应式原理上————使用了 Proxy。Proxy 可以先看看 阮一峰大大的教程，建议 15、16章节连起来看，那么如何去使用呢？
我们可以这样的理解，reactive 和 ref 相当于一个语法糖，使用这两个语法糖创建的变量就具备了响应式的功能，能自动的在页面和数据之间进行驱动。可能有朋友不太理解，ref 在 vue2 中不是定义操作 DOM 的节点吗？为什么这里能定义变量了，还是响应式的。这是因为 vue3 内部给它重新进行了赋能，具体还没有扒源码，大家先简单这样记下就好。
好，具体说下区别：
定义上：
- ref - 推荐定义基础类型变量，这个时候内部是使用
Object.defineProperty实现响应原理的，如果定义了 Object 类型变量，那么其内部还是指向 proxy 的，这点我们可以先打印看看
从 value 指向上我们可以看到内部 value、_value 的变更
- reactive - 推荐使用复杂变量，如 object，可从 ref 定义复杂变量内部还是指向 proxy，或 proxy 拦截复杂对象反向推到，这里放一张 vue3 官方网站上的 reactive 定义
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
可以看到可拓展对象还是指向的 object
使用方式上：
注意：这里如果没有特指，使用范围全部在 setup 内
- ref - 的赋值必须使用 .value，这点可从打印的图片上可以看出，那同理，取值的话也要加一个 .value，不然指向不正确，来张图：
但是 .value 取值的话一次还好，多次就比较麻烦，这里有一个简化的 api——unref，同样来张图：
import { unref } from 'vue';
const aa = ref('haha');
console.log('aa', aa);
console.log('aa.value prev', aa.value);
aa.value = 'houhou';
console.log('aa.value next', aa.value);
console.log('unref(aa)', unref(aa));
- reactive - reactive 则没这么麻烦，和正常的 object 一样操作就好，没有什么 .value，同样来张图：
import { reactive} from 'vue';
const cc = reactive({
a: 1,
b: 2,
c: 3
});
cc.a = 10;
cc.d = 12;
console.log('cc', cc);
console.log('cc.a', cc.a);
console.log('cc.d', cc.d);
可以看到正常的 object.key 这种形式，新增和修改都是能正常响应的（如更改的属性 a 和 新增的属性 d），来说说如果对它解构的话会怎样，来张图：
let { a } =cc;
console.log('a prev', a);
a = 15;
console.log('a next', a);
console.log('cc', cc);
可以看到，解构的变量不再具有响应式（a 改变，cc 并没变），当然这种情况用到的不多，如果我们要改变一个对象的某个属性，一般可通过 Object.assign(obj, {}) 这种形式解决，这里说他只是为了引入 toRefs 这个 api——把 reactive 解构为一组具备响应式关系的 ref，同样来张图：
可以看到打印出来的变量 b 已经指向了 ObjectRefImpl 这个类，并看到 ``__v_isRef:、_key、_object、value``` 这几个属性，可以简单的把它们理解为响应关联，此时 b 这个变量就和 cc 这个对象关联起来了，当改变 b 的值时，cc 同样发生了变化，这样有个好处就是，当我们在一个 reactive 里定义了很多变量时，如果在模板上一个一个 object.key 这种方式去写，会很麻烦，也不美观，这个时候就可以 toRefs 出去，直接写 key 即可，这样数据就具备了响应关联，vue 就能在数据变化时自动更新页面，我们来试下，同样上图：
// template
<ul>
<li>我是 cc 对象的属性 a，{{ a }}</li>
<li>我是 cc 对象的属性 b，{{ b }}</li>
<li>我是 cc 对象的属性 c，{{ c }}</li>
</ul>
// setup
return {
...toRefs(cc)
};
最后
说得多还不如上手，大家动手练练哈哈
标签：aa,console,log,cc,Vue3,value,reactive,聊下 来源： https://www.cnblogs.com/zxn-9588/p/15703258.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。