• computed 是vue独有的特性计算属性,可以对data中的值再进行一个重新的计算,computed是支持缓存的,只有依赖数据发生改变，才会重新进行计算

• watch 我感觉就是监听data里面的所有属性的新旧值的变化吧

一、计算属性

1. vue2计算属性

• 变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号
• 如果是在methods里面声明的话,在调用的时候需要加上小括号例如：fullName()

<div id="home">
  <input type="text" v-model="firstName" /><br />  //我是
  <input type="text" v-model="lastName" /><br />   //计算属性
  <input type="text" v-model="fullName" /><br />   //我是计算属性
</div>

 data() {
    return {
      firstName: "我是",
      lastName: "计算属性",
    };
  },
  computed: {
    fullName() {
      return this.firstName + "" + this.lastName;
   },
 },

2. vue3 计算属性

• 首先需要引入,才可以进行使用
• 和methods 最大的区别就是缓存和不可缓存

 <p>{{count}}</p>

 <p>{{double}}</p>

 <button @click="changeData">+</button>

import { computed } from "vue"

 setup(){
     const count = ref(100);
     const double = computed(()=>{
      return count.value* 2;
    })
    const add = ()=>{
      count.value ++;
    }
    return {
      count,
      double,
      add
    }
  }

一、侦听器(watch)

1. vue2侦听器

• watch是一个对象所以用的时候要使用watch:
• 有三种使用的方式
• 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
• 第二个是deep：其值是true或false；确认是否深度监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以监听到。）
• 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

普通方式

<div>
     <p>FullName: {{fullName}}</p>
     <p>FirstName: <input type="text" v-model="firstName"></p>
</div>

data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
　　 //普通的watch监听
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
// 现在我们对于firstName监听了。在进行input框输入的时候,就会触发到watch，改变data中的fullName

使用handler&immediate

• 在上面这个方法中第一次绑定watch是不会执行的,可以使用这两个属性进行在第一次绑定的时候就会执行了

firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
 }

deep进行深度监听

• watch 监听的时候会返回一个obj新的obj对象和改变前的obj对象

  <p>obj.a: {{ obj.a }}</p>
  <p>obj.a: <input type="text" v-model="obj.a" /></p>

data() {
    return {
      obj: {
        a: 123,
      },
    };
  },
  watch: {
    obj: {
      handler(newName, oldName) {
        console.log(newName, oldName);
      },
      immediate: true,
      deep: true,
    },
  },

2. vue3侦听器

• watch(指定监听数据) 如果监听reactive属性,必须使用函数来指定,监听多个数据的话，需要卸载数组里面
• watchEffect(不指定监听数据) 默认初始化执行一次
• watch和watchEffect都是需要引入的

watch

import { watch } from "vue"

• 普通数据类型

 setup() {
    let msg = ref("abc");
    watch(msg, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });
    return {
      msg,
    };
  }, 

• reactive 数据类型,通过函数来指定

setup() {
    let user = reactive({
      firstName: "zhang",
      lastName: "san",
    });
    watch(() => user.firstName,(newVal,oldVal) => {
      console.log(newVal,oldVal);
    })
    return {
      user,
    };
  }

• 监听多个数据需要数组来指定，watch返回的也是一个数组

setup() {
    let user = reactive({
      firstName: "zhang",
      lastName: "san",
    });
    watch(
      [() => user.firstName,() => user.lastName],
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      }
    );
    return {
      user,
    };
  },

• 立即执行 添加immediate 还有深度监听在immediate后面加上deep:true 就可以
  setup() {
  let user = reactive({
  firstName: "zhang",
  lastName: "san",
  });
  let fullName = ref(""); //在声明的时候是一个空,如果初始化不执行他还是一个空
  watch([() => user.firstName, () => user.lastName], (newVal, oldVal) => {
  fullName.value = newVal[0] +' '+ newVal[1]
  },{
  immediate:true,
  //deep:true
  });
  return {
  user,
  fullName
  };
  },

watchEffect 初始化执行一次

• 不用指定监听的普通数据类型或者是复杂数据类型,像下面这个案例就是默认监听了 user.firstName和user.lastName,个人感觉watchEffect比watch好用点吧

import { watchEffect } from "vue"

watchEffect(() => {
    fullName.value = user.firstName+" "+user.lastName
})