vue3 watch 和 watchEffect 的使用和差异性

红太狼 2023-01-22 12:49 7阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>watch 和 watchEffect 的使用和差异性</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      // watch 侦听器
      // watchEffect 侦听器，偏向于 effect
      const app = Vue.createApp({
        setup() {
          const { reactive, watch, watchEffect, toRefs } = Vue;
          const nameObj = reactive({
            name: 'dell', englishName: 'lee'
          })
          // 具备一定的惰性 lazy
          // 参数可以拿到原始和当前值
          // 可以侦听多个数据的变化，用一个侦听器承载
          watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, preEng]) => {
            console.log('watch', curName, prevName, '---', curEng, preEng);
          }, { immediate: true })
    
          // 立即执行，没有惰性 immediate
          // 不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
          // 不能获取之前数据的值
          // const stop = watchEffect(() => {
          //   console.log(nameObj.name);
          //   console.log(nameObj.englishName);
          //   setTimeout(() => {
          //     stop();
          //   }, 5000)
          // })
    
          const { name, englishName } = toRefs(nameObj);
    
          return { name, englishName }
        },
        template: `
          <div>
            <div>
              Name: <input v-model="name"> 
            </div>
            <div>
              Name is {
       {name}}
            </div>
            <div>
              EnglishName: <input v-model="englishName"> 
            </div>
            <div>
              EnglishName is {
       {englishName}}
            </div>
          </div>
        `,
      });
      
      const vm = app.mount('#root');
    </script>
    </html>