watch

watch可以监听datacomputed中值的变化。

watch在实例对象作用域中可以监听实例对象的数据,即var vm = new Vue(options)时作为配置对象属性传入。监听组件作用域内的数据,可以在组件的配置选项中传入。

基本语法形式:

  • key: porp | obj.prop | arr[idx] | computed
  • value: String | Function | Array | Object( handler | [deep | immediate])
  • retuan: Function

点击查看DEMO:例子

var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
},
h: [6,7,8]
},
computed: {
i: function () {
return a * 2
}
}
watch: {
// key: porp | obj.prop | arr[idx] | computed
a: 'setA',
'e.f.g': 'setA',
e: {
hander: function (newVal, oldVal) { /*do something */ },
deep: true,
}
'h[1]': function (newVal, oldVal) { /*对数据项监听无效 */ }
i: function (newVal, oldVal) { /*do something */ } // value: String | Function | Object | Array
b: function (newVal, oldVal) {
console.log('new: %s, old %s', newVal, oldVal)
},
c: {
// handler is neccessary, deep and immediate are selectable
hander: function (newVal, oldVal) { /*do something*/ },
deep: true,
immediate: true,
},
d: [
function handle1(newVal, oldVal) { /*do something */ },
{
hander: function (newVal, oldVal) { /*do something */ },
deep: true,
}
],
},
methods: {
setA: function (newVal, oldVal) {
console.log('watch with data by method')
}
}
})

watch 的使用

  • 监听data对象中的某个对象属性
  • 监听回调函数可用的参数(newVale, oldVale)
  • 立即执行一次回调immediate: true
  • 深度监听deep: true
  • 注销监听器unWatch()

监听对象某个属性

data数据中我们会存入对象,有时只想监听当对象某一个属性值变化,此时可以在监听器的名称key中,使用.操作符,就像访问这个对象的属性一样。但是必须用字符串符号包裹。

new Vue({
data: {
e: {
f: {
g: 5
}
},
h: [6,7,8]
},
watch: {
'e.f.g': function () {
// do something
},
'h[1]': function () { /*do something */ }
}
})

深度监听 deep: true

默认情况下,监听某个对象时,只有当整个对象引用改变时才触发监听回调。但有时,我们期望这个对象的任意一个属性值发生变化都能触发监听回调。而不是监听整个对象引用变化或仅仅某一个属性值变化。此时我们可以在对象写法中传入deep:true的配置项

下例的例子,不管是e.n变化,还是e.f.g变化,又或是e.fe变化都会触发回调。

new Vue({
data: {
e: {
f: {
g: 5
},
n: 6
},
},
watch: {
e: {
handler: function { /* do something */},
deep: true
}
}
})

立即执行一次回调immediate: true

watch最初绑定的时候,默认是不会马上执行的,要等到监听值变化后才响应。那如果想要初次绑定成功就马上执行一次回调,怎么办呢?我们需要传入immediate=true选项。

watch: {
e: {
handler: function { /* do something */},
deep: true,
immediate: true,
}
}
深度监听、立即执行都需要采用对象写法形式传入配置

监听回调函数可用的参数(newVale, oldVale)

当监听回调执行时,会被传入两个参数:

  • 监听对象当前值(已改变的新值)
  • 监听对象原来的值
 b: function (newVal, oldVal) {
// 此时 this.b === newValue
},

注销监听

为什么要注销 watcher?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另外一个页面,那么原来的页面的 watcher 其实就没用了,这时候我们应该注销掉原来页面的 watch,不然的话可能会导致内置溢出。

好在我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。在beforeDestory阶段实例对象的所有属性和事件都被销毁。

const app = new Vue({
template: '<div id="root">{{text}}</div>',
data: {
text: 0
},
watch: {
text(newVal, oldVal){
console.log(`${newVal} : ${oldVal}`);
}
}
});

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

const unWatch = app.$watch('text', (newVal, oldVal) => {
console.log(`${newVal} : ${oldVal}`);
}) unWatch(); // 手动注销watch

app.$watch调用后会返回一个值,是函数,就是unWatch方法,只需要执行该方法即可完成注销当前监听器实例。

unWatch方法实际上是每个监听器实例生成时继承的方法teardown(),见上面监听器初始化最后阶段示例。

像上面这种监听单个数据项变化,往往不建议使用,因为有比监听器更好的方式来处理,即计算属性。如果需要监听数据赋值的变化,可以使用计算属性的setter是更好的方式。

但是监听器很适合处理异步操作。比如数据请求的回调、或页面路由的变化。

在实际项目中常常需要在全局应用实例作用域内监听各页面路由切换的变化。

var vm = new Vue({
watch: {
'$route.path': function (to, from) {
// do something
}
}
})

比监听路由变化更好方式是使用路由守卫。比如上例中可以设置全局路由守卫beforeEachafterEach

watch 的源码解读

new Vue()创建一个实例的初始化阶段,即在生命周期函数beforeCreatecreated之间会初始化传入的选项options中的一系列属性值。

watch的初始化阶段包括:

判断`value`是不是数组  --> 判断`value`是不是对象 --> 判断`key`是不是函数 --> 执行初始化
  • initwatch函数中判断当前watchvalue是不是数组,如果是数组就遍历数据取出每一个数组项传入createWathcher函数,如果不是数组,直接传入。
