常用属性

watchEffect

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。 即使组件卸载了，但是监听器依然存在，这个时候其实式需要我们手动关闭它的，否则容易造成内存泄漏。

<template>
    <h1>{{count }}</h1>
    <div>
        <button type="button" @click="countAdd">点击+1</button>
    </div>
</template>
<script setup>
import {ref, watchEffect} from "vue";
const count = ref(0)
const stop  = watchEffect(() => {
    console.log("新的值:", count.value)

})
const countAdd = (() =>{
    count.value++ 
})

// 当不再需要此侦听器时:
 setTimeout(() => {
    stop()
}, 1000);

</script>

watch

watch 监听器监听了 message 变量，当它发生变化时，就会触发 watch 监听函数中的回调函数， 并且回调函数默认接收两个参数：新值和旧值。 注意：当我们第一进入页面时，watch 监听函数的回调函数是不会执行的。

<template>
  <p>{{ message }}</p>
  <p>{{ x1 + x2 }}</p>
  <button @click="changeMsg">更改 message</button>
  <h1>深度监听</h1>
  <h3>数量：{{ number.count }}</h3>
  <button @click="countAdd">点击+1</button>
</template>
<script setup>
import { ref, watch, reactive } from "vue";
const message = ref("初始化的值");
const x1 = ref(12);
const x2 = ref(13);
watch(
  () => x1.value + x2.value,
  (newValue, oldValue) => {
    console.log("新的值:", newValue);
    console.log("旧的值:", oldValue);
  }
);
const changeMsg = () => {
  message.value = "张三";
  x1.value = 14;
  x2.value = 23;
};

// 深度监听
const number = reactive({ count: 0 });
const countAdd = () => {
  number.count++;
};
watch(
  () => number,
  (newValue, oldValue) => {
    console.log("新的值:", newValue);
    console.log("旧的值:", oldValue);
  },
  { deep: true }
);

</script>

watch 与 watchEffect 区别

1、watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。
2、watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。
3、watch 在响应数据初始化时是不会执行回调函数的，watchEffect 在响应数据初始化时就会立即执行回调函数。

computed

接收一个回调函数，返回一个通过其他属性经过计算的新值，返回一个只读的响应式 ref 对象。

<template>
  <p>{{ count }}</p>
  <h3>数量：{{ plusOne }}</h3>
  <button @click="countAdd">点击+1</button>
</template>
<script setup>
import { ref, computed } from "vue";
const count = ref(1);
const plusOne =  computed(() => {
     return count.value  * 2    // 注意 ref 包装过的值在value中
  })

const countAdd = () => {
    count.value++;
};
</script>