先来看看官网的介绍:

官网介绍的很好理解了，也就是监听一个数据的变化，当该数据变化时执行我们的watch方法,watch选项是一个对象，键为需要观察的数据名，值为一个表达式(函数),还可以是一个对象，如果时对象可以包含如下几个属性:

handler        　　;对应的函数               　　　　           ;可以带两个参数，分别是新的值和旧的值，上下文为当前Vue实例
            immediate    　　;侦听开始之后是否立即调用 　　　　;默认为false
            sync        　　　;波尔值，是否同步执行，默认false     ;如果设置了这个属性，当数据有变化时就会立即执行了，否则放到下一个tick中排队执行

例如:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <p>{{message}}</p>
  11.         <button @click="test">测试</button>
  12.     </div>
  13.     <script>
  14.         var app = new Vue({
  15.             el:'#app',
  16.             data:{message:'hello world!'},
  17.             watch:{
  18.                 message:function(newval,val){
  19.                     console.log(newval,val)
  20.                 }
  21.             },
  22.             methods:{
  23.                 test:()=>app.message="Hello Vue!"
  24.             }
  25.         })
  26.     </script>
  27. </body>
  28. </html>

DOM渲染如下:

点击测试按钮后DOM变成了:

同时控制台输出:Hello Vue! hello world!

 源码分析

writer by:大沙漠 QQ:22969969

Vue实例后会先执行_init()进行初始化(4579行)时，会执行initState()进行初始化,如下:

  1. function initState (vm) {     //第3303行
  2.   vm._watchers = [];
  3.   var opts = vm.$options;
  4.   if (opts.props) { initProps(vm, opts.props); }
  5.   if (opts.methods) { initMethods(vm, opts.methods); }
  6.   if (opts.data) {
  7.     initData(vm);
  8.   } else {
  9.     observe(vm._data = {}, true /* asRootData */);
  10.   }
  11.   if (opts.computed) { initComputed(vm, opts.computed); }
  12.   if (opts.watch && opts.watch !== nativeWatch) {            //如果传入了watch 且 watch不等于nativeWatch(细节处理，在Firefox浏览器下Object的原型上含有一个watch函数)
  13.     initWatch(vm, opts.watch);                                  //调用initWatch()函数初始化watch
  14.   }
  15. }
  1. function initWatch (vm, watch) {    //第3541行
  2.   for (var key in watch) {                        //遍历watch里的每个元素
  3.     var handler = watch[key];
  4.     if (Array.isArray(handler)) {
  5.       for (var i = 0; i < handler.length; i++) {
  6.         createWatcher(vm, key, handler[i]);
  7.       }
  8.     } else {
  9.       createWatcher(vm, key, handler);                //调用createWatcher
  10.     }
  11.   }
  12. }
  13.  
  14. function createWatcher (                          //创建用户watcher
  15.   vm,
  16.   expOrFn,
  17.   handler,
  18.   options
  19. ) {
  20.   if (isPlainObject(handler)) {                     //如果handler是个对象，则将该对象的hanler属性保存到handler里面 　　　　;这里对应watch的值为对象的情况
  21.     options = handler;
  22.     handler = handler.handler;
  23.   }
  24.   if (typeof handler === 'string') {
  25.     handler = vm[handler];
  26.   }
  27.   return vm.$watch(expOrFn, handler, options) 　　　 //最后创建一个用户watch
  28. }

Vue原型上的$watch构造函数如下:

  1.   Vue.prototype.$watch = function (     //第3596行
  2.     expOrFn, 　　　　　　　　　　　　　　　　　　//监听的属性，例如例子里的message
  3.     cb, 　　　　　　　　　　　　　　　　　　　　  //对应的函数
  4.     options 　　　　　　　　　　　　　　　　　　  //选项
  5.   ) {
  6.     var vm = this;
  7.     if (isPlainObject(cb)) {
  8.       return createWatcher(vm, expOrFn, cb, options)
  9.     }
  10.     options = options || {};
  11.     options.user = true;                                      //设置options.user为true,表示这是一个用户watch
  12.     var watcher = new Watcher(vm, expOrFn, cb, options);      //创建一个Watcher对象
  13.     if (options.immediate) { 　　　　　　　　　　　　　　　　　　　//如果有immediate选项，则直接运行 　　　　;这里对应watch的值为对象且含有immediate属性的情况
  14.       cb.call(vm, watcher.value);
  15.     }
  16.     return function unwatchFn () {
  17.       watcher.teardown();
  18.     }
  19.   };
  20. }

