vue-watch侦听器 - sdk社区

setup()中使用watch，先从 Vue对象中解构赋值得到 watch，然后使用

// 获得watch
const { watch } = Vue

可以使用 watch 来侦听数据的变化，获得它的当前值和原来值

watch 是懒加载（lazy），首次打开页面时，不会执行，当被侦听的元素内容发生改变后才会触发执行

watch 侦听一个字段

// 使用watch
watch(变量名, (当前值, 原来值) => {
  // 内容
})

注意：如果侦听的是 reactive类型数据，第一个参数不能直接写变量形式，可以写成一个函数

eg:

watch(() => obj.属性名, (当前值, 原来值) => {
  // 内容
})

watch 侦听多个字段

watch也可以侦听多个字段，参数值以数组形式传递：

watch([字段1, 字段2], ([字段1当前值, 字段2当前值], [ 字段1原来值, 字段2原来值]) => {
  // 内容
})

以上为侦听两个字段，侦听更多个字段依次类推

例如侦听两个字段- - -title, users：

watch([title, users], ([curTitle, curUsers], [ preTitle, preUsers]) => {
  console.log(curTitle, preTitle, '---', curUsers, preUsers)
})

代码示例1（ref、侦听一个字段）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>watch侦听器</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    setup() {
      const { ref, watch } = Vue
      const title = ref('国王排名')
      watch(title, (curTitle, preTitle) => {
        console.log(curTitle, preTitle)
      })
      return { title }
    },
    template: `
    <div>
      <div>
        片名：<input v-model="title" />
      </div>
      <div>片名： {{title}}</div>
    </div>
    `
  })
  const vm = app.mount('#root')
</script>
</html>

输入内容修改后侦听到改变，输入结果：

代码示例2（reactive、侦听一个字段）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>watch侦听器</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    setup() {
      const { reactive, watch, toRefs } = Vue
      const obj = reactive({title: '教父'})
      watch(() => obj.title, (curTitle, preTitle) => {
        console.log(curTitle, preTitle)
      })
      const { title } = toRefs(obj)
      return { title }
    },
    template: `
    <div>
      <div>
        片名：<input v-model="title" />
      </div>
      <div>片名： {{title}}</div>
    </div>
    `
  })
  const vm = app.mount('#root')
</script>
</html>

输入内容修改后侦听到改变，输入结果：

代码示例3（ref、侦听2个字段）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>watch侦听器</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    setup() {
      const { ref, watch } = Vue
      const title = ref('国王排名')
      const users = ref('波吉')
      watch([title, users], ([curTitle, curUsers], [ preTitle, preUsers]) => {
        console.log(curTitle, preTitle, '---', curUsers, preUsers)
      })
      return { title, users }
    },
    template: `
    <div>
      <div>
        片名：<input v-model="title" />
      </div>
      <div>
        人物：<input v-model="users" />
      </div>
    </div>
    `
  })
  const vm = app.mount('#root')
</script>
</html>

同时侦听两个字段，只要修改了其中的字段就触发watch，记录两个字段的当前、原来值

watch修改为不是懒加载- - -{immediate: true}

watch还可以接受第三个参数，第三个参数中进行配置管理，可以更改原来默认的懒加载模式，添加第三个参数- - -{immediate: true}

watch(要侦听的字段, (当前值, 原来值) => {
  // 回调函数内容
}, {immediate: true})

设置后，首次加载页面也会执行watch，以上示例中修改watch代码如下：

watch([title, users], ([curTitle, curUsers], [ preTitle, preUsers]) => {
  console.log(curTitle, preTitle, '---', curUsers, preUsers)
}, {immediate: true})
return { title, users }

修改后，首次打开页面，控制台也会打印结果,效果如下：

设置一段时间后停止侦听方法

将 watch 赋值给一个变量
在 watch 内部设置一个定时器，
在上面设置的定时器内部执行- - -watch变量名(),执行该方法停止该watch侦听

const testWatch = watch(侦听字段名, (当前值， 原来值) {
  // 回调函数内容
  setTimeout(() => {
    testWatch()
  }, 时长)
})