侦听对象 watch

处理依赖,Vue还提供了另外一种处理依赖的方法:侦听对象。
再computed属性里面,我们设置需要计算的属性,而在函数里面设置计算这个属性的逻辑,侦听属性采用的则是另外一种机制,把想要侦听的属性名称设置为键,这里就是counter这个键,必须与属性名称相同,这里就是data属性中的counter属性,在函数中指定counter属性变化时需要执行的代码,Vue会自动把属性变化之后的数值传递给该函数,以允许我们对属性变化做出反应,所以这里我也可以通过设置一个全局输出变量来实现,有时可能确实得这样,比如属性不能像这里这样计算,然后再其它地方设置变量值,虽然这样做也可以,但是我会马上告诉你最佳方法还是尽量再允许的情况下多使用计算属性,因为这样做优化最好,比如使用缓存等等,通过减少不必要的任务,让Vue允许更快,尽管有时候你需要对每一次变化做出反应,另外一个计算属性不能实现的功能是,执行异步任务,计算属性必须同步执行,也就是说再compute的函数里面,必须立即返回一个返回值,中间不能访问服务器或者执行异步任务,如果需要执行异步任务,或者像前面一样,需要再属性更新时执行的代码,那就不能用计算属性来解决了。这时你就可以使用侦听对象。比如你打算两秒后充值counter属性值,再watch:counter里面增加一个setTimeout()方法,注意,因为这个函数再回调内的闭包里,所以必须再另外一个变量中存储Vue实例,this让我们可以方便第访问实例中的各个属性,但是它必须放在一个变量里,Vue实例的属性以及其它的数据,再Vue实例的默认对象和函数里面都可以通过this直接访问,但是再回调闭包里面则不行。

查看效果,改变counter值,但是两秒后被充值,因为设置了侦听对象,所以counter一变化就会调用函数,执行这部分代码就可以访问异步任务了。

原文地址:http://blog.51cto.com/13577938/2338401

时间: 2024-12-15 06:49:26

侦听对象 watch的相关文章

Android Listener侦听的N种写法

Android中,View的Listener方法,在是否使用匿名类匿名对象时,有各种不同的写法. OnClickListener和其他Listener方法一样,都是View类的接口,重载实现后就能使用,其接口定义如下: [java] view plaincopyprint? public interface OnClickListener { /** * Called when a view has been clicked. * * @param v The view that was cli

js事件流、事件处理程序/事件侦听器

1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,为截获事件提供了机会.然后是实际的目标接收到

SQL Server 2012 AlwaysOn高可用配置之九:添加侦听器

9.   添加侦听器 9.1 点击"添加侦听器" 9.2 输入侦听器名称和端口,点击"添加" 9.3 输入侦听器IP,点击"确定" 9.4 点击"确定" 9.5 成功创建完成侦听器后如下" 9.6 在AD中自动生成相应的对象 9.7 在DNS自动生成相应的DNS记录 SQL Server 2012 AlwaysOn高可用配置篇成功完结 -----------------------------------------

百度地图实时侦听鼠标滚轮获取地图zoom缩放级别

百度地图api提供的获取地图缩放级别的方法比较单一,就一个getZoom()方法,这个方法能够获取一次地图缩放级别,后面随着鼠标滚轮的滚动,地图缩放级别被改变,就无法再获取地图缩放级别了,具体api参考:http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9E%81%E9%80%9F%E7%89%88%E6%A0%B8%E5%BF%83%E7%B1%BB/map 如题,若想实时获取地图的缩放级别,小博主是这样做的,

浅析cocos2d-x 2.x到3.x事件侦听设计变化原因之一

DionysosLai 2015/2/28 对于事件侦听的设计,cocos2d-x从2.x到3.x发生了根本性的变化,一直以来对此,只是单纯的使用考虑如何构建自己的游戏代码,并未对其二者设计孰优孰劣进行探究.只是前段时间在做一个新游戏时,关于2.x的触摸事件发现了一个设计不人性化问题,本想向cocos2dx官网反应,但测试3.x时,并未发现这个问题.对此,本文细述这个问题,分析二者设计的不同,同时希望抛砖引玉. 简单阐述2.x与3.x的事件侦听不同点: 在2.x中,需要注册一个事件侦听. 在3.

Android事件侦听器回调方法浅谈

http://developer.51cto.com/art/201001/180846.htm Android事件侦听器作为视图View类的接口,其中包含有不少回调方法,比如:onClick():onLongClick():onFocusChange():onKey():onTouch():onCreateContextMenu()等等. Android操作系统中,对于事件的处理是一个非常基础而且重要的操作.许多功能的实现都需要对相关事件进行触发才能达到自己的目的.比如Android事件侦听器

Socket基础之-启动异步服务侦听

本文主要是以代码为主..NET技术交流群 199281001 .欢迎加入. //通知一个或多个正在等待的线程已发生事件. ManualResetEvent manager = new ManualResetEvent(false); 1 //负责监听的套接字 private Socket socketServer; 2 /// <summary> 3 /// 启动服务 4 /// </summary> 5 private void CreateSocketService() 6 {

Proxy监听对象的数据变化,处理绑定数据很有用

Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作.一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处. var peo = { name: 'zhangsan', salary: 27 }; //interceptor 拦截 var interceptor = { set: function (recObj, key, value) { console.log(key, 'is changed to', value); //name is cha

stopImmediatePropagation和stopPropagation (事件、防止侦听)

参考: ActionScript 3.0 Step By Step系列(六):学对象事件模型,从点击按扭开始 actionscript宝典 一.事件模型 egret中的事件模型和flash是一样的,但是年代太久了,都忘了. 之前貌似是看殿堂之路还是哪本书,记不清了. 二.测试 下面测试一下,当有3个层级的对象监听事件时,事件触发的顺序. 创建3个方块,分别为out.mid.inner. 层级关系为out最外层,mid中间层,inner最里层. class HomeScene extends eu