watch和watchEffect

watch和watchEffect的区别：

---

1、watch监听：

在Vue3中，使用watch来响应数据的变化，watch有三种用法：

例如：

1.1普通监听

const app = Vue.createApp({
   
      setup() {
   
        const {
    ref, watch } = Vue;
        const name = ref("LMS");
        //直接监听 具备一定的惰性 lazy 数据第一次渲染时，监听函数不会执行，只有当值进行再次改变才回执行watch函数
        //参数可以拿到原始知识和当前值
        watch(name, (curName, preName) => {
   
          console.log(curName, preName);
        });
        return {
    name };
      },
      template: `
    <div>
      Name:<input v-model="name"/>
      <div>Name is {
    {name}}</div>
      </div>`,
    });

1.2监听响应式对象

 const app = Vue.createApp({
   
      setup() {
   
        const {
    reactive, watch, toRefs } = Vu