Vue.set 的副作用

想看下面dome，点击按钮给testObj设置属性，值为true，通过watch监听了属性的变化。

<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.min.js"></script>
</head> 
<body>
<div id="app">
    <p>{{ JSON.stringify(this.testObj) }}</p>
    <button @click="set('a')">设置testObj属性a</button>
    <button @click="set('b')">设置testObj属性b</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      testObj: {},
    },
    watch: {
      'testObj.a'() {
        alert('a')
      },
      'testObj.b'() {
        alert('b')
      },
    },
    methods: {
      set(val) {
        Vue.set(this.testObj, val, true);
      }
    },
  })
</script>
</body>
</html>

点a输出a，点b输出b，现在没有发现任何问题，接着看下面代码，把设置的值有true改为false

<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.min.js"></script>
</head> 
<body>
<div id="app">
    <p>{{ JSON.stringify(this.testObj) }}</p>
    <button @click="set('a')">设置testObj属性a</button>
    <button @click="set('b')">设置testObj属性b</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      testObj: {},
    },
    watch: {
      'testObj.a'() {
        alert('a')
      },
      'testObj.b'() {
        alert('b')
      },
    },
    methods: {
      set(val) {
        Vue.set(this.testObj, val, {});
      }
    },
  })
</script>
</body>
</html>

点a输出a，点b输出了a和b，这是什么情况呀？

因为对象两两比较是始终不相等的，{}==={}这样是不相等的，说以在设置值的时候会触发watch调用
用Vue.set添加对象属性，对象的所有属性都会触发一次响应。
用Vue.set修改对象属性，只有当前修改的属性会触发一次响应。

前端精髓

发布了254 篇原创文章 · 获赞 200 · 访问量 21万+

私信关注

猜你喜欢