vue中wath的源码实现
前言
阅读本节,需要理解vue的数据驱动原理。
看这样一段代码
new Vue({ data: { msg: 'hello', say: 'hello world', }, watch: { msg(newVal) { this.say = newVal + ' world'; } } })
vue的data包括2个属性msg和say,watch中监听msg并更新say的值。
源码实现
1. new Vue
function Vue (options) { if ("development" !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } this._init(options); }
new Vue会执行原型上的_init方法, _init方法中hi调用 initState,这个方法会初始化所有状态相关内容
2. initWatch
initStatus会判断如果我们定义了watch则执行initWatch
function initWatch (vm, watch) { for (var key in watch) { var handler = watch[key]; if (Array.isArray(handler)) { for (var i = 0; i < handler.length; i++) { createWatcher(vm, key, handler[i]); } } else { createWatcher(vm, key, handler); } } }
这段代码意思是如果watch声明了一个数组,则遍历数组并调用createWatcher,如果不是数组就直接调用createWatcher传递过去。这就证明,watch我们可以声明多个处理函数。
3. createWatcher
createWatcher主要工作是处理传入值,传入不同的值,做不同的兼容处理
function createWatcher ( vm, expOrFn, handler, options ) { // 如果handler是对象,则获取handler下面的handler属性当作watch的执行函数 if (isPlainObject(handler)) { options = handler; handler = handler.handler; } // 如果handler是字符串,则获取vue原型上的方法 if (typeof handler === 'string') { handler = vm[handler]; } // 调用vue原型上的$watch return vm.$watch(expOrFn, handler, options) }
通过以上我们可以看出,watch定义有很多种类型,比如:
new Vue({ watch: { // 字符串 test1: 'handleTest', // 对象 test2: { handler(newVal) { // .... } } }, methods: { handleTest(newVal) { // ... } } })
4. vm.$watch
Vue.prototype.$watch = function ( expOrFn, cb, options ) { var vm = this; if (isPlainObject(cb)) { return createWatcher(vm, expOrFn, cb, options) } options = options || {}; options.user = true; // new 一个Watcher实例 var watcher = new Watcher(vm, expOrFn, cb, options); if (options.immediate) { cb.call(vm, watcher.value); } return function unwatchFn() { watcher.teardown(); } };
通过以上代码可以看出,watch的创建最终其实是vue内部创建了一个Watcher实例。那么Watcher是vue中很重要的一部分,它是数据驱动不可缺少的一部分。
接下来大概讲一下new Watcher的功能是什么样的。
5. new Watcher
vue在拿到了要监听的属性和属性更新执行的函数后,new Watcher创建一个Watcher。
Watcher是订阅者,它“监听更新行为”并执行更新函数。
为什么双引号?其实不是它在监听。以最初的代码为例更新步骤如下:
1. vue内部new Watcher创建一个Watcher实例
2. Watcher实例创建时会将自己添加到data.msg的Observer中(数据驱动原理知识)
3. 当我们改变msg值时,msg Observer会通知所有被观察者,其中就包括以上Watcher。(数据驱动原理知识)
4. Watcher触发更新并且执行回调,因此执行了我们声明的函数。
完结
watch的实现很简单,这里需要vue的数据驱动原理,由Object.defileProperty、Dep、Watcher几部分实现。不了解的可以先去学习这部分内容。
vue中wath的源码实现的更多相关文章
- Vue.js 2.0源码解析之前端渲染篇
一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...
- 如何实现全屏遮罩(附Vue.extend和el-message源码学习)
[Vue]如何实现全屏遮罩(附Vue.extend和el-message源码学习) 在做个人项目的时候需要做一个类似于电子相册浏览的控件,实现过程中首先要实现全局遮罩,结合自己的思路并阅读了(饿了么) ...
- 探秘Tomcat(一)——Myeclipse中导入Tomcat源码
前言:有的时候自己不知道自己是井底之蛙,这并没有什么可怕的,因为你只要蜷缩在方寸之间的井里,无数次的生活轨迹无非最终归结还是一个圆形:但是可怕的是有一天你不得不从井里跳出来生活,需要重新审视井以外的生 ...
- Scala 深入浅出实战经典 第65讲:Scala中隐式转换内幕揭秘、最佳实践及其在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- Scala 深入浅出实战经典 第61讲:Scala中隐式参数与隐式转换的联合使用实战详解及其在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...
- Scala 深入浅出实战经典 第60讲:Scala中隐式参数实战详解以及在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- Scala 深入浅出实战经典 第48讲:Scala类型约束代码实战及其在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- [原创]在Windows和Linux中搭建PostgreSQL源码调试环境
张文升http://ode.cnblogs.comEmail:wensheng.zhang#foxmail.com 配图太多,完整pdf下载请点这里 本文使用Xming.Putty和VMWare几款工 ...
- Android: 在WebView中获取网页源码
1. 使能javascript: ? 1 webView.getSettings().setJavaScriptEnabled(true); 2. 编写本地接口 ? 1 2 3 4 5 final c ...
随机推荐
- 一个线上Java空指针问题的排查经过
某天,运营反馈,某商品下单异常 1.原来是一个空指针报错 根据用户输入的下单关键信息搜索日志系统看到如下报错 stackTrace: "java.lang.NullPointerExcept ...
- 洛谷 P1198 [JSOI2008]最大数——单调栈/线段树
先上一波题目 https://www.luogu.org/problem/P1198 题目要求维护后缀最大值 以及在数列的最后面添加一个数 这道题呢我们有两种做法 1.单调栈 因为只需要维护后缀最大值 ...
- jmeter 响应超时时间设置 压力增大,不能正常退出全部线程
当压力增大会出现connect timeout error 压力增大,不能正常退出全部线程: 解决办法:http request default--advance--timeouts 如填写1,表示大 ...
- SpringMVC入门及拦截器
SSM最后一个框架springmvc,其实上手特别简单.但是我昨天看一个深入源码的视频,差点GG.其实以前学过很多东西,都忘了,不敢说学会,现在有了本书,看过一遍之后.多多少少记住一些,权当我会用了, ...
- html-body标签中相关标签 02
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...
- PHP通过KMP算法实现strpos
起因 昨天看了阮一峰老师的一篇博客<字符串匹配的KMP算法>,讲的非常棒.这篇文章也是解决了: 有一个字符串"BBC ABCDAB ABCDABCDABDE",里面是否 ...
- LeetCode Array Easy 217. Contains Duplicate
Description Given an array of integers, find if the array contains any duplicates. Your function sho ...
- DoubleCache
DoubleCache 指的是本地+redis两份缓存模式 本地缓存过期之后从redis读取新数据 redis缓存过期时,从业务里读取新数据. 设计原理: 利用 loadingCache的过期刷新来实 ...
- 如何在MySQL中删除表中指定列的唯一键?
语法结构如下: alter table table_name drop index column_name;
- nginx进行获取阿里云slb真实ip配置操作
环境: 1.使用阿里云的slb进行配置nginx,nginx无法获取用户的真实ip解决方案 参考阿里云: https://help.aliyun.com/knowledge_detail/40535. ...