Vue3学习之第四节：setup()中使用watch、watchEffect 函数

一、watch 监听

import { ref, watch, reactive } from 'vue'export default {setup(){let str = ref('')let msg = ref('你好！')let person = reactive({name: '王五',age: 100,info: {a: {salary: 20}}})// 情况一：监听ref所定义的一个响应式数据（此时不用监视str.value，因为str.value是个基本数据类型，而str是个RefImpl实力对象）watch(str, (newValue,oldValue) => {console.log(newValue,oldValue,'输出')})// 情况二：监听ref所定义的多个响应式数据watch([str,msg], (newValue,oldValue) => {// 此时 newValue,oldValue 是个数组console.log(newValue,oldValue,'输出')})/*情况三：监听reactive所定义的一个响应式数据的全部属性注意1:此处无法正确获取oldValue(后续是否获取到要看官方更新)注意2:强制开启了深度监视（deep配置无效）*/watch(person, (newValue,oldValue) => {console.log(newValue,oldValue,'person变化了')})// 情况四：监听reactive所定义的一个响应式数据的某个属性watch(() => person.age, (newValue,oldValue) => {console.log(newValue,oldValue,'person的age变化了')})// 情况五：监听reactive所定义的一个响应式数据的某些属性watch([() => person.age,() => person.name], (newValue,oldValue) => {console.log(newValue,oldValue,'person的age或name变化了')})// 特殊情况watch(() => person.info, (newValue,oldValue) => {console.log(newValue,oldValue,'变化了')},{ deep: true })注意⚠️⚠️：此处开启深度监听和情况三的区别：此处由于监视的是reactive中定义的对象中的某个属性，所以deep配置有效。immediate: true 可设置立即监听return {str,msg}}
}

二、watchEffect 函数

watch的套路是：既要指明监视的属性，也要指明监视的回调。

watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性。

watchEffect有点像computed：
但computed注重的是计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect注重的是过程（回调函数的函数体），所以不用写返回值。

 // watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调watchEffect(() => {const x1 = sum.valueconst x1 = person.ageconsole.log('watchEffect回调执行了')})

Vue3学习之第四节：setup()中使用watch、watchEffect 函数相关推荐

Vue3学习之第三节：setup()中使用计算属性
vue2的方式写computed: 代码片段: data() {return {num1: 0,num2: 0,};},computed: {result() {return parseInt(thi ...
木木的Unity学习笔记（四）—— Unity中的柏林噪声（Perlin Noise）
木木的Unity学习笔记(四)-- Unity中的柏林噪声柏林噪声是一个非常强大算法,经常用于程序生成随机内容,在游戏和其他像电影等多媒体领域广泛应用.算法发明者Ken Perlin也因此算法获得奥 ...
vue3学习笔记（ref, reactive, setup, hook...）
目录一.搭建项目二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
【C语言进阶深度学习记录】四 C语言中的类型转换
今天学习C语言中的类型转换,包括隐式类型转换和显示类型转换文章目录 1 C语言中的数据类型转换 1.1 强制类型转换 1.11 强制类型转换代码分析 1.2 隐式类型转换 1.21 隐式类型转换代码 ...
python学习（第四节课）
一.判断条件判断符基本使用 1<2 ,返回值为True 1>2 ,返回值为False 1==2,返回值为True 连续使用 1<2<3,返回值为True 1>-1&l ...
《UVM实战》学习笔记——第四章 UVM中的TLM1.0通信
文章目录前言一.TLM1.0 1.TLM的定义 2.数据流:数据流动的方向 3.控制流:动作发起者initiator.动作接收者target 4.各种端口的连接 5.transport 6.non ...
4.Java学习笔记第四节——程序流程控制（尚硅谷视频整理）
文章目录一.分支语句 1. if-else 结构 1)如何从键盘获取不同类型的变量 2. switch-case 结构二.循环结构 1. for 循环一.分支语句 ...
python学习笔记第四节
集合与复习删除列表中的列表的元素 remove(元素) 括弧填元素而不是索引取值根据索引遍历这歌列表不根据索引遍历列表的常用操作: 比较元组字典常用操作: 元组中的列表内元素的添加避免 ...
salesforce 零基础开发入门学习（十四）salesforce中工厂模式的运用
提到工厂模式,想必大家都很熟悉,工厂模式作为一种设计模式,同样在salesforce中适用. 举一个例子,笔作为基类,可以有钢笔,铅笔,圆珠笔等等.有一个笔的工厂,当你向它要钢笔,它就会生产一支钢笔; ...

Vue3学习之第四节：setup()中使用watch、watchEffect 函数

一、watch 监听

二、watchEffect 函数

Vue3学习之第四节：setup()中使用watch、watchEffect 函数相关推荐

最新文章

热门文章