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

小鱼儿 2023-01-13 12:52 115阅读 0赞

# reactive #

*  `reactive` 是 Vue3 中提供的实现响应式数据的方法。
 *  在 Vue2 中响应式数据是通过 defineProperty 来实现的，在 Vue3 中响应式数据是通过 ES6 的 `Proxy` 来实现的。具体参照[Vue双向数据绑定][Vue]，[Vue3 的 Proxy 和 defineProperty 的比较][Vue3 _ Proxy _ defineProperty]。
 *  reactive 参数必须是对象 (json / arr)
 *  如果给 reactive 传递了其它对象

1.  默认情况下，修改对象无法实现界面的数据绑定更新。
2.  如果需要更新，需要进行重新赋值。（即不允许直接操作数据，需要放个新的数据来替代原数据）

**在 `reactive` 使用基本类型参数：**

<template>
    <div>
      <p>{
       {msg}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = reactive(0)
        function c() {
          console.log(msg);
          msg ++;
        }
        return {
          msg,
          c
        };
      }
    }
    </script>

![08utpj.png][]

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

查看控制台，它的输出是这样的（我点了 3 次）

![08uN1s.png][]

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

<template>
    <div>
      <p>{
       {msg.num}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = reactive({
          num: 0
        })
        function c() {
          console.log(msg);
          msg.num ++;
        }
        return {
          msg,
          c
        };
      }
    }
    </script>

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

![08u8AS.png][]

在控制台打印消息

![08uGtg.png][]

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

深层的、对象内部的变化也能被察觉到（注意下面代码中的 `inner` ）：

<template>
    <div>
      <p>{
       {msg.num.inner}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = reactive({
          num: {
            inner: 0
          }
        })
        function c() {
          console.log(msg);
          msg.num.inner ++;
        }
        return {
          msg,
          c
        };
      }
    }
    </script>

![08uJhQ.png][]

数组变化：

<template>
    <div>
      <p>{
       {msg}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = reactive([1, 2, 3])
        function c() {
          console.log(msg);
          msg[0] += 1;
          msg[1] = 5;
        }
        return {
          msg,
          c
        };
      }
    }
    </script>

![08uUcn.png][]

# 在 `reactive` 使用 `Date` 参数 #

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

<template>
    <div>
      <p>{
       {msg}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = reactive(new Date())
        function c() {
          console.log(msg);
          msg.setDate(msg.getDate() + 1);
          console.log(msg);
        }
        return {
          msg,
          c
        };
      }
    }
    </script>

![08uaXq.png][]

![08uwn0.png][]

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

就算我们把 `Date` 放在对象里，就像这样：

<template>
    <div>
      <p>{
       {msg.date}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = reactive({
          date: new Date()
        });
        function c() {
          console.log(msg);
          msg.date.setDate(msg.date.getDate() + 1);
          console.log(msg);
        }
        return {
          msg,
          c
        };
      }
    }
    </script>

也仍然不起效果。

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

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

<template>
    <div>
      <p>{
       {msg.date}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = reactive({
          date: new Date()
        });
        function c() {
          console.log(msg);
          msg.date.setDate((msg.date.getDate() + 1));
          msg.date = new Date(msg.date);
          console.log(msg);
        }
        return {
          msg,
          c
        };
      }
    }

这里采用了拷贝的方案重新赋值了 `msg.date`，界面成功发生了变化（日期 + 1）。

![08urAU.png][]

[Vue]: https://dxmo.gitee.io/views/frontend/2020/Vue/Vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.html
[Vue3 _ Proxy _ defineProperty]: https://dxmo.gitee.io/views/frontend/2020/Vue/Vue3%E7%9A%84Proxy.html
[08utpj.png]: /images/20221022/d8cd5fe633c64f019a3a87356c8ebb5f.png
[08uN1s.png]: /images/20221022/9bf31d86f282424a85bb5e97488512c2.png
[08u8AS.png]: /images/20221022/9c0ea1e788d64ee9a8b443302fbf2b80.png
[08uGtg.png]: /images/20221022/ed8b1cba1b9f478484b82e2fa40fbac9.png
[08uJhQ.png]: /images/20221022/2ab7e981e27146e381d8bf042c2bfd16.png
[08uUcn.png]: /images/20221022/2d4ff707e13948bf8509c7ee9fdbf193.png
[08uaXq.png]: /images/20221022/448cd304b4fe4c429aa906e5692fbc39.png
[08uwn0.png]: /images/20221022/e5d54dd92f334c029cfec08c610a278e.png
[08urAU.png]: /images/20221022/8b1f7f7e4d4640d0898365cfb14c84c4.png