vue給對象新增屬性，頁面不更新解決方法——四種方案

需求：點擊按鈕，向一個對象新增name屬性，希望頁面也能顯示出來新增的name

代碼：

<div id="app">
    {{obj}}
    <div @click="add">新增name屬性</div>
</div>	
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                obj:{
                    id:1
                }
            }
        },
        methods:{
	    add(){
	        this.obj.name = 'xpf'
		console.log(this.obj)
	    }
	},
    })
</script>

頁面效果：

原因：

可以看到頁面中並沒有自動更新新增的name屬性，但是，在控制檯可以打印出來

當vue的data裏邊聲明或者已經賦值過的對象或者數組（數組裏邊的值是對象）時，向對象中添加新的屬性，如果更新此屬性的值，是不會更新視圖的。

---

方法一：使用Vue.set( target , key , value)

• target: 要更改的數據源（可以是一個對象或者數組）
• key 要更改的具體數據 （索引）
• value 重新賦的值

代碼：

<div id="app">
    {{obj}}
    <div @click="add">新增name屬性</div>
</div>	
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                obj:{
                    id:1
                }
            }
        },
        methods:{
	    add(){
	        this.$set(this.obj,'name','xpf')
		console.log(this.obj)
	    }
	},
    })
</script>

頁面效果：

方法二：使用Object.assign()

MDN：Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。

代碼：

<div id="app">
    {{obj}}
    <div @click="add">新增name屬性</div>
</div>	
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                obj:{
                    id:1
                }
            }
        },
        methods:{
	    add(){
	        this.obj = Object.assign({}, this.obj, {name:'xpf'})
		console.log(this.obj)
	    }
	},
    })
</script>

頁面效果：

方法三：使用lodash的clone方法

代碼：

<div id="app">
    {{obj}}
    <div @click="add">新增name屬性</div>
</div>	
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                obj:{
                    id:1
                }
            }
        },
        methods:{
	    add(){
	        this.obj.name = 'xpf'
		this.obj = _.clone(this.obj)
		console.log(this.obj)
	    }
	},
    })
</script>

頁面效果：

方法四：使用$fourceUpdate

迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。

<div id="app">
    {{obj}}
    <div @click="add">新增name屬性</div>
</div>	
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                obj:{
                    id:1
                }
            }
        },
        methods:{
	    add(){
	        this.obj.name = 'xpf'
		this.$forceUpdate()
		console.log(this.obj)
	    }
	},
    })
</script>