VUE源码解析（持续更新）

src\core\observer\index.js

export class Observer { } Observer这个类会被附加在每一个可观察对象上
export function defineReactive ( } 利用 Object.defineProperty 函数作用于对象属性的值，进行取值和赋值操作时的拦截和处理

数组对象中的每一个key设置dep，为什么在Observer里声明dep？（给每个对象加一个dep呢）

1.obeject里面有新增或者删除属性
2.array中有变更方法
都需要dep去通知watcher去检测变化，然后做更新（diff算法），只更新修改的部分
(会触发setter方法，告诉watcher有依赖变化，watcher收到信息，重新渲染dom,实现页面数据更新)

拦截操作做了什么？

这里是引用

export class Observer { value: any;dep: Dep;vmCount: number; // number of vms that have this object as root $data}constructor (value: any) {this.value = value// 数组对象中的每一个key设置dep，为什么在Observer里声明dep？（给每个对象加一个dep呢）this.dep = new Dep()this.vmCount = 0//设置__ob__属性，引用当前Observer实例def(value, '__ob__', this)//如果是数据就替换数组对象的原型if (Array.isArray(value) ) { if (hasProto) {// 覆盖原型的方法// 把覆盖过得arrayMethods直接替换掉。这个数组以后就会通知了// 覆盖完7个数组方法之后，会覆盖到数组实例上protoAugment(value, arrayMethods)} else {copyAugment(value, arrayMethods, arrayKeys)}// 如果数组里面元素是对象还需要进行响应式处理，数组本身需要处理，数组里含有对象也需要进行处理this.observeArray(value)} else {//对象的话直接处理this.walk(value)}}

export function defineReactive ( //dep和key一一对应const dep = new Dep()//属性拦截核心代码，只要是对象类型，均会返回childob  (这里指val)let childOb = !shallow && observe(val)Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {//获取key对应的值const value = getter ? getter.call(obj) : val//如果存在依赖if (Dep.target) {//收集依赖dep.depend()if (childOb) {//如果存子ob,子ob也收集依赖childOb.dep.depend()if (Array.isArray(value)) {dependArray(value)}}}return value},set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : valif (newVal === value || (newVal !== newVal && value !== value)) {return}if (process.env.NODE_ENV !== 'production' && customSetter) {customSetter()}if (getter && !setter) returnif (setter) {setter.call(obj, newVal)} else {val = newVal}//如果新值是对象，也要做响应式childOb = !shallow && observe(newVal)//通知更新，会调用watcher.js方法进行更新dep.notify()}
}

VUE源码解析（持续更新）相关推荐

netty4.0源码解析(持续更新)
文章目录 netty 1:环境配置与其他对比 future缺陷 2:结构 3:设计模式 delay 策略模式 todo 责任链模式 todo 单例模式模式 todo 装饰者模式 ReplayingD ...
【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
[Vue源码解析] patching算法
[Vue源码解析] patching算法 pathching算法:通过对比新旧VNode的不同,然后找出需要更新的节点进行更新操作:1.创建新增节点 2.删除废弃节点 3.修改需要更新的节点创建节 ...
Vue源码解析(一)
前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却 ...
Vue源码解析（尚硅谷）
视频地址:Vue源码解析系列课程一.Vue源码解析之mustache模板引擎 1. 什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案历史上曾经出现的数据变为视图的方法 2. mustac ...
Vue源码解析之数组变异
力有不逮的对象众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...
Vue源码解析：虚拟dom比较原理
通过对 Vue2.0 源码阅读,想写一写自己的理解,能力有限故从尤大佬2016.4.11第一次提交开始读,准备陆续写: 模版字符串转AST语法树 AST语法树转render函数 Vue双向绑定原理 V ...
Vue源码解析-$mount
前言 Vue实例是通过mount方法进行挂载的,上一篇说了new Vue这篇分析一下mount挂载方法.mount的定义在Vue源码中有多处,这是因为Vue需要适配不同的平台以及构建方式,本文这里主要 ...
Vue源码解析之Template转化为AST的实现方法
什么是AST 在Vue的mount过程中,template会被编译成AST语法树,AST是指抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree) ...
Vue源码解析之函数入口
从入口开始看起写博客就是记录自己撸码的过程和问题,好了~废话就不多说了,直接源码撸起,通过上一篇博客咱们大致知道了Vue源码目录设计,下面我们要一步步找到vue的入口通过查看package.jso ...

VUE源码解析（持续更新）

src\core\observer\index.js

VUE源码解析（持续更新）相关推荐

最新文章

热门文章