前篇对 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. 从龟速乘到 $Miller-Rabin$ 算法（数论算法总结）

    发现自己竟然菜到不太会龟速乘,所以把 \(Miller-Rabin\) 算法所需要用到的算法全学了一遍-- 龟速乘 龟速乘是一种 \(O(\log n)\) 的乘法计算方法. 考虑有时普通乘法取模会爆 ...

  2. Halcon学习教程（二） 测量量测相关（点到线距离，线到线距离，轮廓线距离，一维测量，圆形测量，矩形测量等）

    原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/18740576 本篇讲一些测量用到的算子和实例,想了解更多就得去看看halcon实例里一维测量里 ...

  3. Windows 提权-SeBackupPrivilege 特权

    本文通过 Google 翻译 Sebackupprivilege – Windows Privilege Escalation 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校正及个别注 ...

  4. php 获取post方法payload(json)形式参数的方法

    用默认get方式传递的时候,接收方式没有改变,仍然是$_GET. 但是用post方式传递数据的时候,用$_POST无法接收数据,应为小程序默认post发送的content-type为applicati ...

  5. Cython与CUDA之Add

    技术背景 在前一篇文章中,我们介绍过使用Cython结合CUDA实现了一个Gather算子以及一个BatchGather算子.这里我们继续使用这一套方案,实现一个简单的求和函数,通过CUDA来计算数组 ...

  6. go-ini 中文文档

    简介 地表 最强大.最方便 和 最流行 的 Go 语言 INI 文件操作库 灵活的数据源 不光光可以从文件读取配置,还支持 []byte 类型的纯数据读取和基于 io.ReadCloser 的流式读取 ...

  7. 用于线程同步的Interlocked系列函数主要有哪些

    原子访问 通过Interlocked系列函数是 Windows API 提供的一组原子操作函数,用于在多线程环境中安全地操作共享变量.当我们执行这些Interlocked系列函数的时候 ,函数会对总线 ...

  8. JDK7-时间类、时间格式化类--java进阶day07

    1.Date类:表示时间的类 1.Date常用的构造方法 . 2.Date常用的成员方法 1.getTime:返回从时间原点到对象设定的时间之间的时间 2.setTime:将对象的时间设置为setTi ...

  9. 【Python】导出docx格式Word文档中的文本、图片和附件等

    [Python]导出docx格式Word文档中的文本.图片和附件等 零.需求 为批量批改学生在机房提交的实验报告,我需要对所有的实验文档内容进行处理.需要批量提取Word文档中的图片和附件以便进一步检 ...

  10. Oracle UTL_HTTP

    Oracle 中可以通过包 UTL_HTTP 来获取访问 HTTP 的能力. declare req UTL_HTTP.REQ; resp UTL_HTTP.RESP; val varchar2(32 ...