Vue 监听属性Watch

介绍

在使用Vue作为前端开发时经常会用到监听属性Watch,下面来看看如何使用的吧

效果

多参数监听

代码

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 39title>
  <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: `
      
Name:
Name is {{name}}
EnglishName:
EnglishName is {{englishName}}
`
, }); const vm = app.mount('#root');
script> html>

核心

watch函数

  • 第一个参数是数组,里面放监听的属性;
  • 第二个参数是一个回调函数,回调函数的参数是多个数组,如果监听两个参数就是两个数组,每个数组存放监听属性的新老值;
  • 第三个参数是标记是否立即生效还是懒加载
watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, preEng]) => {
        console.log('watch', curName, prevName, '---', curEng, preEng);
      }, { immediate: true })

你可能感兴趣的:(Vue,vue.js,javascript,前端)