vue 数据没有驱动视图？

时间：2019-05-21 20:49:54 阅读：146 评论：0 收藏：0 [点我收藏+]

Part.1 问题

数据改变，视图却没有根据数据而改变。

原因在于，数据并不在 vue 监听范围之内，vue 只对事先在 data 中声明的变量丶对象等类型数据进行监听

Part.2 例子

<template>
  <div class="home">
    <button @click="obj.age++">+年龄</button>
    <h1>{{obj.name}}</h1>
    <h1>{{obj.age}}岁</h1>
  </div>
</template>

<script>
export default {
  name: "home",
    data() {
      return {
          obj: {
              name: ‘小明‘
          }
      }
    },
    mounted() {
        this.obj.age = 20;
    }
};
</script>

我们为 data 中声明的对象 obj 添加一个新属性 age = 20

效果：

技术分享图片

我们发现视图并没有发生改变，我们从控制台打印看出

技术分享图片

get & set 中并不包含 age 属性，所以不在 vue 的监听范围之内自然视图不会发生改变

Part.3 解决

为 age 属性添加 get & set，使 vue 监听 age 属性，关键：$set

我们将

 mounted() {
   this.obj.age = 20;
}

修改为

 mounted() {
   this.$set(this.obj, ‘age‘, 20);
}

效果：

技术分享图片