Vue3的ref、reactive、toRef、toRefs
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3的ref、reactive、toRef、toRefs相关的知识，希望对你有一定的参考价值。
参考技术A 在网上看了很多文章没有一个能把这些效果讲清楚的。我写一下自己试出来的结果。先说一下我根据结论得出的理解：
运行后，html显示： a:1 b:1 。
点击按钮后，输出：
html显示： a:1 b:1 。
运行后，html显示： a:1 b:1 。
点击按钮后，输出：
html显示： a:1 b:2 。
运行后，html显示： a:"a":1,"b":2 b:"a":1,"b":2 。
点击按钮后，输出：
html显示： a:"a":1,"b":2 b:"a":1,"b":2 。
运行后，html显示： a:"a":1,"b":2 b:"a":1,"b":2 。
点击按钮后，输出：
html显示： a:"a":1,"b":4 b:"a":1,"b":4 。
运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
点击按钮后，输出：
html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
点击按钮后，输出：
html显示： a:"a":1,"b":2,"c":4 b:"a":1,"b":2,"c":4 c:4 。
运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
点击按钮后，输出：
html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
点击按钮后，输出：
html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
点击按钮后，输出：
html显示： a:"a":1,"b":2,"c":4 b:"a":1,"b":2,"c":4 c:4 。
运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。
点击按钮后，输出：
html显示： a:"a":1,"b":2,"c":4 b:"a":1,"b":2,"c":4 c:4 。
综上，可以总结以下表格：
以上是关于Vue3的ref、reactive、toRef、toRefs的主要内容，如果未能解决你的问题，请参考以下文章
vue3的ref和reactive以及toRef和toRefs的区别。
Vue3的ref、reactive、toRef、toRefs
Vue3官网-高级指南（十六）vue响应式原理步骤本质（副作用effect响应式状态reactive响应式原始值ref(解包)构造响应值toRefs）proxy(代理this)