源码学习VUE之Observe
在文章 源码学习VUE之响应式原理我们大概描述了响应式的实现流程,主要写了observe,dep和wather的简易实现,以及推导思路。但相应代码逻辑并不完善,今天我们再来填之前的一些坑。
Observe
之前实现的observe函数只能处理一个对象的单个属性,但我们更多的数据是保存在对象中,为了抽象话,我们也封装一个对象Observe,只要传进一个参数,就可以把这个对象进行监听。
对现有所有属性进行监听
var obj = {
a: 1,
b: 2
}
比如一个对象有两个属性 a,b。我们可以尝试写出下面的实现类
class Observe{
constructor(value){
this.value = value //要监听的值。
this.walk();
}
walk(){ //通过walk函数,依次处理
const keys = Object.keys(obj);
let self = this;
for (let i = 0; i < keys.length; i++) {
self.defineReactive(obj, keys[i])
}
}
defineReactive (data, key, val) {
var dep = new Dep();
Object.defineProperty(obj, a, {
enumerable: true,
configurable: true,
get: function(){
if(Dep.target){
dep.addSub(Dep.target); // Dep.target是Watcher的实例
}
},
set: function(newVal){
if(val === newVal) return
val = newVal;
dep.notify();
}
})
}
}
当然,为了防止重复监听,我们可以给原object设置一个标识符以作辨别。
class Obsever(){
construct(){
this.value = value //要监听的值。
Object.defineProperty(value, "__ob__", {
value: this,
enumerable: false,
writable: true,
configurable: true
})
this.walk();
}
}
监听数组
虽然数组也是一个对象,但是我们队数组的操作却不会触发set,get方法。因此必须对数组特殊处理。
首先需要对操作数组的方法进行改写,如push
,pop
,shift
等
//首先拿到Array的原生原型链
const arrayProto = Arrary.prototype;
//为了保证修改不会影响原生方法,我们创建一个新对象
const arrayMethods = Object.create(arrayProto);
//要改写的方法
const methodsToPatch = ['push','pop','shift','unshift','splice','sort','reverse']
methodsToPatch.forEach(function (method) {
const original = arrayProto[method] // 先拿到原生方法
def(arrayMethods, method, function mutator (...args) {
// 改写后的方法,都是先拿到原生方法的计算结果
const result = original.apply(this, args)
const ob = this.__ob__
// 拿到插入的值。
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
//Observe插入的值
if (inserted) ob.observeArray(inserted)
// notify change
ob.dep.notify()
return result
})
})
其实逻辑很简单。对于可以改变array的方法我们都改写一下。只要调用了这些方法,除了返回正确的值,我们都通知观察对象,数据改变了,触发观察者update操作。同时,数组里面可能是个对象,我们不改变数组本身,但是改变数组里面的某个值,这也算是一种改变,因此,除了监听数组本身的改变,也要对数组每个值进行observe。
这涉及到两点,一是observe Array的时候,就要对每个值进行Observe。另外,插入数组的每个值也要observe.第二点就是上面代码中特别关注push
,unshift
,splice
这三个可以插值方法的原因。
class Obsever(){
construct(){
this.value = value //要监听的值。
Object.defineProperty(value, "__ob__", {
value: this,
enumerable: false,
writable: true,
configurable: true
})
if(Array.isArray(value)){
this.observeArray();
}else{
this.walk();
}
}
observeArray(items){
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
},
function observe (value) {
let ob
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
// 如果已经observe的对象就不再进行重复的observe操作
ob = value.__ob__
} else {
ob = new Observer(value)
}
return ob
}
优化
实际开发中我们经常会遇到一个很大的数据。如渲染tables时,table的数据很可能很大(一个多多维数组)。如果都进行observe无意会是很大的开销。关键是我们只是需要拿这些数据来渲染,并不关心数据内部的变化。因此可能就存在这种需求,可以不对array或object深层遍历observe。我们可以使用Object.freeze()将这个数据冻结起来。
因此对于冻结的数据我们就不再进行observe。上面的代码可以这么优化
function observe (value) {
let ob
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
// 如果已经observe的对象就不再进行重复的observe操作
ob = value.__ob__
} else if(Object.isExtensible(value)){// 如果数据被冻结,或者不可扩展,则不进行observe操作
ob = new Observer(value)
}
return ob
}
defineReactive (data, key, val) {
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key)
// 如果数据被冻结,或者不可扩展,则改写set,get方法
if (property && property.configurable === false) {
return
}
//传进来的对象可能之前已经被定义了set,get方法,因此我们不能直接拿value
var getter = property && property.get
var setter = property && property.set
Object.defineProperty(obj, a, {
enumerable: true,
configurable: true,
get: function(){
var value = getter ? getter.call(obj) : val;
if(Dep.target){
dep.addSub(Dep.target); // Dep.target是Watcher的实例
}
return value
},
set: function(newVal){
if(val === newVal) return
val = newVal;
dep.notify();
}
})
}
源码学习VUE之Observe的更多相关文章
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- 【Vue源码学习】响应式原理探秘
最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...
- 【Vue源码学习】依赖收集
前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...
- Vue源码学习(一):调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- Vue源码学习二 ———— Vue原型对象包装
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...
- Vue.js 源码学习笔记
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- 如何实现全屏遮罩(附Vue.extend和el-message源码学习)
[Vue]如何实现全屏遮罩(附Vue.extend和el-message源码学习) 在做个人项目的时候需要做一个类似于电子相册浏览的控件,实现过程中首先要实现全局遮罩,结合自己的思路并阅读了(饿了么) ...
- 最新 Vue 源码学习笔记
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...
随机推荐
- 构建Mysql服务器
<综合>构建Mysql服务器 构建MySQL服务器 数据库基本管理 MySQL 数据类型 表结构的调整 1 构建MySQL服务器 1.1 问题 本案例要求熟悉MySQL官方安装包的使用,快 ...
- Zabbix报警机制,Zabbix进阶操作,监控案例
...
- 部署并测试动态WSGI站点
部署并测试动态WSGI站点 5.1问题 本例要求为站点webapp0.example.c ...
- Alpha测试与Beta测试
粗略说一下Alpha测试与beta测试 1.Alpha测试 α测试是由一个用户在开发环境下进行的测试,也可以是公司内部的用户在模拟实际操作环境下进行的测试.α测试的目的是评价软件产品的功能.局域化.可 ...
- 第二章 IBM
1.不要招惹IBM,这可是一家做过军火的公司,一家参与了曼哈顿计划的公司. 同时也是世界上最大的服务公司.第二大软件公司.第二大数据库公司.拥有工业界最大的实验室.第一专利申请大户.最大的开源linu ...
- coding++:java 线程池概述
前言: 1):创建一个可缓存线程池 2):创建一个可重用固定个数的线程池,以共享的无界队列方式来运行这些线程. 3):创建一个定长线程池,支持定时及周期性任务执行 4):创建一个单线程化的线程池,它只 ...
- 类 文件 右下角呈现 红色小圆圈,里面有一个J 标记
intellj(idea) 项目中类 文件 右下角呈现 红色小圆圈,里面有一个J 标记,表明此为 未设置为源文件,没有编译,本来应该是属于源文件的,结果现在没有被标记为源文件,也就没法编译了.
- 面试题 ~ 什么是RESTful?
一 : 说说什么是REST规则 ① 首先什么是REST ? 基于HTTP.URI.XML.JSON等标准和协议,支持轻量级.跨平台.跨语言的架构设计.是Web服务的一种新的架构风格(一种思想). ...
- 从前端到后端实现弹幕的过程(jsp/Jquery.barrager.js)
Jquery.barrager.js插件,可以去网上下载!下载完后,就把下载文件中的js文件.css文件.图片文件.等等等文件全部拷贝到你们自己的项目中去,千万别拷贝漏了,如果你怕拷贝漏了什么,那就把 ...
- OSI 七层模型以及TCP/IP模型
OSI 七层模型 定义 OSI(Open System Interconnection)即开放式系统互联通信参考模型.该模型是国际标准化组织(ISO)制定的一个用于计算机或通信系统间互联的标准体系,一 ...