vue computed 原理
vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想。
computed: {
a(){
return this.b ++
}
}
data:{
b: 1
}
vue中如果b变化,a也会变化。这儿为了简单,不在展示computed.a的set跟get
1、data中的数据需要使用es5中的 Object.defineProperty 设置set,get属性。
2、在运行computed.a()函数的时候,需要建立数据依赖,搜集。
// 做一个构造函数A,作用是对data添加特性方法(set,get)
class A {
constructor(data, computed) {
this.defineProperty(data, 'a',data.a) // 对data中的属性‘a’添加特性方法
this.collect = computed.computA, // computed中的函数,记录下来 computed.computA() // 运行此函数,会对data.a 进行取值,触发data.a的get函数,建立依赖
} defineProperty(obj, key, val) { // 使用函数封装 添加特性方法
const collect = []
Object.defineProperty(obj, key, {
get:()=> { // 当取值 data.a 时会触发get函数
if (this.collect && !collect.some(it => it === this.collect)) {
collect.push(this.collect) // 如果探测到有需要运行的compueted函数,搜集起来。
}
return val
},
set:value => {
val = value
collect.forEach(it => it()) // 如果data.a = 2 则运行set特性函数,此时,那些搜集起来的computed函数都运行
}
})
}
} const computed = {
computA() {
let result = data.a +1
console.log(result)
return result
}
} const data = {
a: 1
}
// 测试
new A(data, computed) // 2
data.a++ // 3
data.a = 6 //7
vue computed 原理的更多相关文章
- vue 实现原理及简单示例实现
目录 相关html代码,用于被解析绑定数据 observer代码 Dep代码 Watcher 代码 Compile 代码 vue 简要构造函数 创建vue实例 结语 主要理解.实现如下方法: Obse ...
- FinClip 前端之 VUE 核心原理总结
小程序框架有很多,都是支持前端JavaScript语言的,也是支持 vue.js 框架的.FinClip 小程序是兼容各家平台的.所以在学习了框架使用之后的进阶就要熟悉框架的底层原理. 1.数据响应式 ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- vue 编译原理 简介
来源 tinycompile 关于vue的内部原理其实有很多个重要的部分,变化侦测,模板编译,virtualDOM,整体运行流程等. 之前写过一篇<深入浅出 - vue变化侦测原理> 讲了 ...
- vue运行原理
Vue工作原理小结 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简 ...
- framework7的改进,以及与vue组合使用遇到的问题以及解决方法 (附vue的原理)
framework7官方提供了vue+framework7的组合包,但是那个包用起来复杂度较高,而且不灵活.听说bug也不少. 所以我想用最原始的方式单独使用vue和framework7. 遇到以下问 ...
- vue 动画原理 part1
Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- Vue computed props pass params
Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...
随机推荐
- 正则表达式入门+实战(c#实现)
如果有人和你说,如果不将字符串转换为数字,你要如何判断字符串是否由全数字组成?把字符串拆成char数组,然后放入一个循环,来判断每个char是否为数字?那你要如何判断手机号是否合法?IP是否合法呢?把 ...
- 【redis源码阅读】redis对象
结构定义 在redis中,对象的数据结构定义如下: typedef struct redisObject { unsigned type:4; unsgined encoding:4; uns ...
- Python基础-week04
本节内容摘要:#Author:http://www.cnblogs.com/Jame-mei 装饰器 迭代器&生成器 Json & pickle 数据序列化 软件目录结构规范 作业:A ...
- java基础系列--SecurityManager入门(转)
转载作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/yiwangzhibujian/p/6207212.html 一.文章的目的 这是一篇对Java安全管理器入门的文 ...
- Oracle查询优化改写--------------------操作多个表
一.union all与空字符串 二.组合相关行 三.in .exists.inter join .left join .right join .full join 之间的区别 'inner joi ...
- 设计模式之 观察者模式详解(包含观察者模式JDK的漏洞以及事件驱动模型)
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 本章我们讨论一个除前面的单例 ...
- Item 15: 只要有可能,就使用constexpr
本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果说C++11中有什么新东西能拿"最佳困惑奖" ...
- W班-项目选题报告成绩
作业链接 https://edu.cnblogs.com/campus/fzu/FZUSoftwareEngineering1715W/homework/907 作业要求 1份团队选题报告(word电 ...
- Alpha冲刺Day2
Alpha冲刺Day2 一:站立式会议 今日安排: 首先完善前一天的剩余安排工作量,其次我们把项目大体分为四个模块:数据管理员.企业人员.第三方机构.政府人员.数据管理员这一模块,数据管理员又可细分为 ...
- 冲刺NO.1
Alpha冲刺第一天 站立式会议 项目进展 项目的第一天,主要工作是对项目的开发进行规划,以及将规划的成果转化为燃尽图与博客文章.依据项目需求分析报告与开题报告中已经完成的设计任务和项目规划,我们将系 ...