Vue监听属性图文实例详解

<template>
<div class="main">
    我:<el-input v-model="name" placeholder="请输入名字"></el-input>
    好友1<el-input v-model="friends.friend_1" placeholder="请输入名字"></el-input>
    好友2<el-input v-model="friends.friend_2" placeholder="请输入名字"></el-input>
</div>
</template>

<script>
export default {
  data(){
    return{
      name:'浪漫主义码农',
      friends:{friend_1:'张三',friend_2:'李四'}
    }
  },
  watch:{
    name:{
      handler(newValue,oldValue){  //newValue 新的值，oldValue变化前的值
        console.log(newValue,oldValue)
        this.friends.friend_1='王五'
      }
    },
    //监视多级结构中某个属性的变化
    'friends.friend_1':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
    'friends.friend_2':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
  }
};
</script>

 watch:{
    //监视多级结构中所有属性的变化
    friends:{
      handler(newValue,oldValue){
        console.log(newValue,oldValue,"aa")
      },
      deep:true, //开启深度监听
    }
  }

  watch:{
    name:{
      handler(newValue,oldValue){  //newValue 新的值，oldValue变化前的值
        console.log(newValue,oldValue)
        this.friends.friend_1='王五'
      },
      immediate:true
    },
  }