监听对象中某一项的值_Vue中watch的详细用法
1.基本用法
下面代码是watch的一种基本用法:
watch去监听单个值是否发生改变
直接写一个监听处理函数,当每次监听到cityName值发生改变时,执行函数。也可以在所监听的数据后面直接加字符串形式的方法名:
watch: { firstName: 'nameChange'// 方法名}}
2. immediate和handler
使用watch基本用法时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法。
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
3. deep
当需要监听一个对象的改变时,基本的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
这样只会给对象的某个特定的属性加监听器。数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。
监听对象中某一项的值_Vue中watch的详细用法相关推荐
- vue 对象中数组中对象某个属性更改_vue之监听对象、对象数组的改变
vue之监听对象的改变 一.对象监听 1. 深度监听 change name:'test', data () {return{ user: { id:1, name: '李四', age: 14, s ...
- Vue.js开发记录--用watch监听对象中属性的变化
监听对象中所有属性 存在对象obj,若想要监听其中所有的值的变化 watch: {obj: {handler (val) {// coding},deep: true}, } 监听对象中某个属性 如果 ...
- watch监听对象里面值的变化_Vue总结——computed和watch的用法和区别
computed--计算属性 写法一: 写法二: computed默认有缓存 如果被依赖的属性没有发生变化,就不会重新计算. 什么是变化: 点击n+1按钮,控制台打出 n变了 点击obj.a=hi , ...
- 动态数据绑定之监听对象变化
---恢复内容开始--- 动态数据绑定是MVVM框架中最基础的的一个功能,简单描述就是:将数据和视图进行绑定,当数据发生改变时,视图随之改变,更深层次一点,数据绑定包括单向数据绑定和双向数据绑定. 本 ...
- vue watch监听对象
一.watch的API vm.$watch( expOrFn, callback, [options] ) 参数: {string | Function} expOrFn {Function | Ob ...
- vue监听对象某一个属性
watch: {uploadObj: {//监听对象deep: true,handler: function(value) {if (!value.receiver && !value ...
- vue用watch监听对象,打印oldValue和newValue相同的问题
vue用watch监听对象,打印oldValue和newValue相同的问题 背景 做节目设计器时候,当组件超出限制大小时,需要回滚此次操作,但是数据没有备份,拿不到旧数据.因此在watch中监听变化 ...
- [vue] watch怎么深度监听对象变化
[vue] watch怎么深度监听对象变化 deep设置为true 就可以监听到对象的变化let vm=new Vue({el:"#first",data:{msg:{name:' ...
- [js] 在设置keyup监听事件后按F5刷新和按浏览器中刷新键刷新有什么区别?
[js] 在设置keyup监听事件后按F5刷新和按浏览器中刷新键刷新有什么区别? 按浏览器中刷新键刷新不会触发keyup事件 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定 ...
最新文章
- 进程间通信(三)—信号量
- matlab dsearchn,cKDTree与dsearchn
- drtek收音机使用说明_一百年前的便携式矿石收音机长啥样?这台1919年产品给你答案...
- Android服务二 创建绑定服务
- python 语言教程(3)变量之字典
- c# cookie帮助类
- 干货 | 深度学习名词表:57个专业术语加相关资料解析(附论文)
- c语言判断x的个位数是否为5,用C语言编程从键盘输入一个正整数,判断其个位数是否为5,若是5则输出“yes”,否则输出“no”...
- html输入完账号密码才能跳转,HTML输入字段跳转
- 演练 开心餐厅 0929
- 今年Q3发布!小米12至尊版曝光:升级骁龙8 Plus处理器
- sqlite 迁移 oracle,Oracle 数据导入 Sqlite
- C++俄罗斯方块(linux环境)-转 感觉非常好
- 巅峰对决 Spring Boot VS .NET 6
- HTML5中的source标签
- 飞阳物联平台,智能开关2.0版本支持凌动开关
- Git全解 idea github gitee gitlab
- 看完这篇人工智能的文章,能帮你超越90%的人
- 如何离线在itpub上发表博文
- python中用于生成随机数的函数的简单总结
热门文章
- 基于小波shint/DCT编码压缩解压缩的FPGA实现
- 考前自学系列·计算机组成原理·计算机的硬件组成及其功能
- 使用IsLine FrameWork开发ASP.NET程序之六—使用ExceptionProcessProvider异常处理框架(下)...
- sql 2005 解除用户锁定(SA帐户被锁定)
- 数据仓库与ODS的区别
- 前端模版引擎选择指南
- 站长必看系列:完全揭密百度和谷歌收录规律
- python绘图使用subplots出现标题重叠的解决方法
- 算法提高课-搜索-最短路模型-AcWing 188. 武士风度的牛 :bfs、dist数组记录最小步数
- latex文档的优点和使用小tips