VUE 技巧 —— watch

最新推荐文章于 2022-01-26 19:16:29 发布

这是个问题

最新推荐文章于 2022-01-26 19:16:29 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_39423672/article/details/79915968

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍Vue.js框架中watch特性的使用方法，特别是在初始化时执行一次，并在监听数据变化时再次执行的应用场景。通过具体代码示例展示了如何利用watch的immediate选项实现这一功能。

1. 善用 watch 的 immediate 数据

create(){
    this.initFuction();
},
watch(){
    abc(){
        this.initFunction(){

        }
    }
}

如果有需求，初始化时执行一次，监听改变后再执行一次
可以采用下面的写法：

watch(){
    abc(){
        handler:'initFunction',
        immediate:true
    }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

这是个问题

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue技巧大全

donglize521521的博客

07-19

2754

Vue面试题大全 1.单页应用SPA和多页应用MPA 单页应用（SPA） 1.概念和原理 **概念：**第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候

Vue3 Watch全家桶深度指南：数据变化的艺术监听

码农键盘上的梦

02-11

1343

广角镜头：watchEffect自动覆盖所有依赖变焦镜头：watch精确锁定目标红外模式：watchPostEffect捕捉更新后的状态高速连拍：watchSyncEffect即时响应精准响应数据变化自动优化渲染性能优雅处理复杂状态逻辑（本文示例基于Vue3.4+，部分特性需注意版本兼容性）

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

Vue技巧

weixin_33918357的博客

04-03

118

转载:https://segmentfault.com/a/1190000014085613?utm_source=channel-hottest 对自己有用,做个笔记,有兴趣可以去以上地址去看. 第一招：化繁为简的Watchers 场景还原： created(){ 　　this.fetchPostList(); }, watch: { searchInp...

vue 技巧

oYuLian的博客

10-15

804

对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真学习一下了。在面试过程很多HR会问到。面试之加分项vue 第一招：化繁为简的Watch 场景还原：面试之加分项vue 组件创建的时候我们获取一次列表，同时监听input框，每当发生变化的时候重新获取一次筛选后的列表这...

vue watch使用的小技巧

xvzhengyang的博客

04-29

166

watch:异步场景; 监听一个变量/数组侦听器--watch 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 data: { cityName: 'shanghai' }, 1.watch: { cityName(newName, oldName) { // ... } } 每次cityName发生变化,就会导致函数执行 2.immediate和ha...

vue 的使用技巧

人在路上走

08-29

585

vue技巧小的判断语句可以直接写在表达式里面，比如{{i?i:2}}这样的判空语句赋默认值做处理图片的默认图片往往需要走两步，一种是像上面那种判断网络图片是否为空的处理，一种是onerror事件，当图片找不到src的时候，对src做处理，onerrof=”javascript:this.src=’默认图片’” 上次的问题，在a标签里面使用click事件跳转路由页面不能带link标签跳转“/...

实例详解vue.js浅度监听和深度监听及watch用法

10-18

此外，Vue还提供了一个特殊的选项——watch，用来侦听和响应Vue实例上的数据变动。首先，我们来看浅度监听，它通常指的是Vue实例在初始化时，对data中的属性进行的第一次绑定时所进行的监听。当数据属性发生改变时...

超实用的Vue 小技巧（开发常用整理）

前端程序猿的博客

01-21

3522

学习成为一个更好的Vue开发者并不总是关于那些需要花时间和精力才能掌握的大概念。掌握一些技巧和窍门，可以让我们的编程生活变得更容易--没有大量重复的工作。在用 Vue 开发的这几年里，我学到了很多有用的技巧。有些很取巧，有些几乎每天都在用，有些则更高级--但它们都很有用。

Vue——知识体系总结

xcymorningsun的专栏

01-11

3190

目录一、引言二、历史发展三、依赖工具四、vue 4.1基础 4.2插件五、第三方库六、总结一、引言学完vue，基本会使用了，框架也会搭建了，但是我们要知其然还要知其所以然，从宏观有比较清楚的认识，梳理下知识体系。下面是我梳理的vue知识体系：二、历史发展前端历史发展还是...

VUE——超详细的美食杰项目—菜谱详情

weixin_51962708的博客

10-12

1235

VUE——超详细的美食杰项目—菜谱详情效果介绍detail.vuedetail-header.vuedetail-content.vuecomment.vue 效果介绍实现页面数据渲染，还有实现点击收藏之后在用户里面可以看到组件收藏的菜谱。实现发表评论等效果加粗样式 detail.vue 在detail.vue组件里有三个引入的子组件，分别为菜谱介绍、菜谱的做法和步骤和登录的用户发表的评论。首先我们引入要获取的后端数据，在data中声明一个menuInfo数组，通过监听路由改变的方法获取到后端的数据，

Vue 使用中的小技巧

12-10

在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~ 1. 多图表resize事件去中心化 1.1 一般情况有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写： mounted() { setTimeout(() => [removed] = () => { this.$refs.chart1.chartWrapperDom.resize() this.$refs.chart2.

Vue 开发必须知道的36个技巧(小结)

10-16

主要介绍了Vue 开发必须知道的36个技巧(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue的小技巧

litter_lj的博客

04-26

359

1.自动注册组件(require.context) components/index.js 将其封装成vue插件，提供install const requireComponents = require.context("./common", false, /\.vue$/); console.log(requireComponents.prototype); function to...

vue实用技巧

chaogaoxiaojifantong的博客

04-17

273

解决路由同地址下跳转不刷新的问题先跳到其他页面，再跳回去，必须调用setTimeout(setTimeout是异步线程) this.$router.push({ name: 'home'}) setTimeout(()=>{ this.$router.push({ name: 'gis', query: { deviceTyp...

Vue常用技巧

殷志鹏的博客

04-14

1611

文章目录子组件使用父组件的值子组件使用父组件的值

Vue 使用的一些小技巧

DMS程序猿

07-05

1407

We can’t change history, but we can change the future. --忘了哪里看到的起手最近一直在用 Vue 开发，期间并没有很认真的做个总结，本文也只是对自己印象较为深刻的点列举一二。 Router key 由于 Vue 会复用相同组件，例如 /page?id=1 => /page?id=2 这类跳转的情况，组件将不会执行 created...

vue使用小技巧

sx0809的博客

05-27

435

1.computed传参数 computed: { // 控制显示的内容 computedTxt() { return function(value) { return this.methodGetByteLen(value, 20) } } }

vue的一些实用小技巧

ejeiie的博客

01-26

902

1、路由懒加载，能让你首次加载更快路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。举个栗子????，如果这样写，加载的时候会全部都加载进来。 constrouter=newVueRouter({ routes:[ { path:'/', name:'Home', component:Home }, { path:'/about', name:'About',...

【vuejs】有关vue的一些小技巧

杨小花的一日一记

07-09

723

1.刚进入页面时候的默认界面在路由文件下面的index.js或者router.js中，添加{path:’/’,redirect:’/join’}; export default new Router({ routes:[{ path:'/' redirect:'/join'// 这里就是首页展示的文件 }] }) 2.去掉地址栏中的 ...

vuewatch监听多次触发

最新发布

04-23

### Vue 中 `watch` 监听器多次触发的原因分析在 Vue.js 的开发过程中，`watch` 是一种常用的机制用于监听响应式数据的变化并执行相应的操作。然而，在某些场景下可能会遇到 `watch` 被多次触发的情况。这种现象通常由以下几个因素引起： 1. **双向绑定引发的循环更新** 如果在 `watch` 的回调函数中修改了被监听的数据本身，则可能形成闭环，导致无限次触发[^2]。 2. **深度监听 (`deep`) 导致额外触发** 当启用 `deep: true` 属性时，`watch` 不仅会监听顶层属性的变化，还会递归地监控嵌套对象内部的所有属性变化。这可能导致每次深层结构发生变化时都触发一次回调[^3]。 3. **异步操作引起的重复调用** 在一些情况下（例如网络请求），如果未正确处理并发或延迟问题，也可能造成同一事件被多次捕获和处理[^5]。 4. **初始值同步与后续更改区分不清** 默认情况下，`watch` 只有当目标值实际变动后才会运行其处理器；但如果希望初始化阶段也能立即生效，则需配置选项 `immediate: true` 。不过如此一来便增加了误判风险——即难以分辨到底是初次赋值还是真实意义上的状态迁移所致的通知行为[^4]。针对以上提到的各种可能性以及它们各自对应的解决方案如下所示： --- ### 解决方案 #### 方案一：利用锁标志位控制单次执行通过引入辅助字段如 `lock` 来记录当前是否处于允许继续推进的状态之中，从而有效避免不必要的多余动作发生。 ```javascript data() { return { lock: 0, }; }, watch: { countHeight(newVal) { if (!newVal || typeof newVal !== 'number') return; this.lock += 1; if (this.lock >= 2) { this.someFunction(); } }, } ``` 此方式简单明了，特别适合那些只需要确保特定条件下才可激活某项功能的应用场合[^2]。 #### 方案二：采用防抖节流技术减少频率干扰对于频繁发生的输入型事件来说，可以考虑应用 debounce 或 throttle 技术手段加以限制，使得即使短时间内有多次变更也不会立刻全部反映出来而是按照预定间隔逐步展现效果。 ```javascript methods: { handleDebouncedChange(value) { clearTimeout(this.timer); this.timer = setTimeout(() => { console.log('Value changed:', value); }, 300); // Adjust delay as needed. } } // Inside watcher definition... watch: { someProperty(newValue){ this.handleDebouncedChange(newValue); } } ``` 这种方法非常适合应对键盘按键、滚动条拖拽之类的交互类需求。 #### 方案三：调整深度监听策略降低敏感度假如确实有必要维持深层次跟踪的话，那么就应该仔细权衡哪些部分真的需要用到全面覆盖式的监视模式，并且尽量缩小范围以免带来过多负担。另外还可以尝试结合新旧两版数值对比逻辑进一步细化筛选条件。 ```javascript watch:{ myObject:{ handler(oldVal,newVal){ const diffKeys = Object.keys(newVal).filter(key=>JSON.stringify(newVal[key])!== JSON.stringify(oldVal[key])); if(diffKeys.length>0){ console.warn(`Detected changes on keys:${diffKeys}`); } }, deep:true } } ``` 上述代码片段展示了如何借助 JSON 序列化技巧快速定位差异所在之处的同时又不会遗漏任何一个细节信息点. #### 方案四：合理运用生命周期钩子配合完成任务有时候单纯依赖单一工具未必能够达到理想的效果，此时不妨换个角度思考能否借助其他可用资源共同协作解决问题。比如把一部分工作转移到组件创建或者挂载期间去做前期准备工作，然后再交还给常规流程接管后期维护事宜。 ```javascript created(){ this.initialSetup(); }, mounted(){ this.finalizeConfiguration(); }, methods:{ initialSetup(){} finalizeConfiguration(){} }, watch:{ targetData(val){ if(!this.isReadyYet())return ; processUpdatedInfo(val); } } ``` 这样的安排有助于更好地分离关注领域同时也提升了整体架构清晰程度. --- ### 总结综上所述，面对 Vue 中 watch 函数可能出现的多重唤起状况，我们分别探讨了几种切实可行的办法予以缓解甚至彻底消除此类隐患。无论是基于计数器原理构建屏障防线，亦或是采纳时间管理理念实施流量调控措施，或者是重新审视整个体系布局寻找更优组合搭配路径，最终目的都是为了保障程序稳定可靠运转的前提下追求极致用户体验满意度最大化。