需求：点击按钮，向一个对象新增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>