function initWatch(vm, watch) {
for (const key in watch) {
const handler = watch[key]
if (Array.isArray(handler)) {
for (let i = 0; i < hander.length; i++) {
createWatcher(vm, key, handler[i])
}
} else {
createWatcher(vm, key, handler)
}
}
}
  • createWathcer函数中判断value是不是对象,如果是对象取出obj.handler属性值赋值给handler,其它属性值如deep/immediate作为整体赋值给options。如果是字符串则取method,如果是函数直接使用。
function createWatcher(vm, expOrFn, handler, options) {
if (isPlainObject(handler)) {
options = handler
handler = handler.handler
}
if (typeof handler === 'string') {
handler = vm[handler]
}
return vm.$watch(expOrFn, handler, options)
}
  • 执行vm.$watch(expOrFn, handler, options)函数。会创建一个watcher实例,并且判断是否存在immediate,为真则立即执行一次回调。如果没有则当监听对象变化时再执行回调。
Vue.prototype.$watch = function (expOrFn, cb, options) {
const vm = this
options = options || {}
const watcher = new Watcher(vm, expOrFn, cb, options) if (options.immediate) {
cb.call(vm, watcher.value)
}
// 返回监听器实例的注销方法teardown
return function unWatchFn() {
watcher.teardown()
}
}
  • 在类Wathcer中除了定义wathcer的行为,还做了以下两件事:

    • 也会判断当前key是不是字符串还是函数,如果是函数,则取计算属性中函数直接赋值,如果是字符串,则解析该字符串获取监听的值。
    • 判断options的属性中是否存在deep值,为真时则对监听对象实行深度监听,否则只监听当前对象。
    export default class Watcher {
constructor (vm, expOrFn, cb, options) {
this.vm = vm
this.cb = cb if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
} if (options) {
this.deep = !!options.deep
} else {
this.deep = false
}
}
}

vue-learning:18 - js - watch的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  2. vue中config/index.js:配置的详细理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  3. vue进阶:vuex(数据池)

    非父子组件传值 vuex 一.非父子组件传值 基于父子组件通信与传值实现非父子组件传值的示例关键代码: <template> <div> <!-- 学员展示 --> ...

  4. iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果

    具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...

  5. iosselect:一个js picker项目,在H5中实现IOS的下拉效果

    iosselect是在webapp下的一个picker组件,可以轻松实现各类选择器效果.比如地区选择 时间选择 日期选择等. 下面是一个地址选择器demo截图,可以访问:http://zhoushen ...

  6. Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验

    安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战:个人博客第一版(axios+router)

    前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

  9. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

随机推荐

  1. Directx11教程(63) tessellation学习(5)

    原文:Directx11教程(63) tessellation学习(5)        TS中生成细分后顶点的u,v,{w}坐标,我们根据控制点和u,w,{w}坐标生成新的顶点位置,在前面四边形的细分 ...

  2. oralce如何修改默认的XDB监听端口

    Oracle9i默认的XML DB把HTTP的默认端口设为8080,这是一个太常用的端口了,很多别的WebServer都会使用这个端口, 如果我们安装了它,最好修改一下,避免冲突,如果不使用呢,就最好 ...

  3. Linux常用命令1 文件处理命令

    1.命令格式 1.用中括号括起来的内容都不是必填内容,碧如上图的选项和参数,有些命令不写选项和参数也可以执行 2.注意图中的简化选项与完整选项说明,完整选项要两个横杆-- 2.目录处理命令ls 1.文 ...

  4. Hdu 4291

    题目链接 这道题, 给我的最大的知识点就是对于去模运算,一定可以找到循环节,这题只不过是嵌套了两层,可以分别找到循环节.关于这题如何找循环节的,直接暴力,网上也有很多. 找到循环节之后,另一个知识点就 ...

  5. 【Django入坑之路】Form组件

    1:From组件的简单使用 1创建From: #导入模块 from django import forms from django.forms import fields, widgets # 导入自 ...

  6. oracle HEXTORAW(c1)

    [功能]将一个十六进制构成的字符串转换为二进制 [参数]c1,十六进制的字符串 [返回]字符串 [示例] select HEXTORAW('A123')  from dual;

  7. 02docker简单使用和配置(网络、存储和Hub)

    四:网络 1:命名容器 在各种docker命令中,可以通过名字中找到对应的容器.之前创建的容器都是由docker自动命名的,可以在docker  run中,通过--name参数指定容器的名字.比如: ...

  8. MySQL性能分析, mysql explain执行计划详解

    MySQL性能分析 MySQL性能分析及explain用法的知识是本文我们主要要介绍的内容,接下来就让我们通过一些实际的例子来介绍这一过程,希望能够对您有所帮助. 1.使用explain语句去查看分析 ...

  9. window执行python文件

    @echo offD:cd D:\pythonstart python2 del.pyexit

  10. Kafka数据迁移MaxCompute最佳实践

    摘要: 本文向您详细介绍如何使用DataWorks数据同步功能,将Kafka集群上的数据迁移到阿里云MaxCompute大数据计算服务. 前提条件 搭建Kafka集群 进行数据迁移前,您需要保证自己的 ...