侦听器对应的用户watch的user选项是true的，全局Watcher如下:

  1. var Watcher = function Watcher ( //第3082行
  2.   vm,
  3.   expOrFn,                              //侦听的属性:message
  4.   cb,                                   //对应的函数
  5.   options,
  6.   isRenderWatcher
  7. ) {
  8.   this.vm = vm;
  9.   if (isRenderWatcher) {
  10.     vm._watcher = this;
  11.   }
  12.   vm._watchers.push(this);
  13.   // options
  14.   if (options) {
  15.     this.deep = !!options.deep;
  16.     this.user = !!options.user;                             //用户watch这里的user属性为true
  17.     this.lazy = !!options.lazy;
  18.     this.sync = !!options.sync;
  19.   } else {
  20.     this.deep = this.user = this.lazy = this.sync = false;
  21.   }
  22.   this.cb = cb;
  23.   this.id = ++uid$1; // uid for batching
  24.   this.active = true;
  25.   this.dirty = this.lazy; // for lazy watchers
  26.   this.deps = [];
  27.   this.newDeps = [];
  28.   this.depIds = new _Set();
  29.   this.newDepIds = new _Set();
  30.   this.expression = expOrFn.toString();
  31.   // parse expression for getter
  32.   if (typeof expOrFn === 'function') {
  33.     this.getter = expOrFn;
  34.   } else {                                                  //侦听器执行到这里，
  35.     this.getter = parsePath(expOrFn);                       //get对应的是parsePath()返回的匿名函数
  36.     if (!this.getter) {
  37.       this.getter = function () {};
  38.       "development" !== 'production' && warn(
  39.         "Failed watching path: \"" + expOrFn + "\" " +
  40.         'Watcher only accepts simple dot-delimited paths. ' +
  41.         'For full control, use a function instead.',
  42.         vm
  43.       );
  44.     }
  45.   }
  46.   this.value = this.lazy
  47.     ? undefined
  48.     : this.get();                                           //最后会执行get()方法
  49. }; 
  50.  
  51. function parsePath (path) {             //解析路劲
  52.   if (bailRE.test(path)) {
  53.     return
  54.   }
  55.   var segments = path.split('.');
  56.   return function (obj) {               //返回一个函数，参数是一个对象
  57.     for (var i = 0; i < segments.length; i++) {
  58.       if (!obj) { return }
  59.       obj = obj[segments[i]];
  60.     }
  61.     return obj
  62.   }
  63. }

执行Watcher的get()方法时就将监听的元素也就是例子里的message对应的deps将当前watcher(用户watcher)作为订阅者，如下:

  1. Watcher.prototype.get = function get () {     //第3135行
  2.   pushTarget(this);                                 //将当前用户watch保存到Dep.target总=中
  3.   var value;
  4.   var vm = this.vm;
  5.   try {
  6.     value = this.getter.call(vm, vm);               //执行用户wathcer的getter()方法，此方法会将当前用户watcher作为订阅者订阅起来
  7.   } catch (e) {
  8.     if (this.user) {
  9.       handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
  10.     } else {
  11.       throw e
  12.     }
  13.   } finally {
  14.     // "touch" every property so they are all tracked as
  15.     // dependencies for deep watching
  16.     if (this.deep) {
  17.       traverse(value);
  18.     }
  19.     popTarget();                                    //恢复之前的watcher
  20.     this.cleanupDeps();
  21.   }
  22.   return value
  23. };

