Vue--响应式--解决无法检测属性添加的问题

​

简介

​说明​

        本文介绍如何解决Vue无法检测属性添加的问题。

​官网​

​​深入响应式原理 — Vue.js​​

​需求描述​

需求：点击按钮可以控制一个内容在显示与隐藏之间切换。

复现

​router/index.js​

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/compA',
      name: 'compA',
      component: CompA
    }
  ]
})

​components/CompA.vue​

<template>
  <div class="compA">
    <button @click="toggle(myObj)">点击这里测试</button>
    <p v-if="!myObj.hide">这是测试显示的内容</p>
  </div>
</template>

<script>
import TreeParent from "@/components/TreeParent";
export default {
  components: {TreeParent},
  data() {
    return {
      myObj:{
        name: "Tony",
      }
    }
  },
  methods:{
    toggle(obj) {
      if (obj.hide === undefined) {
        obj.hide = true;
      } else {
        obj.hide = !obj.hide;
      }
    }
  }
}
</script>

<style scoped>
</style>

​测试​

访问：​​http://localhost:8080/#/compA​​

点击按钮测试：发现点击后下边内容没有隐藏。

方案1：Vue.set(object, propertyName, value)

下边两种写法都可以，因为：vm.$set 是全局 Vue.set 方法的别名。

this.$set(this.someObject,'b',2)

Vue.set(vm.someObject, 'b', 2)

​components/CompA.vue​

<template>
  <div class="compA">
    <button @click="toggle(myObj)">点击这里测试</button>
    <p v-if="!myObj.hide">这是测试显示的内容</p>
  </div>
</template>

<script>
import TreeParent from "@/components/TreeParent";
export default {
  components: {TreeParent},
  data() {
    return {
      myObj:{
        name: "Tony",
      }
    }
  },
  methods:{
    toggle(obj) {
      if (obj.hide === undefined) {
        this.$set(obj, 'hide', true);
      } else {
        obj.hide = !obj.hide;
      }
    }
  }
}
</script>

<style scoped>
</style>

也可以这么写

<template>
  <div class="compA">
    <button @click="toggle(myObj)">点击这里测试</button>
    <p v-if="!myObj.hide">这是测试显示的内容</p>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      myObj:{
        name: "Tony",
      }
    }
  },
  methods:{
    toggle(obj) {
      if (obj.hide === undefined) {
        Vue.set(obj, 'hide', true);
      } else {
        obj.hide = !obj.hide;
      }
    }
  }
}
</script>

<style scoped>
</style>

​再次测试​

访问：​​http://localhost:8080/#/compA​​

点击按钮测试：发现点击后下边内容隐藏，再次点击会显示。

方案2：新对象替换老对象

​components/CompA.vue​

<template>
  <div class="compA">
    <button @click="toggle(myObj)">点击这里测试</button>
    <p v-if="!myObj.hide">这是测试显示的内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObj: {
        name: "Tony",
      }
    }
  },
  methods: {
    toggle(obj) {
      if (obj.hide === undefined) {
        this.myObj = Object.assign({}, this.myObj, {name: "Tony", hide: true})
        // 也可以这么写
        // this.myObj = {...this.myObj, hide: true};
      } else {
        obj.hide = !obj.hide;
      }
    }
  }
}
</script>

<style scoped>
</style>

​再次测试​

访问：​​http://localhost:8080/#/compA​​

点击按钮测试：发现点击后下边内容隐藏，再次点击会显示。