watch事件调用踩坑

最新推荐文章于 2024-08-14 14:59:25 发布

原创最新推荐文章于 2024-08-14 14:59:25 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

1 篇文章

订阅专栏

设置监听事件后，若其他方法更改监听变量，会执行watch事件。若不留意此情况，可能产生各种bug，需在开发中加以注意。

设置监听事件后其他方法的更改监听变量会执行watch事件，不注意这个问题可能产生各种bug

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

XD_NML

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2踩坑记录：computed中不建议调用后台接口

l_q_l的专栏

08-28

1268

使用computed，不会等待其中的异步任务结束就会返回，导致后面使用computed中变量的地方拿不到预期值使用watch，同样不会等待异步任务结束才返回。但是按照网上的说法，使用promise, async, wait等等应该是可以实现的，这部分我还不会。。。使用method，完全实现了我最开始的想法：需要时才调用；调用过一次就不再调用从性能上来说，这样处理或许能减轻重复调用给数据库带来的压力，也能避免在页面初始化时请求过多或许后面根本不需要的数据。

ZooKeeper Watch 回调事件丢失

wenniuwuren

09-27

4148

使用 ZooKeeper 需要注意的问题，没有理解的话，很容易踩坑

参与评论您还未登录，请先登录后发表或查看评论

Vue3中Watch踩坑记录

Macao7_W的博客

04-02

1358

最近在写项目的时候遇见一个很头大的问题，就是watch监听不到数组长度的变化。初始代码如下： watch(drivingOrderTable.length, (newVal, oldVal) => { if (newVal > oldVal) { ElMessage({ type: "success", message: "操作成功", }); } }); 我在控制台打印了数组刚开

vue之watch监听对象，以及watch内调用methods方法

pacholy的博客

12-10

1万+

