Vue3探索：ref和reactive有何区别？如何有效改变数组值？

本文共计1575个文字，预计阅读时间需要7分钟。

目录 + 概况 + ref() + Vue3中修改数组的值 + 总结 + 概况 + Vue3 + 实现数据的响应式监听，共有两种方式：即 ref 和 reactive。它们既有区别又有联系。ref() + ref() 数据的响应式监听。ref() + 函数传入一““

目录

• 概况
• ref()
• reactive()
• vue3中改变数组的值
• 总结

概况

Vue3 里要实现数据的响应式监听一共有两种方式既：ref 和 reactive

他们既有区别又有联系。

ref()

ref数据响应式监听。ref 函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值

reactive()

reactive

reactive 是 Vue3 中提供的实现响应式数据的⽅法。

在 Vue2 中响应式数据是通过 defineProperty 来实现的，在 Vue3 中响应式数据是通过 ES6 的 Proxy 来实现的。具体参照，。