vue3中的watch和watchEffect

watch

结论1：

watch需要侦听特定的数据源，可以是一个也可以是多个，在页面第一次加载时不运行函数，只有当监听的数据源改变时，才会运行此函数

结论2

watch监听一个对象的属性，首先监听的值要以函数返回值的形式进行传递监听，不同于vue2形式的监听，如下为对象属性5秒后改变，监听函数打印

结论3

监听多个数据源，是把需要监听的参数放在watch函数的数组中，但是如果是监听多个数据源的话，如果多个数据源同时改变的话，只触发一次监听函数，如下图所示

这是是两个数据源同时发生改变，但是watch函数只是触发了一次

watchEffect

结论1

vue官方文档为了根据响应式状态自动应用和重新应用副作用，我们可以使用 watchEffect 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
可以看出 watchEffect函数不需要传入一个数据源，只需要传入一个函数，在函数中使用到的响应式数据，vue都会追踪依赖，当数据改变时，watchEffect函数会再次运行，并且watchEffect在页面第一次加载的时候就会运行

验证结论1

结论2 watchEffect 监听多个数据源

监听对象，无法完成监听

监听对象属性，可以完成

结论3 watchEffect 停止监听

const stop= watchEffect(()=>{})stop()

watch 和 watchEffect 的区别

watch是惰性的，页面第一次加载时不触发watch函数，只有监听的数据发生变化时，才会触发watch函数
watch可以以数组的形式监听多个参数，如果多个数据同时发生改变，watch只触发一次
watch监听reactive数据时，是以（）=>a 这个形式，目的是监听数据的getter函数，对于ref定义的数据，可以直接监听
watch可以获取监听的数据的新值和旧值
watchEffect 函数，在页面第一次加载时就会触发，并且会一直监听追踪内部使用的响应式数据，只要追踪的响应式数据发生变化，watchEffect 都会运行
watchEffect 也可以监听多个参数，只是不能监听对象，因为他无法监测对象内部的变化，可能是watchEffect 无法实现深度监听吧（具体原因还不清楚）

仅记录平常学习

vue3中的watch和watchEffect相关推荐

web前端培训分享：使用Dplayer实现Vue3中的视频及弹幕播放
Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML.Vue.React中实现视频播放的功能需求.Dplayer同时也提供了目前各大视频站都在使用的弹幕功能 ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
vue3中v-model的重大更新
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 Vue.component('custom-input', {props: ['value'],te ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...
vue3中 v-md-editor 编辑器的基本使用分享
vue3中 v-md-editor 编辑器的基本使用分享安装 (2.3.15以上) # npm npm install @kangc/v-md-editor -S # yarn yarn add @ ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...
在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果
在vue2.vue3中基于Three.js使用多张全方位照片拼接全景vr效果 Vue3 代码如下(示例): <template><div class="Create&quo ...

vue3中的watch和watchEffect

watch

结论1：

结论2

结论3

watchEffect

结论1

验证结论1

结论2 watchEffect 监听多个数据源

结论3 watchEffect 停止监听

仅记录平常学习

vue3中的watch和watchEffect相关推荐

最新文章

热门文章

vue3中的watch和watchEffect

watch

结论1：

结论2

结论3

watchEffect

结论1

验证 结论1

结论2 watchEffect 监听多个数据源

结论3 watchEffect 停止监听

仅记录平常学习

vue3中的watch和watchEffect相关推荐

最新文章

热门文章

验证结论1