前篇对 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. 使用 Visual Paradigm 的业务流程模型和符号 (BPMN) 综合指南

    业务流程模型和符号 (BPMN) 是一种用于建模和记录业务流程的标准化图形符号.它被广泛采用,因为它能够提供一种清晰.通用的语言,所有利益相关者(业务分析师.技术开发人员和管理人员)都能理解.Visu ...

  2. Hive - [08] 数据仓库物理模型设计

    分区 分区是将表的数据按照某个列的值进行划分和存储的一种方式.通过分区,可以将数据按照特定的维度进行组织,提高查询效率和数据管理的灵活性. 一.分区的优势 提高查询性能:通过分区,可以将数据按照特定的 ...

  3. 【MATLAB习题】牛头刨床机构的运动学分析

    1. 数学模型 已知牛头刨床主运动机构各构件的尺寸为: \(l1=125mm,l3=600mm,l4=150mm,l6=275mm,l'6=575mm\),原动件1以匀角速度ω1=1rad/s逆时针转 ...

  4. containerd 配置使用私有镜像仓库 harbor

    前言 ​当要从非安全的镜像仓库中进行 Pull.Push 时,会遇到 x509: certificate signed by unknown authority 错误提示: 这是由于镜像仓库是可能是 ...

  5. Chrome浏览器使用AdGuard去除百度热搜

    前言 百度的热搜会分散注意力,chrome 的 AdGuard 插件可以屏蔽广告,还可以屏蔽百度热搜 设置 > 用户过滤器 > 添加以下代码,即可屏蔽百度热搜 baidu.com##div ...

  6. Linux系统挂载未分配硬盘空间

    先查看未挂载之前的磁盘使用情况 发现磁盘使用率已经达到了96%,迫切需要扩容 查看分区情况fdisk –l 首先确保有可分配的磁盘空间 发现/dev/vda下有400多个G 的空间 所以将/dev/v ...

  7. 生产环境swarm集群规划和管理

    swarm集群角色 swarm集群中有两种角色,manager node和 worker ndoe. manager的功能: 维护集群状态 任务调度 为swarm集群提供HTTP API 可以创建只有 ...

  8. 懂了 OpenLDAP

    轻型目录访问协议(英文: LightweightDirectoryAccessProtocol,缩写: LDAP)是一个开放的,中立的,工业标准的应用协议,通过IP协议提供访问控制和维护分布式信息的目 ...

  9. WebKit Inside: px 与 pt

    前端CSS中的px是物理像素,还是逻辑像素? 它和iOS中的pt是怎样的关系? 下面我们就来看下CSS中的px实现. 假设有如下CSS字号设置: div { font-size: 100px; } 最 ...

  10. dxSpreadSheet的报表demo-关于设计报表模板问题

    学习 dxSpreadSheetReportDesigner过程中发现: dxSpreadSheet通过dxSpreadSheetReportDesigner点击右键出现弹出菜单,自动生成如图的菜单和 ...