vue watch监听对象
一、watch的API
vm.$watch( expOrFn, callback, [options] )
参数:
{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
{boolean} deep
{boolean} immediate
返回值:
{Function} unwatch
用法:
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。
示例:
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {// 做点什么
})// 函数
vm.$watch(function () {return this.a + this.b},function (newVal, oldVal) {// 做点什么}
)
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
vm.$watch
返回一个取消观察函数,用来停止触发回调:选项:deep
为了发现对象内部值的变化,可以在选项参数中指定
deep: true
。注意监听数组的变动不需要这么做。
vm.$watch('someObject', callback, {deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
选项:immediate
在选项参数中指定
immediate: true
将立即以表达式的当前值触发回调:
vm.$watch('a', callback, { immediate: true})
// 立即以 `a` 的当前值触发回调
二、watch的定义
(1)监听data的变量的值变化
{data: function(){return {key:{a:'b'}}},watch: {key(newval, oldVal) {}}
}
(2)监听data的变量的属性值变化
A.字符串形式
{data: function(){return {key:{a:'b'}}},watch: {'key.a'(newval, oldVal) {}}
}
B.computed模式
{data: function(){return {key:{a:'b'}}},computed: {a() {return this.key.a}}, watch:{a(newValue, oldValue) {}}
}
(3)监听vue的data的变量的变化(包括属性值的变化)
{data: function(){return {key:{a:'b'}}},watch: {key: {handler(newValue, oldValue) {},deep: true}}
}
(4)监听vue的data的变量值变化(立即触发)
{data: function(){return {key:{a:'b'}}},watch: {key: {handler(newValue, oldValue) {},immediate: true}}
}
注意:在watch的监听对象或者监听对象的属性上使用lamda表达式赋值,this指向的不是Vue的实例对象,而是Vue的原始对象。
参考:
https://cn.vuejs.org/v2/api/#vm-options
https://blog.csdn.net/Claire_cz/article/details/79098237
vue watch监听对象相关推荐
- vue 对象中数组中对象某个属性更改_vue之监听对象、对象数组的改变
vue之监听对象的改变 一.对象监听 1. 深度监听 change name:'test', data () {return{ user: { id:1, name: '李四', age: 14, s ...
- [vue] watch怎么深度监听对象变化
[vue] watch怎么深度监听对象变化 deep设置为true 就可以监听到对象的变化let vm=new Vue({el:"#first",data:{msg:{name:' ...
- vue 监听对象里的特定数据
2019独角兽企业重金招聘Python工程师标准>>> vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: {params: function( ...
- vue用watch监听对象,打印oldValue和newValue相同的问题
vue用watch监听对象,打印oldValue和newValue相同的问题 背景 做节目设计器时候,当组件超出限制大小时,需要回滚此次操作,但是数据没有备份,拿不到旧数据.因此在watch中监听变化 ...
- vue监听对象某一个属性
watch: {uploadObj: {//监听对象deep: true,handler: function(value) {if (!value.receiver && !value ...
- Vue.js开发记录--用watch监听对象中属性的变化
监听对象中所有属性 存在对象obj,若想要监听其中所有的值的变化 watch: {obj: {handler (val) {// coding},deep: true}, } 监听对象中某个属性 如果 ...
- 动态数据绑定之监听对象变化
---恢复内容开始--- 动态数据绑定是MVVM框架中最基础的的一个功能,简单描述就是:将数据和视图进行绑定,当数据发生改变时,视图随之改变,更深层次一点,数据绑定包括单向数据绑定和双向数据绑定. 本 ...
- Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
- Vue 深度监听和初始绑定
vue的监听属性普通方式无法监听对象内部属性的改变,并且初始化时不会监听数据对象. vue为监听属性提供了一种对象方法 watch: {'option.size': {// handler为默认执行的 ...
最新文章
- [转] Envelop
- Python 列表 list() 方法
- 一台PoE工业交换机可以给多少设备供电?
- 2016年《大数据》杂志调查问卷
- SET FOREIGN_KEY_CHECKS = 0
- ubuntu 18.04安装搜狗输入法
- 【字符串】 - 判断是否包含相应的字符 - 截取某一部分字符
- Adobe Flash CS4 从入门到精通
- 中国地图里暗藏的天机
- 江苏省谷歌高清卫星地图下载
- 常用DateUtil
- 抖音Vlog必备1000+超强Premiere转场特效字幕动画LUT预设PR模板包 V6 (包含音效)
- 商城APP开发关键板块
- 【渝粤题库】陕西师范大学180102 广告策划 作业(高起专)
- CSP考试 2016年04月第3题 路径解析 C++实现
- TCP快速重传触发条件的一个细节
- 什么IT项目可以兼职在学校做
- Shortcuts快速入门
- nas java_小白入门NAS—快速搭建私有云教程系列(一)
- 比情商智商重要的是财商——财商!
热门文章
- 详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
- [MyBatisPlus]乐观锁和悲观锁
- [蓝桥杯][历届试题]回文数字-暴力枚举
- 蓝桥杯2015初赛-牌型种数-dfs
- 服务器水冷系统仿真,水冷漫谈(三)——水冷散热器仿真方法
- windows路由表 重启后就还原了_绕过Apple id并可以随意重启的终极方案来了 (Windows下操作)...
- 波拉契尔数列 C++
- All CUDA devices are used for display and cannot be used while debugging.
- HDU 6071 Lazy Running(同余最短路的应用)
- [2021.1.31多校省选模拟12]随机变换的子串(线段树维护分治/字符串/自动机思想)