对于Vue中data数据改变-页面重新渲染问题

看代码吧…
…代码一：

<div id="app">
    {{msg}}
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                msg:'hello',
            }
        },
    })
  setInterval(()=>{
	let random =Math.round( Math.random()*10);
	//基本数据类型
	vm.msg +=random;
	console.log(vm.msg)
  },2000);
</script>   

情况1 基本数据类型：代码中，对于基本数据类型 msg 来说，vue会自动检测数据并更新页面

…代码二：

<div id="app">
    {{arr}}
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                arr:[1,2,3,4],
            }
        },
    })
  setInterval(()=>{
	let random =Math.round( Math.random()*10);
	//引用数据类型
	vm.arr[vm.arr.length]=random;
	console.log(vm.arr)
  },2000);
</script> 

情况2 对于引用数据类型就不行了，数据无法引起vue进行页面的更新

对于数组改变数据更新页面解决方案：

setInterval(()=>{
	// 解决方法1   将数组中的数据剥离出来 ...vm.arr -》 1，2，3，4
	vm.arr = [...vm.arr,random];
	// 解决方法2
	//vm.arr.push(random);
},2000);

解决方案3：Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新
push()、pop()、shift()、unshift()、splice()、sort()、reverse()



…代码三：

<div id="app">
    <button v-on:click="add">新增</button>
    {{obj}}
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return {
                obj:{
                       name:'xx',
                       age:22
                }
            }
        },
        methods:{
			add(){
				
               his.obj.gender = 'female'; //无法实现新增属性
			}
		}
    })
</script> 

情况三 通过this直接访问到data中的数据，无法实现新增属性

对于对象改变数据更新页面解决方案：

add(){
    // 方案1：  this.$set(name,value)
    // this.$set(this.obj,'gender','female')
    
   // 方案2：
   //let address = {
   //    province:'安徽省',
   //    city:'合肥市'
   //}
   //this.obj = Object.assign({},this.obj,address);

    // 方案3：
    // 只是用使用Object.assign()无法引起页面的更新  需要进行强制vue刷新---不推荐使用
    //Object.assign(this.obj,address);
    // this.$forceUpdate();  //强制Vue刷新
    
    // 方案4  使用lodash
    this.obj = _.clone(this.obj);
    console.log(this.obj)
}