vue的响应式+data更新

本是古典何须时尚 2022-05-23 11:54 264阅读 0赞

### 关于数组 ###

1.  使用数组变异方法
    
    对Vue实例中data里面的数组使用变异方法操作的时候，Vue可以检测到变化并进行更新变异方法包括
    
     *  push()
     *  pop()
     *  shift()
     *  unshift()
     *  splice()
     *  sort()
     *  reverse()
2.  非变异方法
    
    非变异方法因为不会直接改变原始数组，所以需要使用另外的方法，比如用新数组去替换原数组。**用含有相同元素的数组去替换原来的数组是非常高效的操作**
    
        var example1 = new Vue({ el: 'example1' data:{ items:[ { message:'Foo'}, { message:'Baz'} ] } }) example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })

#### 两个错误的例子和对应的正确的方法 ####

1.  使用`example1.items[0] = newValue`这样的方法来改变数组，改变的值不具有响应特性，正确的方法是
    
        Vue.set(example1.items, 0, newValue)
    
    或者
    
        example1.items.splice(0, 1, newValue)
2.  使用`example1.items.length = newLength`的方法改变数组的长度，Vue也无法检测到变化，正确的方法是
    
        example1.items.splice(newLength)

### 关于对象 ###

**Vue不能动态添加根级响应式属性，也不能检测根级属性中属性的添加或删除**，这部分内容，看[VUE数据data更新而列表不更新，VUE的响应式原理的几个小例子][VUE_data_VUE]

1.  既然不能添加根级属性，那我们就把需要动态添加的属性嵌套在已有的根级属性里面，通用使用set方法
    
        var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } } }) Vue.set(example1.items, 'age', 27)
    
    效果相同的另一种写法，在Vue实例内使用
    
        var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { this.$set(this.items, 'age', 27) } } })
2.  如果需要添加的属性很多，那就可以使用对象替换的方法，这种方法在上面的数组的方法中也用过
    
        var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { this.items = Object.assign({}, this.items, { age: 27, favoriteColor: 'Vue Green' }) } } })
    
    这里要注意的地方是：**一定要是对此对象的整体替换，直接操作添加的属性不具备响应特性**
    
    直接操作的例子
    
        var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { Object.assign(this.userProfile, { age: 27, favoriteColor: 'Vue Green' }) } } })

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>vue</title>
      <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
      <style>
        li:hover {
          cursor: pointer;
        }
      </style>
    </head>
    <body>
      <div class="wrap">
        <ul>
          <li v-for="item,index in items" v-on:click="handle(index)">
            <span>{
       {item.name}}</span>
            <span>{
       {numbers[index]}}</span>
          </li>
        </ul>
      </div>
      <script>
        var vm = new Vue({
          el: ".wrap",
          data: {
            numbers: [],
            items: [
              {name: 'jjj'},
              {name: 'kkk'},
              {name: 'lll'},
            ]
          },
          methods: {
            handle: function (index) {
              // WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
               if (typeof(this.numbers[index]) === "undefined" ) {
                 this.numbers[index] = 1;
               } else {
                 this.numbers[index]++;
               }
            }
          }
        });
      </script>
    </body>
    </html>

![复制代码][copycode.gif]

这里的实现目的很明确 --- 我希望在点击li时先检测是否存在，当然是不存在的，所以就将值设置为1， 如果再次点击，就让数字累加。

但是出现的问题是：　点击之后数字并没有在view层更新，而通过console打印发现数据确实更新了，只是view层没有及时的检测到， 而我一直以来的想法就是： 既然vue实现的时数据双向绑定，那么在model层发生了变化之后为什么就没有在view层更新呢?

首先，我就考虑了这是不是数组的问题，于是，我测试了下面的例子：

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>vue</title>
      <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
      <style>
        li:hover {
          cursor: pointer;
        }
      </style>
    </head>
    <body>
      <div class="wrap">
        <ul>
          <li v-for="item,index in items" v-on:click="handle(index)">
            <span>{
       {item.name}}</span>
            <span>{
       {numbers[index]}}</span>
          </li>
        </ul>
      </div>
      <script>
        var vm = new Vue({
          el: ".wrap",
          data: {
            numbers: [],
            items: [
              {name: 'jjj'},
              {name: 'kkk'},
              {name: 'lll'},
            ]
          },
          methods: {
            handle: function (index) {
              // 不是数组，这里更新数据就可以直接在view层渲染
              this.items[index].name += " success";
            }
          }
        });
      </script>
    </body>
    </html>

![复制代码][copycode.gif]

这时，我再测试时就发现，这里的model层发生了变化时，view层就能及时、有效的得到更新。

而数组为什么不可以呢？

于是在文档上的一个不起眼的地方找到了下面的说明：  
![1044137-20170523112729226-300733714.png][]

其中最重要的一句话就是 --- 如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新，这个方法主要用于避开Vue不能检测到属性被添加的限制。

那么什么情况下Vue是不能检测到属性被添加呢？  根据参考链接，我们在文档上看到了很好的说明 --- [深入响应式原理][Link 1]

### 首先，我们要了解Vue是如何实现数据的双向绑定的！   ###

把一个普通 JavaScript 对象传给 Vue 实例的 `data` 选项，Vue 将遍历此对象所有的属性，并使用 [Object.defineProperty][] 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

