侦听器/监听器 watch：监听数据变化

一、准备数据和样式

<template>
  <div>
    {{ name }}
    <br>
    {{obj.age}}
    <br>
    {{arr}}
    <button @click="fn">点击</button>
  </div>
</template>

  data() {
    return {
      name: "zs",
      obj:{
        age:18,
        gender:'女'
      },
      arr:[1,2,4]
    }
  },

二、设置监听事件

1、监听简单事件

name(newVal){
  console.log('监听到了' + newVal);
},

2、监听复杂事件

方法一：深度监听

obj:{
  deep:true,//深度监听
  immediate:true,//立即监听
  handler(newVal){
    console.log('监听到了' +newVal.age);
  }
},

方法二：直接监听对象里的属性

'obj.age'(newVal){
  console.log('监听到了' +newVal);
},

3、监听数组

方法一：深度监听

    arr:{
      deep:true,
      handler(newVal){
        console.log('监听到了' +newVal);
      }
    }

方法二：直接监听对象里的属性

    'arr.push(9)'(newVal){
      console.log('监听到了' +newVal);
    },

 

三、设置点击方法改变内容

  methods: {
    fn() {
      this.name = "ls";
      this.obj.age=80
      this.arr.push(9)//数组监听方法不能用
    },
  },