接我上篇博客的例子:

在上面代码中,当我们修改 firstName 或 lastName 后,watch 监听每次修改变化的新值,然后计算输出 fullName;此时 watch 的一个缺点是,最初绑定的时候是不会执行的,要等到 firstName 或 lastName 改变时才执行监听计算。

那么当我们想要一开始就让他最初绑定的时候就执行怎么办呢?此时我们就需要改写一下 watch 方法,如下(immediate:true 属性):

我们可以看到,在此处多了一个 handler 方法,之前我们写的 watch 方法其实默认写的就是这个 handler,vue.js 会去处理这个逻辑,最终编译出的其实就是这个 handler;

而 immediate:true 代表如果在 watch 里声明了 firstName 或 lastName 之后,就会立即先去执行里面的 handler 方法,如果为 false 就跟我们之前的效果不一样,不会在绑定的时候执行。

deep属性

watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听,一般用于深度监听对象属性;

实际场景展现:当我们要监听data 里面的对象属性时;

场景分析:当我们在输入框中输入数据试图改变 object.aaa 的值时,我们发现是无效的。受现代 Javascript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 vue 转换它,这样才能让它是响应的。

默认情况下 handler 只监听 object 这个属性它的引用的变化,我们只有给 object 赋值的时候它才会监听到,比如我们在 mounted 事件钩子函数中对 object 进行重新赋值:

只有在 mounted 事件钩子中重新对对象属性赋值时,才会触发 watch 里面的 handler 方法,打印出 object.aaa changed;上面方法只适用于监听整个对象发生变化的场景;

那如果当我们需要监听 object 里的属性 aaa 的值时,此时 deep 属性就派上用场了~

deep:true 的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上整个监听器,但是这样性能开销就会非常大了,任何修改 object 里面任何一个属性都会触发整个监听器里的 handler。当然,为了性能优化,我们可以是使用字符串形式监听,这样 vue.js 才会一层一层解析下去,直到遇到属性 aaa ,然后才给 a 设置监听函数;优化后代码如下:

合理运用watch监听路由(我们可以使用 watch 来进行路由的监听):

注销watch

为什么要注销 watch ?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另一个页面,那么原来的页面的 watch 其实就没用了,这时候我i没呢应该注销掉原来页面的 watch 的,不然的话可能会导致内置溢出。不过我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁;

但是,如果我们使用下面这样的方式写 watch ,那么就要手动注销了,这种注销其实也很简单

vue.js 之 watch 详解的更多相关文章

  1. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  2. vue.js自定义指令详解

    写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义 ...

  3. Vue组件通信方式全面详解

    vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...

  4. 《Node.js开发实战详解》学习笔记

    <Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...

  5. Js apply 方法 详解

    Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  6. ES6,ES2105核心功能一览,js新特性详解

    ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...

  7. Js apply()使用详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  8. Js apply方法详解,及其apply()方法的妙用

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  9. JS hashMap实例详解

    链接:http://www.jb51.net/article/85111.htm JS hashMap实例详解 作者:囧侠 字体:[增加 减小] 类型:转载 时间:2016-05-26我要评论 这篇文 ...

随机推荐

  1. system generator学习笔记【02】

    作者:桂. 时间:2018-05-20  23:28:04 链接:https://www.cnblogs.com/xingshansi/p/9059668.html 前言 继续学习sysgen.接触s ...

  2. MySQL和Mongodb的区别与应用场景对比

    MySQL是关系型数据库 优势: 在不同的引擎上有不同 的存储方式. 查询语句是使用传统的sql语句,拥有较为成熟的体系,成熟度很高. 开源数据库的份额在不断增加,mysql的份额页在持续增长. 缺点 ...

  3. docker 命令集

    1.提交本地镜像到远程cd to dockerfile directorysudo docker build -t orange5 ./sudo docker psdocker tag 1adec2c ...

  4. [HDFS Manual] CH2 HDFS Users Guide

    2 HDFS Users Guide 2 HDFS Users Guide 2.1目的 2.2.概述 2.3.先决条件 2.4. Web Interface 2.5. Shell Command 2. ...

  5. SQL Server 2016新特性:In-Memory OLTP

    存储格式修改 在2014,2016中修改了内存优化表的存储格式,新的格式是序列的并且the database is restarted once during database recovery.   ...

  6. bash计算上下行数据差值

    for i in {1..60000}; do echo "`date +'%F %T'` `df /dev/md0 | grep 'data1'` "; sleep 1; don ...

  7. WebStorm Chinese Language Pack(中文语言包

    https://github.com/ewen0930/WebStorm-Chinese http://ewen0930.github.io/2016/04/webstorm-chinese-lang ...

  8. 使用Nginx反向代理绕过域名备案详解

    之前笔者在景安云搞过一个Wordpress博客,然后域名备案也是在景安云上面搞的,后来又搞了一个阿里云的服务器,想把博客迁移到阿里云并且使用Ghost博客,然后使用二级域名链接到阿里云,结果出事了.景 ...

  9. Spring data jpa JavassistLazyInitializer 不仅是Json序列化问题.以及解决办法

    最近偷点时间更新一下框架,使用SpringBoot2.0 整套一起更新一下,发现些小问题 Spring data jpa getOne 返回的是代理对象,延迟加载的,ResponseBody成Json ...

  10. C# windows GDI+仿画图 绘图程序设计

    C# windows GDI+仿画图 绘图程序设计 1.介绍 这里分享一个简单的画图程序 原作者:author: ping3108@163.com 2.程序主窗体设计 3.程序设计 本程序工程使用VS ...