面试官：Vue中给对象添加新属性界面不刷新?

- 日理万妓 2022-12-27 09:12 220阅读 0赞

##  ##

## ![format_png][] ##

## 一、直接添加属性的问题 ##

我们从一个例子开始

定义一个`p`标签，通过`v-for`指令进行遍历

然后给`botton`标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行

<p v-for="(value,key) in item" :key="key">
        {
        { value }}
    </p>
    <button @click="addProperty">动态添加新属性</button>

实例化一个`vue`实例，定义`data`属性和`methods`方法

const app = new Vue({
        el:"#app",
        data:()=>{
            item:{
                oldProperty:"旧属性"
            }
        },
        methods:{
            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<any> | 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
                }
            }
        })
    }

### Object.assign() ###

直接使用`Object.assign()`添加到对象的新属性不会触发更新

应创建一个新的对象，合并原对象和混入对象的属性

this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})

### $forceUpdate ###

如果你发现你自己需要在 `Vue`中做一次强制更新，99.9% 的情况，是你在某个地方做错了事

`$forceUpdate`迫使`Vue` 实例重新渲染

PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

### 小结 ###

*  如果为对象添加少量的新属性，可以直接采用`Vue.set()`
 *  如果需要为新对象添加大量的新属性，则通过`Object.assign()`创建新对象
 *  如果你需要进行强制刷新时，可采取`$forceUpdate()` (不建议)

PS：`vue3`是用过`proxy`实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

## 参考文献 ##

*  https://cn.vuejs.org/v2/api/\#Vue-set
 *  https://vue3js.cn/docs/zh

面试官VUE系列总进度：11／33

[面试官：SPA（单页应用）首屏加载速度慢怎么解决？][SPA]

[面试官：Vue中组件和插件有什么区别？][Vue]

[面试官：为什么data属性是一个函数而不是一个对象？][data]

篇副有限，扫下方二维码查看往期

![format_png 1][]

[format_png]: /images/20221120/a5b73b18cfd04d7f8013596881432803.png
[SPA]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c122cb674834677de9dea791c9f956ad8c5121b007586c25fb11bc07910f47a6ffb99176&idx=1&mid=2247484276&scene=21&sn=7a980dd7db86f0194b802b815913cff2#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1d2cb6748c4a2d60835488346cf74848078a9b488e4e84d1be0dcfc1ccce3a4bc958209&idx=1&mid=2247484292&scene=21&sn=76ff2903942ce748b58e9339997b7969#wechat_redirect
[data]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1c1cb6748d71afec432e36448c4e1febe37c4f9f43e566ebb613ea680ab2a7e863f7880&idx=1&mid=2247484311&scene=21&sn=970d4a092c5dc09c5d427ce2efad8bea#wechat_redirect
[format_png 1]: /images/20221120/e91ad7628f574d958c3deba043068d26.png