vue2 $set 方法与 = 号为对象添加新值不起作用得原因

最新推荐文章于 2024-09-11 17:32:01 发布

callBack_____

最新推荐文章于 2024-09-11 17:32:01 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/callBack_____/article/details/125123487

版权

是否有很多小伙伴在在学习vue2得时候会遇到 data里新建了一个对象 obj ，而且需要动态得向obj里添加新的值，然而当你才思泉涌想要直接用 this.obj.[新的属性] = [新的属性值] 的时候你会发现一切都是徒劳，页面并没有变化，那么这究竟是为什么那？

那么接下来小call 就带你深度了解一下vue 双向绑定的原理。

在了解双向绑定的原理与$set 方法之前，我们要先来了解一个方法

Object.defineProperty

相信有很多学习前端的小伙伴在学习js的时候见过或者学习过这个方法。那么他是用来干什么的那？话不多说直接上代码

 let obj = {
            student: '学生'
        }
        Object.defineProperty(obj, 'teacher', {
            writable:true, //当且仅当该属性的 writable 键值为 true 时，属性的值，也就是下面的 value，
                           //才能被赋值运算符改变。
            configurable: true, // 配置项是否可以修改,就是说writable和enumerable是否能够修改
            enumerable: true, // 是否可以枚举,就是说在遍历的时候能不能遍历出来
            value: '老师',
        })
        console.log(obj);

最后控制台输出是这个样子滴

没错这个方法就是为对象添加属性的，但是相信有很多小伙伴又该说了明明直接 this.obj.[新的属性] = [新的属性值] 就能解决的事，那为什么还要用这么麻烦的方法那。而小call想说的是，任何事或物既然存在了，一定有他存在的道理。通过上面的代码你会看见这个方法一共有三个参数

1、要修改的对象

2、要添加的属性

3、对要添加的属性的一些限制，以及添加的属性值

前面两个相信小伙伴看完了一定会知道他是干什么用的，我说一说第三个参数里的writable属性

当他为true时 value属性的值，才能被赋值运算符改变。也就是说是用来限制这个属性可改与不可改的，在深度理解就是这个属性它具备了get和set方法

那么说到这个我们就来聊聊 vue 里data中的属性的创建，有没有想过为什么data中的属性可以用this.属性 = 属性值这个方式来进行修改？哈哈。懵了吧，直接上图

 let vm = new Vue({
            el: '#app',
            data: {
                obj: {
                    name: '我是vue',
                    age: 18,
                }
            },
        })

声明了一个obj 里面有name 和 age 两个属性我们在控制台看看这两个属性有什么特点