watch 和 watchEffect

前篇对 computed 属性如何在 api 中基本使用, 即从 vue 中引入, 然后通过直接传函数或者传对象的方式, 开箱即用, 非常清晰易懂. 本篇继续来对之前的 watch 进行扩展使用啦.

watch

<!DOCTYPE html>
<html lang="en">

<head>
  <title>watch</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    // watch 监听器
    const app = Vue.createApp({
      setup () {
        const { ref, watch } = Vue
        const name = ref('youge')

        // 具备一定的 lazy 惰性加载
        // 参数可以拿到之前值和当前值
        watch(name, (curValue, prevValue) => {
          console.log(curValue, prevValue)
        })

        return { name }
      },
      template: `
      <div>
        <div>
          name: <input v-model="name" />
        </div>
        <div>
          name is: {{name}}
        </div>
      </div>
      `,
    })

    const vm = app.mount('#root')

  </script>
</body>

</html>

当然对于 reactive 的数据也是类似的写法啦, watch 这里要写成箭头函数就行.

setup () {
        const { reactive, toRefs, watch } = Vue
        const nameObj = reactive({ name: 'youge' })

        watch( () => nameObj.name, (curValue, prevValue) => {
          console.log(curValue, prevValue)
        })

        const { name } = toRefs(nameObj)

        return { name }
  }

当然还可以监听多个内容的, 即通过数组参数的形式哦.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>watch</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    // watch 监听器, 可监听多个对象
    const app = Vue.createApp({
      setup () {
        const { reactive, toRefs, watch } = Vue
        const nameObj = reactive({ name: 'youge', age: 18 })

        watch( [() => nameObj.name, 
                () => nameObj.age
              ],
        ([curName, prevName], [curAge, prevAge]) => {
          console.log('在监听', curName, prevName, '----', curAge, prevAge)
        })

        const { name, age } = toRefs(nameObj)

        return { name, age }
      },
      template: `
      <div>
        <div>
          name: <input v-model="name" />
        </div>
        <div>
          name is: {{name}}
        </div>
        <div>
          age: <input v-model="age" />
        </div>
        <div>
          age is: {{name}}
        </div>
      </div>
      `,
    })

    const vm = app.mount('#root')

  </script>
</body>

</html>

梳理一下关于 watch 的特点无非就是:

  • 具备一定的 lazy
  • 参数可以拿到 prev 和 current
  • 可监听多个数据变化, 用一个监听器, 数组传参的方式

watchEffect

它是一个新增的, 和 watch 的不同在于:

  • 立即执行, 没有惰性
  • 无需传递要监听的内容, 会自动感知代码依赖, 只需传递一个回调即可
  • 不能获取之前数据的值
<!DOCTYPE html>
<html lang="en">

<head>
  <title>watchEffect</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    // watch 监听器
    const app = Vue.createApp({
      setup () {
        const { reactive, toRefs, watch } = Vue
        const nameObj = reactive({ name: 'youge', age: 18 })

        watch( [() => nameObj.name, 
                () => nameObj.age
              ],
        ([curName, prevName], [curAge, prevAge]) => {
          console.log('在监听', curName, prevName, '----', curAge, prevAge)
        })

        // 立即执行, 没有惰性
        // 无需传递要监听的内容, 会自动感知代码依赖, 只需传递一个回调即可
        // 不能获取之前数据的值
        watchEffect(() => {
          console.log(nameObj.name)
        })


        const { name, age } = toRefs(nameObj)

        return { name, age }
      },
      template: `
      <div>
        <div>
          name: <input v-model="name" />
        </div>
        <div>
          name is: {{name}}
        </div>
        <div>
          age: <input v-model="age" />
        </div>
        <div>
          age is: {{name}}
        </div>
      </div>
      `,
    })

    const vm = app.mount('#root')

  </script>
</body>

</html>

耐心和恒心, 总会获得回报的.