vue3 setup 使用catch监听器

简单使用方法之一：

<script>
  const app = Vue.createApp({
    setup() {
      const { ref, watch } = Vue;
      // 定义 val
      const val = ref("");
      // 使用监听器，用法之一...
      watch(val, (currentValue, prevValue) => {
        console.log(currentValue, prevValue);
      })
      return { val }
    },
    template: `
      <div>
        测试：<input v-model="val"></input>
        Value : {{val}}
        </div>
    `,
  });
  const vm = app.mount('#root');
</script>

View Code

如果你用了 对象，即监听对象里面的某一个 ，那么就用箭头函数的方式即可：

<script>
  const app = Vue.createApp({
    setup() {
      const { reactive, watch, toRefs } = Vue;

      // 定义 valObj
      const valObj = reactive({ val: '' });

      // 监听器，主义这里使用的是箭头函数的方式监听val
      watch(() => valObj.val, (currentValue, prevValue) => {
        console.log(currentValue, prevValue);
      })

      // 取出val
      const { val } = toRefs(valObj);

      return { val }
    },
    template: `
      <div>
        测试：<input v-model="val"/>
        <p>val : {{val}}</p>
        </div>
    `,
  });
  const vm = app.mount('#root');
</script>

View Code

下面这种比较????了，合在一起干：

注意看监听器的代码：

<script>
  const app = Vue.createApp({
    setup() {
      const { reactive, watch, toRefs } = Vue;

      // 定义 valObj
      const valObj = reactive({ val: 'val', val2: 'val2' });

      // 监听器 对象混合  - 注意看
      watch([() => valObj.val, () => valObj.val2], ([newVal, newVal2], [oldVal, oldVal2]) => {
        console.log("val:");
        console.log(newVal, oldVal);
        console.log("val2:");
        console.log(newVal2, oldVal2);
      })

      // 取出val
      const { val, val2 } = toRefs(valObj);

      return { val, val2 }
    },
    template: `
      <div>
        测试val：<input v-model="val"/>
        <p>val : {{val}}</p>
        </div>
        <div>
        测试val2：<input v-model="val2"/>
        <p>val : {{val2}}</p>
        </div>
    `,
  });
  const vm = app.mount('#root');
</script>

View Code

深度监听，想非惰性？

// 下面加了配置 immediate ,所以深度监听了，变非惰性的了。
      watch([() => valObj.val, () => valObj.val2], ([newVal, newVal2], [oldVal, oldVal2]) => {
        console.log("val:");
        console.log(newVal, oldVal);
        console.log("val2:");
        console.log(newVal2, oldVal2);
      }, { immediate: true })

View Code

新玩意：

watchEffect 这玩意没惰性，直接执行的。 immediate

用法差不多，但是看你自己：

这玩意自动检测是否使用或是否以来，制动执行，例：

页面一打开就打印 “我是咸瑜” ：

因为 ”我是咸瑜“这个字符串没什么依赖对吧，所以他只打印一次，因为 immediate

那如果我这样：

<script>
  const app = Vue.createApp({
    setup() {
      const { reactive, watch, watchEffect, toRefs } = Vue;

      // 定义 valObj
      const valObj = reactive({ val: 'val', val2: 'val2' });

      watchEffect(()=>{
        console.log("我有打印val ，所以我将监听val的改变！并打印：",valObj.val);
      })

      // 取出val
      const { val, val2 } = toRefs(valObj);

      return { val, val2 }
    },
    template: `
      <div>
        测试val：<input v-model="val"/>
        <p>val : {{val}}</p>
        </div>
        <div>
        测试val2：<input v-model="val2"/>
        <p>val : {{val2}}</p>
        </div>
    `,
  });
  const vm = app.mount('#root');
</script>

View Code

你尝试改变val，他会一直打印val，就是i自己感知，然后里面的全打印，全执行，简单点说就是：

无论你改变的是 val 还是 val2 ，三条log 都会执行。

缺点就是 这玩意不能获取之前的值。。。。

如果你想让他失效（灭了他）

这样写即可：

 同理，上面那种也是一样的原理，，，自己玩去。。。。

作者：​​咸瑜​​​