Vue3 监听、计算属性

一、监听、计算属性
1、watch

watch (
   source,// 必传，要监听的数据
   callback // 必传，侦听到变化后要执行的回调函数
   // options //可选，一些侦听函数
)

2、computed 两种创建方式：接受一个 getter 函数，返回一个只读的响应式 ref 对象，接受带有 get 和 set 函数的对象来创建一个可写的 ref 对象
3、watchEffect 是 Vue3 新出的一个侦听函数，可以简化 watch 的行为

<template>
  <div>
    <p><input type="number" v-model="count"></p>
    <p><input type="number" v-model="plusOne"></p>
  </div>
</template>

<script setup>
import {ref, computed, watchEffect, watch} from 'vue';
const count = ref(0);

//创建一个只读的计算属性 ref;
// const plusOne = computed (() => count.value + 1)
// 创建一个可写的计算属性 ref
const plusOne = computed({
   get: () => count.value + 1,
   set: (val) => {
      count.value = val - 1
   }
  })
  //定义监听，使用同上 //...some code else
  watchEffect(() => console.log(count.value, "watchEffect"));
  watch((count, (val, oldval)) => {
       console.log(val, oldval, "watch")
  }, {immediate: true})
  </script>
  
  <style scoped>
div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

input {
  margin: 10px;
}
</style>

watchEffect和watch区别
1、watch 是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载 watchEffect 都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）
2、watch 需要传递监听的对象， watchEffect不需要
3、watch 只能监听响应式数据： ref 定义的属性和 reactive 定义的对象，如果直接监听 reactive 定义对象中的属性是不允许的，除非使用函数转换一下
4、watchEffect 如果监听reactive 定义的对象是不起作用的，只能监听对象中的属性。