「Vue面试题」动态给vue的data添加一个新的属性时会发生什么？怎样去解决的？_vue给标签元素添加data-属性(1)

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

    addProperty(){
        this.items.newProperty = "新属性"  // 为items添加新属性
        console.log(this.items)  // 输出带有newProperty的items
    }
}

})

点击按钮，发现结果不及预期，数据虽然更新了（`console`打印出了新属性），但页面并没有更新


### 二、原理分析


为什么产生上面的情况呢？


下面来分析一下


`vue2`是用过`Object.defineProperty`实现数据响应式

const obj = {}
Object.defineProperty(obj, ‘foo’, {
get() {
console.log(get foo:${val});
return val
},
set(newVal) {
if (newVal !== val) {
console.log(set foo:${newVal});
val = newVal
}
}
})
}

当我们访问`foo`属性或者设置`foo`值的时候都能够触发`setter`与`getter`

obj.foo
obj.foo = ‘new’

但是我们为`obj`添加新属性的时候，却无法触发事件属性的拦截

obj.bar = ‘新属性’

原因是一开始`obj`的`foo`属性被设成了响应式数据，而`bar`是后面新增的属性，并没有通过`Object.defineProperty`设置成响应式数据


### 三、解决方案


`Vue` 不允许在已经创建的实例上动态添加新的响应式属性


若想实现数据与视图同步更新，可采取下面三种解决方案：


* Vue.set()
* Object.assign()
* $forcecUpdated()


#### Vue.set()


Vue.set( target, propertyName/index, value )


参数


* `{Object | Array} target`
* `{string | number} propertyName/index`
* `{any} value`


返回值：设置的值


通过`Vue.set`向响应式对象中添加一个`property`，并确保这个新 `property` 同样是响应式的，且触发视图更新


关于`Vue.set`源码（省略了很多与本节不相关的代码）


源码位置：`src\core\observer\index.js`

function set (target: Array | Object, key: any, val: any): any {
…
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
}

这里无非再次调用`defineReactive`方法，实现新增属性的响应式


关于`defineReactive`方法，内部还是通过`Object.defineProperty`实现属性拦截


大致代码如下：

function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(get ${key}:${val});
return val
},
set(newVal) {
if (newVal !== val) {
console.log(set ${key}:${newVal});
val = newVal
}
}
})
}

### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>![](https://img-blog.csdnimg.cn/img_convert/1fe42b98549edb79ae960513bc881fd2.webp?x-oss-process=image/format,png)

   })
}

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-h79cEJjI-1715216937452)]