Vue--响应式

╰半夏微凉° 2022-12-23 03:53 271阅读 0赞

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

# **其他网址** #

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

# **简介** #

> 见：[深入响应式原理 - 《Vue.js v2.x 官方教程》 - 书栈网 · BookStack][- _Vue.js v2.x _ - _ _ BookStack]

# **实例：无法检测属性添加** #

> 需求：点击按钮可以控制一个内容在显示与隐藏之间切换。实例如下：（另一文件目录树折叠实例见：[Vue--常用操作\_feiying0canglang的博客-CSDN博客][Vue--_feiying0canglang_-CSDN]）

## 复现 ##

> **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
>         }
>       ]
>     })

**测试**

> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201122183704493.png][]
> 
> 点击按钮测试：发现点击后下边内容没有隐藏。

## **方案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][http_localhost_8080_compA]
> 
> ![20201122183704493.png][]
> 
> 点击按钮测试：发现点击后下边内容隐藏，再次点击会显示。
> 
> ![20201122184034936.png][]
> 
> ![20201122184046435.png][]

## 方案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>

**再次测试**

[Vue--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109952511
[vue_ --- _ - Wayne-Zhu -]: https://www.cnblogs.com/zhuzhenwei918/p/6893496.html
[- _Vue.js v2.x _ - _ _ BookStack]: https://www.bookstack.cn/read/vue-v2.x/2b2df5f9a0b848af.md
[Vue--_feiying0canglang_-CSDN]: https://blog.csdn.net/feiying0canglang/article/details/109830477
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[20201122183704493.png]: /images/20221120/d672529eaae248cba10e4b40276e23e5.png
[20201122184034936.png]: https://img-blog.csdnimg.cn/20201122184034936.png
[20201122184046435.png]: https://img-blog.csdnimg.cn/20201122184046435.png