初学Vue（监听事件）

1.computed与watch

1.computed计算属性

         规则：

        1.使用已有的属性来计算不存在的属性

        2.默认调用一次get

        3.简写形式（函数）没有set方法，如果需要更改值必须使用对象写法，不能使用函数

        4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})

computed:{
    方法名:{
      get(){
        return 返回值
       },
      set(val）{
      //val为接收到的参数
        }
  }
}

2. watch监听属性

        1.监听已有的属性

        2.immediate设置为true默认触发一次，false不会默认触发

        3.handler(新值,旧值)函数，当监听值发生改变时就会触发handler函数

        4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})

        5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true

        6.简写，只有handler函数，才可以简写。写法：监听的属性名(新值,旧值){}

<template>
  <div>
    输入: <input type="text" v-model="text">
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      text: "",
    };
  },
  watch: {
    text: {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`);
        console.log(`旧的值: ${oldVal}`);
        console.log("------------------");
      },
    }
  },
};
</script>

 3.computed与watch

    1.computed能做到的watch都可以，watch能做到的computed不一定能

    2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，