vue-watchEffect侦听器

最新推荐文章于 2024-05-19 21:10:57 发布

零OO

最新推荐文章于 2024-05-19 21:10:57 发布

阅读量656

点赞数

分类专栏：前端文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_39111074/article/details/121669664

版权

前端专栏收录该内容

220 篇文章 8 订阅

订阅专栏

watchEffect用法和特点

① watchEffect 首次打开页面就会执行（不是懒加载）

② watchEffect 只要传入一个回调函数即可，不需要传入要侦听的字段名称，当前值和原来值这些参数，
它的内部会自动识别侦听的内容，如果回调函数内写的东西和外部的属性等没有关联，那么首次打开页面执行后，后面不会再执行
回调函数内写了什么关联的属性，就会侦听改属性，没有写的，不会侦听

③ watchEffect 只能得到当前值，不能获得原来值

watchEffect(() => {
  // 回调函数内容
})

代码示例：

<!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>watchEffect侦听器</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    setup() {
      const { ref, watchEffect } = Vue
      const title = ref('国王排名')
      const person = ref('波吉')
      watchEffect(() => {
        console.log(123)
        // console.log(title.value)
        // console.log(person.value)
      })
      return { title, person }
    },
    template: `
    <div>
      <div>
        片名：<input v-model="title" />
      </div>
      <div>
        人物：<input v-model="person" />
      </div>
    </div>
    `
  })
  const vm = app.mount('#root')
</script>
</html>

首次打开页面：

修改页面数据后，不会再执行 watchEffect，不重新打印 123，因为改内容和外面写的内容没有关联性

修改为：

watchEffect(() => {
  console.log(title.value)
})

修改片名会侦听改变，修改人物不会：

改为：

watchEffect(() => {
  console.log(title.value)
  console.log(person.value)
})

这样后两个字段变化都会侦听：

结束监听设置方法- - -调用：侦听器名称()

将定义的 watchEffect 赋值给一个常量，要结束的时候调用- - -该侦听器名()
eg:

const stop = watchEffect(() => {
  console.log(title.value)
  console.log(person.value)
  setTimeout(() => {
    // 6秒后执行 stop(),停止名称为‘stop’的监听器
    stop()
  }, 6000)
})

6s前会侦听，6秒后定时器执行- - -停止侦听的方法，不会再侦听

零OO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-watchEffect侦听器

watchEffect用法和特点① watchEffect 首次打开页面就会执行（不是懒加载）② watchEffect 只要传入一个回调函数即可，不需要传入要侦听的字段名称，当前值和原来值这些参数，它的内部会自动识别侦听的内容，如果回调函数内写的东西和外部的属性等没有关联，那么首次打开页面执行后，后面不会再执行回调函数内写了什么关联的属性，就会侦听改属性，没有写的，不会侦听③ watchEffect 只能得到当前值，不能获得原来值watchEffect(() => { // 回调函
复制链接

扫一扫

专栏目录