vue-watchEffect侦听器-前端黑洞网

本站消息

站长简介/公众号

站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家，探索程序员的人生之路！分享IT最新技术，关注行业最新动向，让你永不落伍。了解同行们的工资，生活工作中的酸甜苦辣，谋求程序员的最终出路!

价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

出租广告位,需要合作请联系站长

爱出汗

1305

文章

664924

访问

+关注

分类

暂无分类

日期归档

2021-03(347)

2021-04(168)

2021-05(167)

2021-06(111)

2021-07(6)

vue-watchEffect侦听器

发布于2021-12-05 19:25 阅读(899) 评论(0) 点赞(30) 收藏(4)

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)
})