当我们点击按钮了修改了app.message时就会执行app.message对应的访问控制器的set()方法，就会执行这个用户watcher的update()方法，如下:

  1. Watcher.prototype.update = function update () {   //第3200行 更新Watcher
  2.   /* istanbul ignore else */
  3.   if (this.lazy) {
  4.     this.dirty = true;
  5.   } else if (this.sync) {                           //如果$this.sync为true，则直接运行this.run获取结果 　　　　;这里对应watch的值为对象且含有sync属性的情况
  6.     this.run();
  7.   } else {
  8.     queueWatcher(this);                             //否则调用queueWatcher()函数把所有要执行update()的watch push到队列中
  9.   }
  10. };
  1. Watcher.prototype.run = function run () {     //第3215行 执行，会调用get()获取对应的值
  2.   if (this.active) {
  3.     var value = this.get();
  4.     if (
  5.       value !== this.value ||
  6.       // Deep watchers and watchers on Object/Arrays should fire even
  7.       // when the value is the same, because the value may
  8.       // have mutated.
  9.       isObject(value) ||
  10.       this.deep
  11.     ) {
  12.       // set new value
  13.       var oldValue = this.value;
  14.       this.value = value;
  15.       if (this.user) {                        //如果是个用户 watcher
  16.         try {
  17.           this.cb.call(this.vm, value, oldValue);       //执行这个回调函数 vm作为上下文 参数1为新值 参数2为旧值 　　　　也就是最后我们自己定义的function(newval,val){ console.log(newval,val) }函数
  18.         } catch (e) {
  19.           handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
  20.         }
  21.       } else {
  22.         this.cb.call(this.vm, value, oldValue);
  23.       }
  24.     }
  25.   }
  26. };

对于侦听器来说，Vue内部的流程就是这样子

Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解的更多相关文章

  1. Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解

    先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...

  2. Vue.js 源码分析(四) 基础篇 响应式原理 data属性

    官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...

  3. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  4. Vue.js 源码分析(十) 基础篇 ref属性详解

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...

  5. Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解

    Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...

  6. Vue.js 源码分析(二) 基础篇 全局配置

    Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies        ;自定义合并策略的选项silent         ...

  7. Vue.js 源码分析(九) 基础篇 生命周期详解

    先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated   .beforeDes ...

  8. Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...

  9. Vue.js 源码分析(五) 基础篇 方法 methods属性详解

    methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...

随机推荐

  1. iOS 常用算法之设计一个算法,验证某字符是否为合法IPV4字符

    浅析 : 一个IPV4字符由3个大于0小于255的数字 以及 3个点构成, 所有我们需要判断小数点数量是否满足条件, 以及小数点隔开的每部分是否满足条件即可. 思路: 1. 校验是否有3个小数点; 2 ...

  2. Python用python-docx读写word文档

    python-docx库可用于创建和编辑Microsoft Word(.docx)文件.官方文档:https://python-docx.readthedocs.io/en/latest/index. ...

  3. 【JavaWeb】JSTL标签库

    JSTL标签库 JSTL标准标签库: JSTL用于简化JSP开发,提高代码的可读性与可维护性: JSTL由SUN(Oracle)定义规范,由Apache Tomcat团队实现: 引用JSTL核心库 核 ...

  4. [20190524]DISABLE TABLE LOCK(12c).txt

    [20190524]DISABLE TABLE LOCK(12c).txt --//如果禁止table lock时,一些ddl操作会被禁止.但是我有点吃惊的是增加字段不受限制.--//链接:http: ...

  5. C学习笔记（9）--- 预处理器，头文件

    1.预处理器: 预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤.简言之,C 预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际编译之前完成所需的预处理. 我们将把 C 预处理 ...

  6. python27期前端

    第一天笔记:HTML:是一种标识性的语言css:层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言JavaScript:简称“JS”,是一种属于网络的脚本语言 常用来为网页添加各式各样的动 ...

  7. Deformable Convolutional Networks

    1 空洞卷积 1.1 理解空洞卷积 在图像分割领域,图像输入到CNN(典型的网络比如FCN)中,FCN先像传统的CNN那样对图像做卷积再pooling,降低图像尺寸的同时增大感受野,但是由于图像分割预 ...

  8. react中使用动画

    1. css原生动画的使用 import React, { useState } from "react" import "./index.css" funct ...

  9. 2019 SDN阅读作业（2）

    1.过去20年中可编程网络的发展可以分为几个阶段?每个阶段的贡献是什么? 可编程网络的发展可以分为以下三个阶段: (1)主动网络(Active networking,20世纪90年代中期到21世纪初) ...

  10. C 函数与指针（function & pointer）

    C 函数与指针(function & pointer) /* * function.c * 函数在C中的使用 * */ #include <stdio.h> int noswap( ...