学习vue3系列watch
watch 函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是懒执行的,也就是说仅在侦听的源变更时才执行回调。
<template><button @click="change">count is: {{ state.count }}</button>
</template><script>
import { reactive, watch } from 'vue'
export default {setup () {let state = reactive({count: 0})let change = () => state.count++;watch(state, () => {console.log(state, '改变')})return { state, change }}
}
</script>
注意上面的代码,第一个参数传入的 state 对象,第二个参数是回调函数,只要 state 中任意的属性发生改变都会执行回调函数,和 vue2 的区别是不要写 deep 属性,默认就是深度监听了。
现在是监听整个对象,当然我们也可以监听对象上的某个属性,注意下面代码的写法:第一个是回调函数,第二个参数也是回调函数。
<template><button @click="change">count is: {{ state.count }}</button>
</template><script>
import { reactive, watch } from 'vue'
export default {setup () {let state = reactive({count: 0})let change = () => state.count++;watch(() => state.count, (oldVlaue, newValue) => {console.log(oldVlaue, newValue, '改变')})return { state, change }}
}
</script>
其实与 watch 类似的 API 还有一个就是:watchEffect,立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。
<template><button @click="change">count is: {{ state.count }}</button>
</template><script>
import { reactive, watchEffect } from 'vue'
export default {setup () {let state = reactive({count: 0})let change = () => state.count++;watchEffect(() => {console.log(state.count, '改变')})return { state, change }}
}
</script>
注意它与watch的区别:
1、watch 是需要传入侦听的数据源,而 watchEffect 是自动收集数据源作为依赖。
2、watch 可以访问侦听状态变化前后的值,而 watchEffect 没有。
3、watch 是属性改变的时候执行,而 watchEffect 是默认会执行一次,然后属性改变也会执行。
学习vue3系列watch相关推荐
- 学习vue3系列computed
响应式API中 computed 和之前的 computed 选项用法类似. 对于任何复杂逻辑,我们都可能使用计算属性.比如翻转字符串: <template><h1>{{ te ...
- 学习vue3系列reactive
vue3响应式API有ref和reactive,今天主要讲解reactive函数. <template><h1>{{ msg }}</h1><button @ ...
- 学习vue3系列ref
基于vite初始化项目 npm init vite-app <project-name> cd <project-name> npm install npm run dev 项 ...
- 学习Vue3.0,先来了解一下Proxy
产品经理身旁过,需求变更逃不过. 测试姐姐眯眼笑,今晚bug必然多. 据悉Vue3.0的正式版将要在本月(8月)发布,从发布到正式投入到正式项目中,还需要一定的过渡期,但我们不能一直等到Vue3正式投 ...
- 学习Vue3.0,先从搭建环境开始
Bug源测试,上线来几个.愿君多修改,今夜眼难合. 这是小编关于Vue3.0系列文章的第二篇,本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境,通过本文的学习,你将学习到以下内容 ...
- SQL Server 2008/2012中SQL应用系列及BI学习笔记系列--目录索引
SQL Server 2008中的一些特性总结及BI学习笔记系列,欢迎与邀月交流. 3w@live.cn ◆0.SQL应用系列 1.SQL Server 2008中SQL增强之一:Values新用途 ...
- BP算法双向传_链式求导最缠绵(深度学习入门系列之八)
摘要: 说到BP(Back Propagation)算法,人们通常强调的是反向传播,其实它是一个双向算法:正向传播输入信号,反向传播误差信息.接下来,你将看到的,可能是史上最为通俗易懂的BP图文讲解, ...
- BizTalk学习笔记系列之二:实例说明如何使用BizTalk
BizTalk学习笔记系列之二:实例说明如何使用BizTalk --.BizTalk学习笔记系列之二<?XML:NAMESPACE PREFIX = O /> Aaron.Gao,2006 ...
- 从0开始学习GitHub系列之「Git 速成」
从0开始学习GitHub系列之「Git 速成」 糖果果| 2016-06-24 10:55 浏览量(32) 评论(0) 推荐(0) 数据 小编注:[从0开始学习 GitHub]是一个系 ...
最新文章
- 理解“动心忍性”的含义
- STL删除元素注意事项
- [国家集训队] 特技飞行
- pychar创建一个flask项目
- python进阶04IO的同步异步,阻塞非阻塞
- github访问慢解决办法
- docker 删除包含关键字的镜像_Docker 架构及工作原理
- 理论到实践带你了解情感分析、信息抽取、搜索推荐等NLP相关任务
- CSDN 如何删除自己不用的分类(亲测有效!)
- C++ 引用计数技术及智能指针的简单实现
- 基于Java+SpringMvc+vue+element实现博物馆平台系统
- C++ Primer 5th 源代码使用说明
- 计算机网络 | IPv6 | 什么是IPv6
- 通信算法之六十:SC_FDE系统的物理层算法设计与工程实现
- babel—ES6代码转换为ES5代码
- 学Android必须懂的
- SQL Server高级子查询
- 世界十大著名海盗:有一个是中国美女
- 11. 一篇技术博客,如何获得更多的收藏呢?本篇博客告诉你
- MYSQL数据库的主从切换
热门文章
- 苹果自研 M1 芯片性能强大,却不支持 Docker ?
- 用Blink打造你的技术朋友圈
- 全网首次公开!iOS14 到来前,开发者必需的时间表及 To do list
- 企业打造自己的数据中台,需要的是一套硅谷方法论(文末有福利!)
- 2020 及以后的八大最显著技术趋势!
- 风起云涌、战火通明,2019 年云计算大盘点
- 百度近五年最年轻高管团队出炉,能否“翻盘”成功?
- 直接拿来用!Visual Studio 扩展工具利用 AI 强化你的代码
- @程序员,计算机重启包治百“病”?
- 甲骨文中国确认裁员 900 余人;网易回应邮箱账号遭公开叫卖;我国网民达 8.29 亿 | 极客头条...