> 知识补充：
> 
> 　　访问器属性不包含数据值，他们包含一对getter函数和setter函数（这两个函数不是必须的）。在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值；在写入访问器属性是，会调用setter函数并传入新值，这个函数负责决定如何处理数据。
> 
> 　　访问器属性不能直接定义，必须是用Object.defineProperty()来定义。
> 
> 　　下面是一个例子：
> 
> ![复制代码][copycode.gif]
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>       <meta charset="UTF-8">
>       <title>vue</title>
>     </head>
>     <body>
>       <script>
>         var book={
>             _year:2004,
>             edition:1
>         };
>         Object.defineProperty(book,"year",{
>             get:function(){
>                 return this._year;
>             },
>             set:function(newValue){
>                 if(newValue>2004){
>                     this._year=newValue;
>                     this.edition+=newValue-2004;
>                 }
>             }
>         });
>         console.log(book.year); // 2004  在读取访问器属性时会调用get函数
>         book.year=2005;  // 在给访问器属性赋值时会调用set函数
>         console.log(book.edition); // 2
>       </script>
>     </body>
>     </html>
> 
> ![复制代码][copycode.gif]
> 
> 　　这个例子应该可以很好的理解访问器属性了。

所以，当对象下的访问器属性值发生了改变之后（vue会将属性都转化为访问器属性，之前提到了）， 那么就会调用set函数，这时vue就可以通过这个set函数来追踪变化，调用相关函数来实现view视图的更新。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 `setter` 被调用时，会通知 `watcher` 重新计算，从而致使它关联的组件得以更新。

![追踪变化原理][data.png]

即在渲染的过程中就会调用对象属性的getter函数，然后getter函数通知wather对象将之声明为依赖，依赖之后，如果对象属性发生了变化，那么就会调用settter函数来通知watcher，watcher就会在重新渲染组件，以此来完成更新。

OK！既然知道了原理，我们就可以进一步了解为什么出现了之前数组的问题了！

## 变化检测问题 ##

收到现代JavaScript浏览器的限制，其实主要是 Object.observe() 方法支持的不好，Vue不能检测到对象的添加或者删除。然而Vue在初始化实例时就对属性执行了setter/getter转化过程，所以属性必须开始就在对象上，这样才能让Vue转化它。

所以对于前面的例子就不能理解了 --- 数组中index都可以看做是属性，当我们添加属性并赋值时，Vue并不能检测到对象中属性的添加或者删除，但是其的确是添加或删除了，故我们可以通过console看到变化，所以就没有办法做到响应式； 而在第二个例子中，我们是在已有的属性的基础上进行修改的，这些属性是在最开始就被Vue初始化实例时执行了setter/getter的转化过程，所以说他们的修改是有效的，model的数据可以实时的在view层中得到相应。

> ### 补充知识： 什么是 Object.observe() ？ ###
> 
> 　　在介绍之前，不得不残忍的说，尽管这个方法可以在某些浏览器上运行，但事实是这个方法已经废弃！
> 
> 　　概述： 此方法用于异步地监视一个对象的修改。当对象的属性被修改时，方法的回调函数会提供一个有序的修改流，然而这个接口已经从各大浏览器移除，可以使用通用的 [proxy 对象][proxy]。　　　　　　
> 
>  　  方法： 
> 
>     Object.observe(obj, callback[, acceptList])
> 
> 　　其中obj就是被监控的对象， callback是一个回调函数，其中的参数包括changes和acceptList，
> 
> `　　changes`一个数组，其中包含的每一个对象代表一个修改行为。每个修改行为的对象包含: 
> 
>  *  `name`: 被修改的属性名称。
>  *  `object`: 修改后该对象的值。
>  *  `type`: 表示对该对象做了何种类型的修改，可能的值为`"add"`, `"update"`, or `"delete"`。
>  *  `oldValue`: 对象修改前的值。该值只在`"update"与``"delete"有效。` 
> 
> 　　acceptList在给定对象上给定回调中要监视的变化类型列表。如果省略， `["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]` 将会被使用。
> 
> ![复制代码][copycode.gif]
> 
>     var obj = {
>       foo: 0,
>       bar: 1
>     };
>     
>     Object.observe(obj, function(changes) {
>       console.log(changes);
>     });
>     
>     obj.baz = 2;
>     // [{name: 'baz', object: <obj>, type: 'add'}]
>     
>     obj.foo = 'hello';
>     // [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]
>     
>     delete obj.baz;
>     // [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]
> 
> ![复制代码][copycode.gif]
> 
>  
> 
>  　如上所示： 但是chrome也是不支持的，浏览器的兼容性如下：
> 
> ![1044137-20170523122937179-1875859115.png][]

[VUE_data_VUE]: https://www.jianshu.com/p/2f4882add5f0
[copycode.gif]: /images/20220523/0d8817f3dbd647f59161914ec10e92de.png
[1044137-20170523112729226-300733714.png]: /images/20220523/2acae009c6f144e9a0f9e1d1ebc14225.png
[Link 1]: https://cn.vuejs.org/v2/guide/reactivity.html
[Object.defineProperty]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
[data.png]: https://cn.vuejs.org/images/data.png
[proxy]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
[1044137-20170523122937179-1875859115.png]: /images/20220523/3038e33a583445cf86e8eec2eb6ae3de.png