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

原文网址：Vue--响应式_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍如何解决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

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

其他网址

vue中遇到的坑 --- 变化检测问题（数组相关） - Wayne-Zhu - 博客园