前篇对 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>

vue3 基础-API-watch 和 watchEffect的更多相关文章

  1. vue3组合式API介绍

    为什么要使用Composition API? 根据官方的说法,vue3.0的变化包括性能上的改进.更小的 bundle 体积.对 TypeScript 更好的支持.用于处理大规模用例的全新 API,全 ...

  2. Linux高性能server编程——Linux网络基础API及应用

     Linux网络编程基础API 具体介绍了socket地址意义极其API,在介绍数据读写API部分引入一个有关带外数据发送和接收的程序,最后还介绍了其它一些辅助API. socket地址API 主 ...

  3. 服务器编程入门（4）Linux网络编程基础API

      问题聚焦:     这节介绍的不仅是网络编程的几个API     更重要的是,探讨了Linux网络编程基础API与内核中TCP/IP协议族之间的关系.     这节主要介绍三个方面的内容:套接字( ...

  4. Linux 高性能服务器编程——Linux网络编程基础API

    问题聚焦:     这节介绍的不仅是网络编程的几个API     更重要的是,探讨了Linux网络编程基础API与内核中TCP/IP协议族之间的关系.     这节主要介绍三个方面的内容:套接字(so ...

  5. Android BLE与终端通信（一）——Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址

    Android BLE与终端通信(一)--Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址 Hello,工作需要,也必须开始向BLE方向学习了,公司的核心技术就是BLE终端 ...

  6. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. mongoose 基础api 图表整理

    一.背景 今天看 mongoose 的基础 API,参考了下面的链接做了图表以供查阅. 参考资料: http://www.cnblogs.com/xiaohuochai/p/7215067.html ...

  8. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

  9. 【原创】React实例入门教程(1)基础API,JSX语法--hello world

    前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...

  10. Masonry基础API

    Masonry基础API mas_makeConstraints()    添加约束 mas_remakeConstraints()  移除之前的约束,重新添加新的约束 mas_updateConst ...

随机推荐

  1. Typecho 数据备份及程序升级详细步骤教程

    数据库备份看自己,习惯性更新前都备份,出错直接滚回去 数据库备份 直接在宝塔数据库那个模块备份即可,备份完建议下载本地或者保存到OSS 备份网站文件 理论上只需要备份/usr/目录即可,因为这个目录包 ...

  2. CentOS7脚本检测SpringBoot项目JAR包变化后自动重启

    #!/bin/bash # 文件目录 fileDir=/usr/local/project/back logDir=/usr/local/project/logs # 设置需要检测的文件路径 file ...

  3. CMD批处理脚本+VBScript脚本+Potplayer 实现文件夹内所有视频的截图任务（指定时间点）

    实现自动化视频截图,一般会直接借视频编解码如FFmpeg,动用相关函数来实现,直接从解码源头设计程序.然而我没有接触过FFmpeg,借助cmd批处理,以及vbs,还有现成的播放器potplayer,一 ...

  4. 记vue修改数组属性，dom不发生变化的问题

    目录: 目录 目录: 开篇 正确的姿势 为什么 $set 开篇 今天在写vue的时候,出现了一个以前可能没遇到的问题.我利用一个数组记录列表下按钮的启用.禁用状态,但我点击某个列表项按钮后,会修改当前 ...

  5. laradock 更改 mysql 版本

    # 修改 .env 文件 MYSQL_VERSION=5.7 # 默认为 latest #停止mysql容器 docker-compose stop mysql # 删除旧数据库数据 rm -rf ~ ...

  6. Windows 10 的 "邮件" 设置完成QQ账户，提示您的Qq帐户设置已过期的处置方法

    引起这问题的原因可能是QQ未开启 1.POP3/SMTP服务 2.IMAP/SMTP服务   开启方法: 1.登录QQ邮箱(mail.qq.com) 2.点击"设置"->&q ...

  7. Docker镜像介绍

    一.Docker镜像介绍 镜像是Docker的三大核心概念之一. Docker运行容器前需要本地存在对应的镜像,如果镜像不存在本地,Docker会尝试先从默认的镜像仓库下载(默认使用Docker Hu ...

  8. docx4j转换pdf样式问题~Java Libreoffice转换pdf

    背景 本篇文章主要是介绍我在使用docx4j过程中遇到的问题,并最终如何通过Libreoffice来实现pdf的转换. 问题 在使用docx4j转换pdf过程中发现word文档中表格.加粗样式无法实现 ...

  9. 推荐8款 .NET 开源、免费、实用的 Windows 效率软件

    前言 今天大姚给大家推荐8款基于 .NET 开源.免费.实用的 Windows 效率软件,开发工作提升利器,希望可以帮助到有需要的小伙伴. DevToys DevToys是一个专门为开发者设计的Win ...

  10. 【Ubuntu】Ubuntu 24.04 配置镜像源

    [Ubuntu]Ubuntu 24.04 配置镜像源 零.起因 最近在虚拟机中安装了个ubuntu-24.04-desktop-amd64,默认是国外的软件源,很慢,故替换到国内. 壹.替换 源地址( ...