前沿

在项目开发中经常会用到监听，所以就科普并且记录下来。

<template>
<div>
      <p>changeNum: {{changeNum}}</p>
      <p>watchNum: <input type="text" v-model="watchNum"></p>
       还可以这么写
      <input v-model="example1"/>
</div>
</template>
<script>
export default {
  data() {
    return {
    watchNum: '张三',
    otherNum: '丰',
    changeNum: ' ',
    example1：' ',
    };
  },

  watch: {
      //newVal是指更新后的数据
    watchNum: {
      handler(newVal, oldVal) {
        this.changeNum = newVal + " " + this.otherNum;
      },
      // 代表在wacth里声明了watchNum这个方法之后立即先去执行handler方法
      immediate: true,
      deep: true,   //对象内部属性的监听，关键。
      //deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器
    },
},
    example1:"exampleMethods",//值可以为methods的方法名
},
methods:{
   exampleMethods(newVal,oldVal){
　   conosle.log(newVal,oldVal)
　}
   }
 };
 </script>

说变了，就是监听到数据变化然后做某些操作。