vue2.0中watch总结:普通监听和深度监听
watch:{} 是一个对象,一定要当成对象来用,可监听数据,是vue中数据发生变化进行处理的函数,
它有三个选项
第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
---------------------
1、普通监听

<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div> new Vue({
el: '#root',
data: {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
//普通的watch监听
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
})

当我们输入firstName
后,wacth
监听每次修改变化的新值,然后计算输出fullName
。
---------------------
2、handler方法和immediate属性
这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName
改变时才执行监听计算。那如果我们想要最初绑定的时候就执行,代码如下

watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
}

我们给 firstName 绑定了一个handler
方法,之前我们写的 watch 方法其实默认写的就是这个handler
,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler
。
而immediate:true
代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false
就跟我们以前的效果一样,不会在绑定的时候就执行。
---------------------
3、深度监听

<div>
<p>obj.a: {{obj.a}}</p>
<p>obj.a: <input type="text" v-model="obj.a"></p>
</div> new Vue({
el: '#root',
data: {
obj: {
a: 123
}
},
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true
}
}
})

当我们在在输入框中输入数据视图改变obj.a
的值时,我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe
),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter
转化过程,所以属性必须在 data
对象上存在才能让 Vue 转换它,这样才能让它是响应的。
默认情况下 handler 只监听obj
这个属性它的引用的变化,我们只有给obj
赋值的时候它才会监听到,比如我们在 mounted事件钩子函数中对obj
进行重新赋值:
mounted: {
this.obj = {
a: '456'
}
}
这样我们的 handler 才会执行,打印obj.a changed
。相反,如果我们需要监听obj
里的属性a
的值呢?这时候deep
属性就派上用场了!

watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
deep: true
}
}

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

watch: {
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
// deep: true
}
}

---------------------
5、注销
为什么要注销 watch
?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另外一个页面,那么原来的页面的 watch 其实就没用了,这时候我们应该注销掉原来页面的 watch 的,不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。
但是,如果我们使用下面这样的方式写 watch,那么就要手动注销了,这种注销其实也很简单,app.$watch
调用后会返回一个值,就是unWatch
方法,你要注销 watch 只要调用unWatch
方法就可以了。
const unWatch = app.$watch('text', (newVal, oldVal) => {
console.log(`${newVal} : ${oldVal}`);
}) unWatch(); // 手动注销watch
---------------------
vue2.0中watch总结:普通监听和深度监听的更多相关文章
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- vue2.0中router-link详解
vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- router-view在vue2.0中不显示,解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
- vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- vue2.0中,由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
随机推荐
- python+minicap(二)
一.push文件至手机中 minicap 的使用有很强的针对性,针对不同架构的CPU和SDK制作了不同的 "minicap" 和 "minicap.so" 文件 ...
- 2018年4月份,阿里最新的java程序员面试题目,仅供参考。
目录 技术一面(23问) 技术二面(3大块) 性能优化(21点) 项目实战(34块) JAVA方向技术考察点(15点) JAVA开发技术面试中可能问到的问题(17问) 阿里技术面试1 1.Java I ...
- jquery中的obj.attr()和obj.data
实例一 obj.attr('data-max-width','aa'): obj.data('max-width') 问题 data只会获取第一次select赋值的值 区别 .data每次是从jque ...
- 第十三篇 JS 操作table表格
JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...
- N1试卷常考词汇总结
免れる まぬがれる 免去,幸免 軽率 けいそつ 轻率,草率 捩れる ねじれる 拧劲儿,扭歪,弯曲 裂ける さける 裂开,破裂 避ける さける 躲避,避开 つまむ 挟,捏,掐 追及 ついきゅう 追上.追 ...
- 2019-11-29-asp-dotnet-core-通过图片统计-csdn-用户访问
title author date CreateTime categories asp dotnet core 通过图片统计 csdn 用户访问 lindexi 2019-11-29 08:26:58 ...
- 无Xwindow的linux系统安装VMware Tools
首先登陆linux 系统,最好是root用户: 然后挂载cdrom: mkdir -p /mnt/cdrom mount -t iso9660 /dev/cdrom /mnt/cdrom 进入cdro ...
- 25、Nginx常见典型故障
1.为什么nginx里面有的是浏览器渲染出的页面,有的时候就变成下载文件? 这个一个取决于服务端nginx,一个取决于你浏览器.在Nginx服务端的配置文件目录下,有一个mime.types 文件,内 ...
- lxml:底层C语言实现、高效地处理html
介绍 lxml也是一个用于筛选指定html内容的模块,pyquery就是基于lxml. 使用lxml主要需要了解xpath xpath语法 /:在子节点里面找 //:在子子孙孙节点里面找 //div: ...
- apache笔记
apache笔记 一)两种工作模式 Prefork和worker prefork模式: 一个进程响应一个请求 主进程生成多个工作进程,由工作进程一对一的去响应客户端的请求 过程: 1)用户空间有个具有 ...