vue watch All In One
vue watch All In One
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// string method name
b: 'someMethod',
// the callback will be called whenever any of the watched object properties change regardless of their nested depth
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// the callback will be called immediately after the start of the observation
d: {
handler: 'someMethod',
immediate: true
},
// you can pass array of callbacks, they will be called one-by-one
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
immediate: true & deep: true,
深度监听,可监听到对象、数组的变化
watch: {
propsWatched: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
customItemType: {
handler (val, oldVal) {
const newCustomItemType = {
region: {
isMultiple: true,
canDelete: true,
},
package: {
isMultiple: true,
canDelete: true,
},
...val,
};
console.log('newCustomItemType =', newCustomItemType);
return newCustomItemType;
},
immediate: true,
deep: true,
},
}
refs
https://vuejs.org/v2/api/#watch
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
vue watch All In One的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- LocalDateTime去掉T
最近在使用阿里巴巴的fastjson反序列化对象的时候,对象里面时间格式属性总是会多了一个T 2021-1-09T18:29:09.097 这个T是啥国际标准,但是我们的前端又不需要这个T,所以就要 ...
- spark开窗函数
源文件内容示例: http://bigdata.beiwang.cn/laoli http://bigdata.beiwang.cn/laoli http://bigdata.beiwang.cn/h ...
- day132:2RenMJ:MJ需求文档&MJ游戏流程&Egret白鹭引擎安装&TypeScript简要介绍
目录 1.麻将产品需求文档 2.麻将游戏流程 3.Egret白鹭引擎 4.TypeScript简要了解 5.TypeScript快速入门 1.麻将产品需求文档 1.麻将术语 1.名词术语 牌⼦: 序数 ...
- ArchLinux安装后所需要的环境和工具
ArchLinux安装后所需要的环境和工具 工具: Dolphin 文件管理器 ntfs-3G 移动硬盘挂载 octopi 实时检查更新 KDE Connect 手机电脑远程连接 DBeaver Co ...
- 数据备份与恢复 半持久化 全持久化 fork aof rdb Backing up Disaster recovery 备份 容灾
Redis数据备份与恢复 - 流年晕开时光 - 博客园 https://www.cnblogs.com/deny/p/11531355.html Redis数据备份与恢复 Redis所有数据都是保存在 ...
- HTML5 初学者一步一步攀爬 努力加油学习
Html 5 Html:Hyper Text MarKup Language超文本标签语言 Html:网页的源码 浏览器:"解释和执行"HTMl源码的工具 Head 标签内的信息用 ...
- Java面试题及解析
面试题 解析 1 2 3 Join Sleep-线程睡眠 Yiedld-线程让步 sleep与yield方法区别 isAlive 终止线程 面试题 1.下列单词属于java访问修饰符的有(A,B, C ...
- 《aspose》 word表格循环导出图片
废话不多说,直接上代码,网上代码都不能用,迫不得已,最后查询了官网的源码.上菜! 模板文件可以自己去github去下载. package com.aspose.words.examples.mail_ ...
- SLAM01
上周末发现了一个巨大的问题,就是我们目前构建的室内定位的方法中,一个基本的假设是错的----这就非常尴尬了. 于是乎赶紧抱一波佛脚,学习一下slam里相关的问题是怎么解决的,找找灵感. 结果看了个开头 ...
- 设计模式(九)——装饰者模式(io源码分析)
1 星巴克咖啡订单项目(咖啡馆): 1) 咖啡种类/单品咖啡:Espresso(意大利浓咖啡).ShortBlack.LongBlack(美式咖啡).Decaf(无因咖啡) 2) 调料:Milk.So ...