vue computed 源码分析
我们来看看computed的实现。最简单的一个demo如下:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app"><div name="test">{{computeA}}</div></div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">new Vue({el: '#app',data: function () {return {firstName: 111,lastName: 222}},computed: {computeA: function () {return this.firstName + ' ' + this.lastName}},created(){setTimeout(() => {this.firstName = 333;},1000)}
})
</script>
</html>
1在初始化实例创建响应式的时候。对options中的computed做了特殊处理:
function initComputed (vm, computed) {var watchers = vm._computedWatchers = Object.create(null);for (var key in computed) {var userDef = computed[key];var getter = typeof userDef === 'function' ? userDef : userDef.get;{if (getter === undefined) {warn(("No getter function has been defined for computed property \"" + key + "\"."),vm);getter = noop;}}// create internal watcher for the computed property.watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions);//为每一个computed项目订制一个watcher// component-defined computed properties are already defined on the// component prototype. We only need to define computed properties defined// at instantiation here.if (!(key in vm)) {defineComputed(vm, key, userDef);} else {if (key in vm.$data) {warn(("The computed property \"" + key + "\" is already defined in data."), vm);} else if (vm.$options.props && key in vm.$options.props) {warn(("The computed property \"" + key + "\" is already defined as a prop."), vm);}}function defineComputed (target, key, userDef) {if (typeof userDef === 'function') {sharedPropertyDefinition.get = createComputedGetter(key);sharedPropertyDefinition.set = noop;} else {sharedPropertyDefinition.get = userDef.get? userDef.cache !== false? createComputedGetter(key): userDef.get: noop;sharedPropertyDefinition.set = userDef.set? userDef.set: noop;}Object.defineProperty(target, key, sharedPropertyDefinition);
}function createComputedGetter (key) {//构造该computed的get函数return function computedGetter () {var watcher = this._computedWatchers && this._computedWatchers[key];if (watcher) {if (watcher.dirty) {watcher.evaluate();//收集该watcher的订阅}if (Dep.target) {watcher.depend();//同一为这一组订阅再加上组件re-render的订阅(该订阅负责更新组件)}return watcher.value}}
}
组件初始化的时候。computed项和data中的分别建立响应式。data中的数据直接对属性的get,set做数据拦截。而computed则建立一个新的watcher,在组件渲染的时候。先touch一下这个computed的getter函数。将这个watcher订阅起来。这里相当于这个computed的watcher订阅了firstname和lastname。touch完后。Dep.target此时又变为之前那个用于更新组件的。再通过watcher.depend()将这个组统一加上这个订阅。这样一旦firstname和lastname变了。同时会触发两个订阅更新。其中一个便是更新组件。重新re-render的函数。
转载于:https://www.cnblogs.com/smzd/p/8624272.html
vue computed 源码分析相关推荐
- 【VUE】源码分析 - 数据劫持的基本原理
tips:本系列博客的代码部分(示例等除外),均出自vue源码内容,版本为2.6.14.但是为了增加易读性,会对不相关内容做选择性省略.如果大家想了解完整的源码,建议自行从官方下载.https://g ...
- Vue.js 源码分析(五) 基础篇 方法 methods属性详解
methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...
- Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- 【VUE】源码分析 - computed计算属性的实现原理
tip:本系列博客的代码部分(示例等除外),均出自vue源码内容,版本为2.6.14.但是为了增加易读性,会对不相关内容做选择性省略.如果大家想了解完整的源码,建议自行从官方下载. GitHub - ...
- 【VUE】源码分析 - 剖析$nextTick原理及VUE的刷新机制
tip:本系列博客的代码部分(示例等除外),均出自vue源码内容,版本为2.6.14.但是为了增加易读性,会对不相关内容做选择性省略.如果大家想了解完整的源码,建议自行从官方下载. GitHub ...
- 【VUE】源码分析 - vue中的 HTMLParser,模板解析的第一步
tip:本系列博客的代码部分(示例等除外),均出自vue源码内容,版本为2.6.14.但是为了增加易读性,会对不相关内容做选择性省略.如果大家想了解完整的源码,建议自行从官方下载. GitHub ...
- Vue.js 源码分析—— Slots 是如何实现的
今天主要分析 Vue.js 中常用的 Slots 功能是如何设计和实现的.本文将分为普通插槽.作用域插槽以及 Vue.js 2.6.x 版本的 v-slot 语法三部分进行讨论. 本文属于进阶内容,如 ...
- vuex 源码分析_vue源码解析之vuex原理
常用接口 dispatch 操作行为触发方法,是唯一能执行action的方法. actions 操作行为处理模块.负责处理Vue Components接收到的所有交互行为.包含同步/异步操作,支持多个 ...
最新文章
- 这7款实用windows软件,太让人惊喜了!
- beego07----web博客
- 犀牛重建曲面_犀牛建模渐消面处理
- boost::local_time模块custom_time_zone 和 posix_time_zone 的简单示例
- Apicloud开发之V7包继承AppCompactActivity后云编译资源找不到的解决办法
- 菜鸟做HTML5小游戏 - 刮刮乐
- hadoop安装详细步骤_推荐一个超详细的Hadoop安装教程,已有32万次阅读
- 二十九、PHP框架Laravel学习笔记——Debugbar 调试器
- struct多种声明定义写法的小结
- c语言追踪机械腿位置,基于传感器的下肢可穿戴机械腿软件系统设计与实现
- Oracle的 EXEC SQL CONTEXT学习
- UVa 11078 - Open Credit System
- 电商系统——订单页面展示
- 汇编学习从入门到精通
- MATLAB利用最速梯度下降法求解f(x)函数极小点
- 使用Jmeter做性能测试
- JavaScript面向对象
- 子佩录音盒,winform实现拨打电话,接听电话,显示客户信息,并录音,写入一条记录
- 欧拉函数定义及其性质
- 全球及中国LCP行业发展动态与投资趋势分析报告2022~2028年
热门文章
- ARM AMBA 外围设备 的datasheet
- java 实体类 临时注解_JPA:Java持久层API--配置流程
- eclipse没有日志_「开源资讯」Jboot v3.3.6 发布,更强大的控制台请求日志
- 特斯拉是l3还是l2_比特斯拉还“高一级”,长安的“L3级自动驾驶”到底什么来头?...
- 深入Nginx之《常用参数配置技巧》
- msp430入门编程42
- NOIP 2016【蚯蚓】
- JAVA中几个常用的方法
- 路由控制器Express的路由控制方法
- js 兼容event.target