watch监听(数组或者对象)
时间:2019-06-12
本文章向大家介绍watch监听(数组或者对象),主要包括watch监听(数组或者对象)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
handler:监听数组或对象的属性时用到的方法
deep:深度监听,为了发现对象内部值的变化,可以在选项参数中指定 deep:true 。注意监听数组的变动不需要这么做。
immediate: 在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
data() { return {
frontPoints: 0
} }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } }
data() { return { winChips: new Array(11).fill(0) } }, watch: { winChips: { handler(newValue, oldValue) { for (let i = 0; i < newValue.length; i++) { if (oldValue[i] != newValue[i]) { console.log(newValue) } } }, } }
3、对象的watch
data() { return { bet: { pokerState: 53, pokerHistory: 'local' } } }, watch: { bet: { handler(newValue, oldValue) { console.log(newValue) }, deep: true } }
4、对象具体属性的watch[活用computed]
data() { return { bet: { pokerState: 53, pokerHistory: 'local' } } }, computed: { pokerHistory() { return this.bet.pokerHistory } }, watch: { pokerHistory(newValue, oldValue) { console.log(newValue) } }
watch擅长处理的场景:一个数据影响多个数据
computed擅长处理的场景:一个数据受多个数据影响
6、method和computed触发条件不同
computed只提供了缓存的值,而没有重新计算
只有符合:1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。
而methods下的数据,是每次都会进行计算的
作者:乖乖果效36
链接:https://www.jianshu.com/p/29dc0c079949
原文地址:https://www.cnblogs.com/listen9436/p/11010004.html
- ASP.NET MVC三个重要的描述对象:ControllerDescriptor和ActionDescriptor的创建
- .NET Core的日志[5]:利用TraceSource写日志
- 物联网芯片正在积极开发 明年将得到爆发
- 韩国全球首测5G网络下自动驾驶 为汽车安全保驾护航的竟是路灯
- 通过与Quickbuild和Mist.io的持续集成实现云管理和使用监控
- .NET Core的文件系统[1]:读取并监控文件的变化
- ASP.NET MVC以ValueProvider为核心的值提供系统: ValueProviderFactory
- 云本机应用程序成熟度的模型
- 如何利用ETW(Event Tracing for Windows)记录日志
- 如何利用ETW(Event Tracing for Windows)记录日志
- 如何利用ETW(Event Tracing for Windows)记录日志
- ASP.NET MVC以ValueProvider为核心的值提供系统: DictionaryValueProvider
- ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)
- .NET Core的文件系统[2]:FileProvider是个什么东西?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode27|最长公共前缀
- 搭建简易的物联网服务端和客户端-蓝牙控制(十六)
- java基础|CollectionUtils工具的基本使用
- LeetCode36|二叉树的右视图
- LeetCode35|完全二叉树的节点个数
- LeetCode34|数组中的第k个最大元素
- LeetCode33|寻找重复数
- LeetCode32|前k个高频元素
- LeetCode31|打印从1到最大的n位数
- LeetCode30|翻转单词顺序
- LeetCode28|最后一个单词的长度
- VS2015创建UWP报“vstemplate文件引用的向导类”错误
- 政采云趣味题
- LeetCode40|有序数组中的单一元素
- 搭建简易的物联网服务端和客户端-Cortana控制(十七)