前篇对 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. SIT、UAT以及PROD环境的区别

    题记部分 一.SIT环境   SIT(System Integration Testing)环境主要用于系统集成测试,旨在验证系统中不通模块之间的集成和交互是否正常工作.这个环境通常用于开发团队内部进 ...

  2. 深度科普 - 大名鼎鼎的bun.js到底是什么? 它能否替代node.js? 是否能成为前端生态的未来?

    什么是bun? 聪明的小伙伴们,你们在接触bun时是否有过这样的疑问呢? bun.js是什么? 它是如何诞生的? 跟node.js的区别是什么? 有什么优势? 目前的发展情况如何了? 他是否是前端的未 ...

  3. 机器学习 | 强化学习（7） | 融合学习与规划（Integrating Learning and Planning）

    7-融合学习与规划(Integrating Learning and Planning) 1.导论 基于模型的强化学习(Model-Based Reinforcement Learning) 在上一个 ...

  4. Vuex：让状态管理不再头疼的“管家”

    如果你正在开发一个 Vue.js 应用程序,但发现自己被各种组件之间的状态共享问题搞得焦头烂额,那么 Vuex 就是你需要的"超级管家".Vuex 是专门为 Vue.js 设计的状 ...

  5. 赶快检查，木马可能已经植入服务器，Redis未授权访问漏洞记录，redis的key值出现backup要谨慎

    问题描述:为图省事,很多时候我们在使用redis的时候会使用默认空密码,这就增加了安全隐患,如果有下属情况,那赶快去检查下redis,木马或许已经植入服务器,应尽快处理: 1.redis绑定在 0.0 ...

  6. 分布式锁—4.Redisson的联锁和红锁

    大纲 1.Redisson联锁MultiLock概述 2.Redisson联锁MultiLock的加锁与释放锁 3.Redisson红锁RedLock的算法原理 4.Redisson红锁RedLock ...

  7. Java的volatile和sychronized底层实现

    1. 概览 从Java代码级别到硬件级别各层都是如何实现的 2. Synchronized 2.1 字节码层面 使用javap -verbose <class文件>可以查看到字节码信息,其 ...

  8. 【Linux】5.9 Shell函数

    Shell 函数 1. 自定义函数 linux shell 可以用户定义函数,然后在shell脚本中可以随便调用. shell中函数的定义格式如下: [ function ] funname [()] ...

  9. 【Docker】常用服务镜像安装

    Docker常用安装 总体步骤 搜索镜像:docker search xxx 拉取镜像:docker pull xxx 查看镜像:docker images 启动镜像:docker run xxx 停 ...

  10. Java的IO模型、Netty原理详解

    1.什么是IO 虽然作为Java开发程序员,很多都听过IO.NIO这些,但是很多人都没深入去了解这些内容. Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的 ...