详解Vue中watch的高级用法
转载自 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下。
假设有如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。
handler方法和immediate属性
这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢?我们需要修改一下我们的 watch 写法,修改过后的 watch 代码如下:
1 2 3 4 5 6 7 8 9 |
|
注意到handler了吗,我们给 firstName 绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。
而immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。
deep属性
watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听,比如我们 data 里有一个obj属性:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
当我们在在输入框中输入数据视图改变obj.a的值时,我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。
默认情况下 handler 只监听obj这个属性它的引用的变化,我们只有给obj赋值的时候它才会监听到,比如我们在 mounted事件钩子函数中对obj进行重新赋值:
1 2 3 4 5 |
|
这样我们的 handler 才会执行,打印obj.a changed。
相反,如果我们需要监听obj里的属性a的值呢?这时候deep属性就派上用场了!
1 2 3 4 5 6 7 8 9 |
|
deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
优化,我们可以是使用字符串形式监听。
1 2 3 4 5 6 7 8 9 |
|
这样Vue.js才会一层一层解析下去,直到遇到属性a,然后才给a设置监听函数。
详解Vue中watch的高级用法相关推荐
- python中index函数_详解python中的index函数用法
1.函数的创建 def fun(): #定义 print('hellow') #函数的执行代码 retrun 1 #返回值 fun() #执行函数 2.函数的参数 普通参数 :要按照顺序输入参数 de ...
- python3 yield 大文件_详解Python3中yield生成器的用法
任何使用yield的函数都称之为生成器,如: def count(n): while n > 0: yield n #生成值:n n -= 1 另外一种说法:生成器就是一个返回迭代器的函数,与普 ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- python中heapq的库是什么_详解Python中heapq模块的用法
详解Python中heapq模块的用法 来源:中文源码网 浏览: 次 日期:2018年9月2日 [下载文档: 详解Python中heapq模块的用法.txt ] (友情提示:右键点上行t ...
- python中get函数是什么意思_详解python中get函数的用法(附代码)_后端开发
strncmp函数用法详解_后端开发 strncmp函数为字符串比较函数,其函数语法为"int strncmp ( const char * str1, const char * str2, ...
- 详解Python3中yield生成器的用法
这篇文章主要介绍了详解Python3中yield生成器的用法,是Python入门学习中的基础知识,需要的朋友可以参考下 任何使用yield的函数都称之为生成器,如: def count(n):whil ...
- python中break怎么用_详解Python中break语句的用法
详解Python中break语句的用法 在Python中的break语句终止当前循环,继续执行下一个语句,就像C语言中的break一样. break最常见的用途是当一些外部条件被触发,需要从一个循环中 ...
- java中iterator用法_java_详解Java中Iterator迭代器的用法,迭代器(Iterator)迭代 - phpStudy...
详解Java中Iterator迭代器的用法 迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为&quo ...
- mysql between详解_MySQL中BETWEEN子句的用法实例详解
这篇文章主要介绍了MySQL中BETWEEN子句的用法详解,是MySQL入门学习中的基础知识,需要的朋友可以参考下 可以使用IN子句来代替相结合的"大于等于和小于等于"的条件. 要 ...
最新文章
- 九十一、前端可视化ECharts的使用
- Hibernate的延迟加载
- 从队列、二叉树到优先队列
- java基础自学教程_Java基础自学教程(全套)
- 2个月面了鹅厂的5个部门,心态差点奔溃了......
- 尔雅 2017大学计算机基础答案,2018超星尔雅大学计算机基础答案
- CoAP协议学习笔记 3.2 CoAP协议翻译 DTLS加密
- scrum敏捷开发流程介绍和心得
- java 人脸活体检测_人脸识别活体检测测试案例
- Youtube CC字幕是什么,Caption和Subtitle的解释
- 史上最贵的merge代码,新浪程序员因加班错失年会77万大奖!
- 如何裁剪动图大小?试试这个在线照片裁剪工具
- centos 挂载 cos云存储服务器,centos文件目录挂载docker实现共享操作步骤
- activity关闭和dialog.dismiss冲突的解决(Activity has leaked window com.android.internal.p
- 仿滴滴打车时间选择器开始结束时间
- linux硬盘添加和挂载(linux硬盘的热插拔)
- 酷体网--可以顶(dig)的运动空间
- 华为双前置摄像头_华为第一款“刘海屏”手机发布,前置摄像头逆天
- (翻译)Understanding Convolutional Neural Networks for NLP
- 深度学习中GPU和显存
热门文章
- leetcode98. 验证二叉搜索树
- matlab程序改为m文件名,在MATLAB中,程序文件的扩展名为.m,所以程序文件也称为M文件...
- [Java基础]注解概念
- [蓝桥杯2018初赛]第几个幸运数-数论+枚举
- java循环语句_java中循环语句
- 数据结构与算法--我们来玩丢手绢(约瑟夫环问题)
- nowcoder 清楚姐姐的翅膀们 F 一般图的最大匹配
- ARC068C - Snuke Line
- Rinne Loves Xor
- Panasonic Programming Contest (AtCoder Beginner Contest 195) 题解