108、Vue2.0 $set()的正确使用方式

2019-11-19 本文已影响0人 world_7735

问题：在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。也就是如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
原因：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
对数组或者对象进行操作时，发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。
这种情况下，Vue 不能检测以下变动的数组
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
比如：使用this.arr[0] 去更新array的内容，视图没有刷新
使用Vue.set(this.arr, 0, !this.arr[0]) 去更新array的内容，视图被刷新
使用 this.arr[0] = !this.arr[0] 和 this.obj.a = !this.obj.a 同时更新，视图被刷新
结论：如果方法里面单纯的更新数组Array的话，要使用Vue.set，如果方法里面同时有数组和对象的更新，直接操作data即可
例子：

<html>

<head>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
   <ul>
     <li v-for="(item,index) in data" :key="index">{{item}}</li>
   </ul>
   <button @click="changeData">按钮</button>
  </div>
</body>

</html>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
       data:['路费','可不','小哀','乔巴']
      };
    },
    methods: {
      changeData() {
        this.data[2]='娜美'
      }
    }
  })
</script>

点击页面没刷新：

改成一下写法：

 methods: {
      changeData() {
        this.$set(this.data,2,'娜美');
        // Vue.set(this.data,2,'娜美');
        // this.data.splice(2,1,'娜美');
      }
    }

结论：
响应系统 ,会把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter，未实例化的属性，修改其值，是不会更新到视图上面的
原理：
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
写法

Vue.set 参数
参数：

{Object | Array} target
{string | number} key
{any} value
返回值：设置的值。

Vue.set()和this.$set()的区别：
1. 实现原理
  Vue.set()源码：

import { set } from '../observer/index'
...
Vue.set = set
...

this.$set()源码

import { set } from '../observer/index'
...
Vue.prototype.$set = set
...

结果我们发现Vue.set()和this. $set()这两个api的实现原理基本一模一样，都是使用了set函数。set函数是从 …/observer/index 文件中导出的，区别在于Vue.set()是将set函数绑定在Vue构造函数上，this.$ set()是将set函数绑定在Vue原型上

108、Vue2.0 $set()的正确使用方式

猜你喜欢

热点阅读