watch监听器和watchEffect监听器的使用，vue创建组件的区别

已于 2024-08-29 16:35:59 修改
阅读量343 收藏
点赞数 11
文章标签： 前端
于 2024-08-29 15:15:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65941214/article/details/141651446
版权

watch监听器

使用watch来响应数据的变化。并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态

watchEffect监听器

是会去自动监听需要改变的值，不需要自己去指定属性

总结

相同点：watch和watchEffect的相同点就是计算属性是都是依赖于响应式的，都可以监测数据的变化给出相应的处理。

不同点：watch和watchEffect的不同点是watch需要显式声明要监听的数据，通常用于处理更复杂的场景，其中数据的变化可能会触发不同的逻辑。相比之下，watchEffect不需要明确指定监听的数据源，它会追踪所有在回调中被访问的响应式数据，这使得代码更加简洁，但响应性依赖关系可能不那么明确‌。

vue创建组件的区别

创建：

然后右击文件夹的话可以看见，有一个新建组件（点击）

创建组件

目的就是说一个组件应用多个页面：

可以配合一些指令使用

总的来说就是一个组件作用与不同的页面

高兴蛋炒饭
关注
  • 11
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3-18-侦听器watch()、watchEffect() 的基本使用
northcastle的博客
12-14 1017
Vue3 中的 侦听器 watch()、watchEffect() 的基本使用
vue计算属性computed、事件、监听器watch的使用讲解
10-17
以上内容详细介绍了Vue计算属性(computed)、方法(methods)、监听器(watch)的使用方法和区别，并通过实例展示了它们在实际开发中的应用。理解这些知识点对于提升Vue.js开发效率和代码质量具有重要意义。
vue3 watch监听器 和 watchEffect高级监听器
Royzilong的博客
03-23 3544
watch 是监听特定的数据源（可以是多个，是多个就是数组）【这是watch的第一个参数】，或者对象，会有一个单独的回调执行其他操作【这是watch的第二个参数】。第三个参数放后面 第一种：监听一个或多个数据源（数组），此处展示多个 绑定两个 v-modle 分别是 message1 和 message2 <template> <div> <input type="text" v-model="message" /> <input typ
vue3源码解析——watch和watchEffect区别
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
03-31 2554
在这部分源码分析中，用了很长的篇幅取介绍doWatch的实现，因为watch和watchEffect都调用了doWatch，只是第二个参数不同，watchEffect传入的是null，watch传入的是cb。doWatch干了什么事情呢？首先由要收集数据依赖，收集的是哪写属性呢？source传入的可能是ref\reactive属性、数组或者函数，这个时候需要对source进行计算，看最终依赖的是什么东西？通过定义一个getter函数，根据source类型不同，得到监听数据最后的执行结果。怎么收集数据依赖呢。
VUE3侦听器:watch与watchEffect的区别与使用
qq_45820271的博客
03-04 2539
本文介绍了VUE中使用watch和watchEffect的区别，同时介绍了watchPostEffect和watchSyncEffect的使用方式以及如何关闭一个异步的监听
vue3 watchEffect和watch的使用及区别
weixin_43995143的博客
02-23 1277
Vue 3中的是一个非常强大的响应式API，它允许开发者在响应式数据发生变化时自动运行一些副作用（side effects）。与Vue中的另一个APIwatch相似，但有一些关键区别和特点。下面我会详细解释的工作原理、使用方法以及与watch的比较。
vue3监听器watch以及watchEffect的使用
前端很杂，故名前端杂货铺 —— coderkey
06-26 708
侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。watch()一共有三个参数第一个参数：侦听器的源，可以为以下几种 ：以函数形式返回一个值；一个ref；一个reactive响应式对象或者由以上类型的值组成的数组。第二个参数：侦听源发生变化时调用的回调函数。这个函数接受三个参数分别是新值，旧值 ，用于注册副作用清理的回调函数（可选，可忽略）；当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。
带你吃透 Vue3 中 侦听器 【watch ，watchEffect】数据监听的使用及注意事项
热门推荐
学而不思则罔,思而不学则殆
03-14 1万+
侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。使用 watch 和watchEffect 对数据进行监听处理
Vue —— watch和watchEffect的区别
weixin_52148548的博客
05-31 1万+
目录前言watch和watchEffect的对比watchwatchEffect深度解析watch函数深度解析watchEffect函数watchEffect与computed 前言 watch函数与watchEffect函数都是监听器，在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的。 watch和watchEffect的对比 watch watch显式指定依赖数据，依赖数据更新时执行回调函数 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行 监视ref
vue3中的watch和watchEffect的区别
weixin_47389477的博客
05-05 1725
两者功能相似，如果要立即执行的话，用watchEffect方便些。
vue中watch和computed的区别与使用方法
10-14
在 Vue 中，`watch` 和 `computed` 都是用来处理数据变化的机制，但它们之间存在显著的差异和特定的使用场景。 **计算属性（Computed）** 计算属性是基于它们的响应式依赖进行缓存的。这意味着，当你在模板中使用一...
AI 大模型时代，对前端工程师有哪些机遇和挑战？
最新发布
Z4400840的博客
08-28 351
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
零基础5分钟上手亚马逊云科技-云原生架构设计
m0_66628975的博客
08-26 1618
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
前端宝典十六：深入浅出8大设计模式
franktaoge的博客
08-24 1393
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
基于Thymeleaf、bootstrap、layUI 混合前端应用
宣晨光
08-26 976
以下代码基于Spring boot + Thymeleaf框架，前端采用BootstrapV3.3.7 LayUIV2.9.13 版本。
浏览器精度问题
m0_46281382的博客
08-25 553
浏览器如何解析后端返回的long类型的数据
前端：篮球投掷动画
懒羊羊大王的博客
08-23 1087
使用 H5 和 CSS3 实现的一个篮球投掷动画。 玩法：通过点击篮球所在的绿色(紫色)容器，实现篮球的投掷和回收。
WebRTC 实时通信：构建高效网页视频通话的秘诀
liuxin33445566的博客
08-24 698
WebRTC 是一个开源项目，由Google于2010年启动，旨在通过简单的API实现浏览器间的实时音视频通信。它允许开发者在网页应用中轻松集成音视频通话、文件共享、屏幕共享等功能。
watch和watchEffect的使用场景
12-20
watch和watchEffect都是在Vue 3中用来监听数据变化的方法，但它们的使用场景有所不同。 watch适用于需要监听特定数据的变化，并在数据变化时执行特定的操作。它可以监听单个数据、多个数据或者嵌套数据的变化。你可以通过watch函数来创建一个监听器，并在回调函数中定义需要执行的操作。 ```javascript import { reactive, watch } from "vue"; const state = reactive({ age: 30, name: "John", }); watch( () => state.age, // 监听的数据 (newVal, oldVal) => { // 数据变化时执行的操作 console.log("Age changed from", oldVal, "to", newVal); } ); ``` watchEffect适用于需要立即执行一段代码，并在其中监听数据变化的场景。它会自动追踪代码中使用的响应式数据，并在数据变化时重新执行代码。watchEffect不需要指定要监听的数据，它会自动追踪代码中使用的响应式数据。 ```javascript import { reactive, watchEffect } from "vue"; const state = reactive({ age: 30, name: "John", }); watchEffect(() => { // 这里的代码会立即执行，并在state.age发生变化时重新执行 console.log("watchEffect", state.age); }); ``` 总结一下，watch适用于需要有条件地监听特定数据的变化，而watchEffect适用于需要立即执行一段代码并监听其中使用的响应式数据的变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值