Vue3.0学习 - 第五节,reactive 什么是reactive

reactive

  • reactive 是 Vue3 中提供的实现响应式数据的方法。
  • 在 Vue2 中响应式数据是通过 defineProperty 来实现的,在 Vue3 中响应式数据是通过 ES6 的 Proxy 来实现的。具体参照Vue双向数据绑定,Vue3 的 Proxy 和 defineProperty 的比较。
  • reactive 参数必须是对象 (json / arr)
  • 如果给 reactive 传递了其它对象
  1. 默认情况下,修改对象无法实现界面的数据绑定更新。
  2. 如果需要更新,需要进行重新赋值。(即不允许直接操作数据,需要放个新的数据来替代原数据)

在 reactive 使用基本类型参数:



Vue3.0学习 - 第五节,reactive 什么是reactive_第1张图片

点击 button ,我们期望的结果是数字从 0 变成 1,然而实际上界面上的数字并没有发生任何改变。

查看控制台,它的输出是这样的(我点了 3 次)

Vue3.0学习 - 第五节,reactive 什么是reactive_第2张图片

而输出的值确实发生了变化,只不过这种变化并没有反馈到界面上,也就是说并没有实现双向数据绑定。当然,如果是 ref 的话,就不存在这样的问题。而如果要使用 reactive ,我们需要将参数从 基本类型 转化为 对象。



将参数替换成了对象 {num: 0},此时,点击按钮界面就会产生改变:

Vue3.0学习 - 第五节,reactive 什么是reactive_第3张图片

在控制台打印消息

Vue3.0学习 - 第五节,reactive 什么是reactive_第4张图片

可以看到,msg 成功被创建成了 proxy 对象,他通过劫持对象的 get 和 set 方法实现了对象的双向数据绑定。

 

深层的、对象内部的变化也能被察觉到(注意下面代码中的 inner ):



Vue3.0学习 - 第五节,reactive 什么是reactive_第5张图片

数组变化:



Vue3.0学习 - 第五节,reactive 什么是reactive_第6张图片

在 reactive 使用 Date 参数

如果参数不是数组、对象,而是稍微奇怪一点的数据类型,例如说 Date ,那么麻烦又来了。



 

Vue3.0学习 - 第五节,reactive 什么是reactive_第7张图片

08uwn0.png

这里我先打印了 msg 两次,可以看到,点击一次 button ,msg 的数据是存在变化的,但界面并未发生变化,同时我们发现在控制台里,msg 并未被识别成 proxy

就算我们把 Date 放在对象里,就像这样:




也仍然不起效果。

显然,对于这种数据类型,我们需要做特殊处理。

这个特殊处理就是重新赋值,而不是直接修改原来的值。




                    
                    

你可能感兴趣的:(vue3.0学习,vue3,Vue3.0学习,reactive)