vue之对象无法实现响应式解决办法：vue的 set方法 和添加多个属性方法 深入响应式

<div id="app">
			<div>
				<h3>{{person.name}}</h3>
				<button type="button" @click="handleAdd">添加年龄</button>
			</div>
		</div>

		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			const app = new Vue({
				el:'#app',
				data:{
					person:{}
				},
				methods:{
					handleAdd(){
						this.person.name = 'ljx'
						//通过直接添加方法无法添加
					}
				}
			})
		</script>

解决办法

const app = new Vue({
				el:'#app',
				data:{
					person:{}
				},
				methods:{
					handleAdd(){
						
						// console.log(Vue.set); \
						//Vue.set(object,key,value)
						//this.$set(object,key,value)
						this.$set(this.person,'name','ljx')
						此处注意：可通过实例使用				this.$set(object,key,value)
									也可使用调用Vue  ：		Vue.$set(object,key,value)
					}
				}
			})

添加多个属性方法

this.person = Object.assign({},this.person,{
							age:55,
							height:1.99
						})