Vue响应式操作包括简单数据类型、对象、数组、树状结构总结

1.简单数据类型：Boolean、Number、String

直接赋值：

this.value = "张三"； // 页面上显示的值会更新成“张三”

2.对象 Object

假设组件data代码如下：

  data() {

    return {

      formData: {

        name:  "李四"

      }, // form表单

    };

  },

通过当前组件实例化对象 this.$set改变属性的值，代码如下：

this.$set(this.formData, "name", "张三"); // 页面上from显示的值会更新成“张三”

3. 数组 Array

假设组件data代码如下：

  data() {

    return {

      myArray: ["李四"], // 数组

    };

  },

使用Array提供的splice方法:

this.myArray.splice(index, 1, ''张三"); // index代码元素在数组中的位置， 1 - 操作索引开始的一个元素，而不是两个元素。

备注： 数组提供的方案splice是响应式的操作，具体可以百度搜索数组的响应式方法。

深入思考：数组对象怎么做到数组的响应式操作？

假设组件data代码如下：

  data() {

    return {

      myArray: [

        {

           name: "李四",

           age: 20,

        }

      ], // 数组

    };

  },

同理，使用Array提供的splice方法:

let person = myArray[0];

person.name = "张三";  // 不是响应式操作

this.myArray.splice(index, 1, Object.asign({}, person)); // index代码元素在数组中的位置， 1 - 操作索引开始的第1个元素。

Object.asign({}, person)  --- 相当于把person数据拷贝到空对象{}中，并返回该对象。

因splice是响应式方法，故而达到响应式操作的功能。

4. 树状结构(二维数组)

假设组件data代码如下：

  data() {

    return {

      myTree: [

         {

             id: 0,

             name: "李四的爸爸",

             children: [{

                 name: "李四",

                 age: 20,

            }]

      ], // 二维数组

    };

  },

同理，使用Array提供的splice方法:

let parent = myTree[0];

parent.children[0].name = "张三";  // 不是响应式操作

parent

this.myTree.splice(index, 1, Object.asign({}, parent)); // index代码元素在数组中的位置， 1 - 操作索引开始的1个元素。

Object.asign({}, parent)  --- 相当于把parent数据拷贝到空对象{}中，并返回该对象。

因splice是响应式方法，故而达到响应式操作的功能。