直接通过watch监听对象，对象的属性值变化并不会触发这个监听，所以通过属性deep:true，可以深入监听， data:{ return { myObj:{ name: 'lily', age: 12 } } }, watch: { myObj: { handler: (val, olVal) => {

怎么控制watch监听，第一次上来并不会监听数据

weixin_47924642的博客

04-07

1864

怎么控制watch监听，第一次上来并不会监听数据。

watch监听

山外小楼

07-26

1980

1.watch监听普通变量 <div id="app"> <input type="text" v-model='name' /> </div> <script> new Vue({ el:'#app', data:{ name:'233', }, watch:{ nam...

浅谈vue中watch监听器的触发时机（watch的坑）

qq_41206305的博客

07-22

6068

起因我需要在页面created时获得商家的类型id值，然后监听id值，动态的改变请求接口的地址。请求接口的函数在mounted中执行。业务逻辑写完后发现，页面在第一次加载时，接口没有数据，原因接口地址为空，即接口地址没有改变。代码 created() { this.typeId = this.$route.params.id; console.log("this.typeId的值发生改变，触发watch"); }, mounted() { console.log(

Vue2中watch与Vue3中watch对比和踩坑

qq_40792800的博客

08-14

3098

Vue3 中的 watch 是一个函数，接收三个参数，第一个参数是需要被监听的数据( 可以是单个数据，也可以是数组格式的多个数据 )，第二个参数是回调函数，第三个参数则是监听配置项( 深度监听、初始化监听 )。该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，也就是说即使监听的是一个对象形式的数据，只要对象内部属性发生变化，都能被监听到。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。简单监听：监听的是一个回调函数，当监听的值发生改变时，才会执行监听动作。

详解微信小程序框架wepy踩坑记录（与vue对比）

10-17

事件传参方面，Wepy简化了原生小程序的事件参数传递，可以直接在事件调用中传递，如`getIndex({{index}})`。而Vue通常需要通过事件对象的`event`来获取参数。最后，数据绑定方面，Wepy沿用了小程序原生的双大括号`...

HarmonyOS实战开发-Watch（状态变量更改通知）详解

HarmonyOS_002的博客

07-04

1587

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

深入解读vue3 watch监听（踩坑记录）

qq_42753705的博客

12-21

1095

直接上代码，总共测试了下面这些情况（看注释） <template> <h2>当前求和为：{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr /> <h2>当前的信息为：{{ msg }}</h2> <button @click="msg += '！'">修改信息</button> <hr />

vue中watch在页面初始化或刷新时不执行回调

胖墩的IT博客

08-23

3171

场景：在.vue文件的props中的某值用watch监听了，因为做了监听，所以没有在比如created、mounted等生命周期对此值做操作，但是实际上在初始化此页面时，监听没有生效。之后我加了immediate:true, 页面初始化时就执行了下面是一个例子，在哪个位置加immediate:true, watch: { 字段: { // 值发生变化时的回调函数 handler(){ //...... }, .

watch监听中立即监听和深度监听

lanseguhui的博客

11-21

6089

wacth通常用来监听数据的变化如下代码，默认是被监听数据变化时执行，其中handler默认情况下不用写，下图是需要这个监听立即被执行，就是首次进来没变化的时候就执行设置属性，不需要立即执行就不用添加immediate这个属性 immediate:true <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt...

关于使用watch监听函数的报错小坑需要注意！

亚妮先森博客

08-02

1355

1.关于使用watch监听函数的报错注意点属性：Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。代码： export default { name: 'HelloWorld', props: { msg: String }, data() { return { site: "菜鸟教程", url: "www.runoob.com", alexa: 1 } }, methods: {

1. 创建一个vue实例

洪布斯的博客

12-26

696

vue.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...

vue中的watch监听（watch 使用方法，属性解释）

最新发布

12-02

<think> 嗯，用户想了解Vue中reactive和watch的原理和使用方法。从提问方式看，用户有一定前端基础，可能正在学习Vue3的响应式系统，或是遇到了具体开发问题。用户引用了三篇技术文档，说明ta需要深度原理和实用指南的结合。注意到用户特别提到"const { reactive, watch } = Vue"这种解构写法，这很关键。需要强调两点：一是Vue3的模块化设计允许这种按需引入，二是解构可能破坏响应性。用户可能没意识到后者，这在实际开发中容易踩坑。关于reactive部分，用户引用的资料提到Proxy代理对象和基本类型的限制。需要补充说明：1) reactive的深度响应特性 2) 为什么基本类型要用ref 3) 嵌套对象的自动代理机制。用户展示的set函数源码正好说明Vue对动态添加属性的处理，这个案例可以展开。 watch的实现原理比较复杂，用户可能更关注实用场景。需要区分：1) 惰性执行特性 2) 回调参数的使用 3) 副作用清理的重要性。用户给出的computed对比很到位，可以强化声明式vs命令式的概念差异。用户隐藏的需求可能是想优化组件性能。比如避免在watch中做昂贵计算，或者解决响应式数据更新不触发视图的问题。可以暗示deep/immediate等配置项的使用场景。最后要提醒解构陷阱。用户示例中的写法虽然合法，但直接解构reactive对象会导致响应性丢失，这个实战经验比理论更重要。可以用toRefs作为解决方案收尾。 </think>在 Vue 3 中使用 `const { reactive, watch } = Vue` 是从 Vue 实例中解构出响应式 API 的方式。以下是原理与使用方法的详细说明： --- ### **一、`reactive` 的原理与使用** **原理**： 1. **Proxy 代理**：`reactive()` 基于 ES6 `Proxy` 实现，拦截对象属性的 **读取 (get)**、**修改 (set)**、**删除 (deleteProperty)** 等操作。 2. **依赖追踪**：当访问属性时，自动收集当前依赖（如组件的渲染函数或计算属性）；修改属性时，自动触发依赖更新。 3. **深层响应**：递归代理嵌套对象的所有层级，实现深度响应式[^2]。 **使用方法**： ```javascript import { reactive } from 'vue'; const state = reactive({ count: 0, user: { name: 'Alice' } }); // 修改数据 → 视图自动更新 state.count = 1; state.user.name = 'Bob'; // 嵌套对象同样响应 ``` **注意事项**： - **仅适用于对象类型**（Object/Array/Map/Set），基本类型（`string`/`number`/`boolean`）需用 `ref()`[^2]。 - **避免直接解构**：解构会丢失响应性，需用 `toRefs` 转换： ```javascript const { count, user } = toRefs(state); // 保持响应性 ``` --- ### **二、`watch` 的原理与使用** **原理**： 1. **依赖监听**：基于响应式系统的依赖收集，监听特定数据源的变化。 2. **调度执行**：数据变化时，将回调函数推入异步队列（避免重复触发）。 3. **清理机制**：支持在回调中返回清理函数（如清除定时器）[^2][^3]。 **使用方法**： ```javascript import { reactive, watch } from 'vue'; const state = reactive({ count: 0 }); // 监听单个响应式对象 watch( () => state.count, // 数据源（getter 函数） (newVal, oldVal) => { console.log(`count 从 ${oldVal} 变为 ${newVal}`); }, { immediate: true } // 立即执行一次回调 ); // 监听嵌套属性 watch( () => state.user.name, (name) => console.log(`用户名变为: ${name}`) ); // 监听多个数据源 watch([source1, source2], ([newVal1, newVal2]) => { ... }); ``` **关键选项**： | 选项 | 用途 | 示例 | |-------------|-----------------------------|--------------------------| | `deep` | 深度监听嵌套对象 | `{ deep: true }` | | `immediate` | 立即执行回调（初始值触发） | `{ immediate: true }` | | `flush` | 控制回调执行时机（`post`/`sync`） | `{ flush: 'post' }` | --- ### **三、`reactive` vs `watch` vs `computed`** | 特性 | `reactive` | `watch` | `computed` | |--------------|---------------------------|------------------------------|-----------------------------| | **角色** | 创建响应式数据源 | 监听变化执行副作用 | 声明式衍生值 | | **原理** | Proxy 代理 | 依赖收集 + 调度回调 | 依赖追踪 + 缓存结果 | | **适用场景** | 管理复杂状态对象 | 异步操作、DOM 更新等副作用 | 依赖其他值的计算结果 | | **示例** | `const state = reactive(...)` | `watch(data, () => {...})` | `const sum = computed(() => a + b)` | --- ### **四、常见问题解决** 1. **动态添加响应式属性**： - 对象：使用 `reactive` 初始化的对象 **自动支持** 新属性。 - 数组：通过索引修改需用 `arr.splice(index, 1, newValue)` 或 Vue.set (Vue 2)[^3]。 2. **解构丢失响应性**： ```javascript // ❌ 错误：解构后 count 非响应式 let { count } = reactive({ count: 0 }); // ✅ 正确：使用 toRefs import { toRefs } from 'vue'; const { count } = toRefs(state); ``` 3. **性能优化**： - 避免在 `watch` 中执行昂贵操作，使用 `debounce` 防抖。 - 用 `computed` 替代复杂 `watch`，减少重复计算[^1]。 --- ### **代码示例：综合使用** ```javascript import { reactive, watch, computed } from 'vue'; export default { setup() { const state = reactive({ items: [1, 2, 3], filter: '' }); // 计算属性（声明式） const filteredItems = computed(() => { return state.items.filter(item => item > 1); }); // 监听器（命令式） watch( () => state.filter, (newFilter) => { console.log('过滤条件更新:', newFilter); // 执行异步操作... }, { immediate: true } ); return { state, filteredItems }; } }; ``` --- ### **引用来源** [^1]: Vue 官方文档指出，`computed` 是声明式的衍生值，自动处理依赖和缓存；`watch` 是命令式的，用于响应数据变化执行操作。 [^2]: Vue 3 源码中，`reactive` 基于 Proxy 实现，仅代理对象类型；基本类型需使用 `ref`。`watch` 通过调度器管理回调执行时机。 [^3]: 动态添加响应式属性需调用 Vue 的 `set` 方法（Vue 2）或直接操作 `reactive` 对象（Vue 3