vue3 watch 和 watchEffect 的使用和差异性<meta name="viewport" conten

<!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>