Vue0.1版本源码解读一下下__Vue.js
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
theme: juejin
读了一下部分Vue的源码,总体来说读源码还是需要按照主方向来进行把握,不能掉进细节里面。这样就会陷进去。我对这部分代码做了一些注释,保证主线的正常即可。
找了网上的大佬的0.1版本代码,分析了
一下下。
大佬项目链接 冒犯的话,通知一下下…
项目整体目录:也是比较简单了,但是作为菜鸡的话可以多做一点,加一下webpack-dev-server。然后跑页面起来看看。
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --open --mode development"
},
1. 看了一下index.html里面的调用,首先先创建一个MiniVue的实例,看代码,传入了对象里面,里面有一些参数的,el || data|| methods等等
new MiniVue({
el: '#app',
data: {
age: 18,
name: '小明',
obj: {
a:1
}
},
methods: {
increase() {
this.age++
},
sayHi() {
alert('hi')
}
}
})
2. 然后我们到main.js 里面有一个MiniVue构造函数,这个构造函数就是进行一些初始化的操作,对参数的赋值,调用init()的基本实现
function MiniVue(options) {
// 存放观察者实例
this._watchers = []
// 存放文本节点 在compile上会用到
this._textNodes = []
//对参数放入构造函数中,后面可以更方便的取
this.$options = options
// 执行初始化函数
this.init()
}
3. 整个init函数是挂在函数的原型上(js继承的方式),这个init做了啥? 都在下面的代码里
MiniVue.prototype = {
// 初始化数据和方法
init() {
this.initData()
this.initMethods()
// 监听数据
new Observer(this._data)
// 解析指令
new Compile(this)
// this.initWatch()
},
// 对数据进行挂载,挂载到vm._data上,并且做了一下代理,可通过vm.msg来访问vm._data.msg
initData() {
const vm = this
vm.$el = document.querySelector(vm.$options.el)
let data = vm.$options.data
data = vm._data = typeof data === 'function'? data() : data || {}
const keys = Object.keys(data)
// 对每一个key实现代理 即可通过vm.msg来访问vm._data.msg
keys.forEach(e => {
vm.proxy(vm, '_data', e)
})
},
// 对方法进行挂载到vm上,我们可以查看一下下面的输出
initMethods() {
const vm = this
const methods = vm.$options.methods? vm.$options.methods : {}
const keys = Object.keys(methods)
// 将methods上的方法赋值到vm实例上
keys.forEach(e => {
vm[e] = methods[e]
})
},
// 读取vm.data 是vm._data上的数据
proxy(target, sourceKey, key) {
const sharedPropertyDefinition = {
enumerable: true,
configurable: true
}
// 实际上读取和返回的是vm._data上的数据
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key]
}
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val
}
Object.defineProperty(target, key, sharedPropertyDefinition)
},
// 暂时先不考虑,这是对数据进行的跟踪。
$watch(variable, callback) {
// new Watcher(this, variable, callback)
}
}
打印了vm的实例数据,可以看出方法已经挂到,_data赋值了
4. 现在我们已经对this.initData()、 this.initMethods()进行分析,后面两个就是下面这两个。
// 监听数据
new Observer(this._data)
// 解析指令
new Compile(this)
5. new Observer干了啥?看完下面基本就了解了observer做了啥,对_data里面每个属性都进行了监听,分别通过get来拦截、set进行更新。可以试一下?在get处打一个断点?然后控制台访问一下数据,就会到这个断点。究竟什么时候页面上使用的数据会被收集进来呢?继续往下看
// 根据导出的函数,知道了调用了walk方法?为什么叫walk? 这个obj就是上面赋值的vm._data
export default function Observer(obj) {
this.walk(obj)
}
// 继续往下看 walk干了啥?对传入的对象进行分别的执行了defineReactive()
Observer.prototype = {
walk(obj) {
const keys = Object.keys(obj)
for (let i = 0, len = keys.length; i < len; i++) {
defineReactive(obj, keys[i], obj[keys[i]])
}
}
}
// defineReactive干了啥? 首先创建了一个dep这是啥?简单来讲就是进行依赖收集的一个容器。 Dep:扮演观察目标的角色,每一个数据都会有Dep类实例,它内部有个subs队列,subs就是subscribers的意思,保存着依赖本数据的观察者,当本数据变更时,调用dep.notify()通知观察者
function defineReactive(obj, key, val) {
// 一个闭包 保存在里面
const dep = new Dep()
// 如果值是一个对象 递归监听
if (typeof val === 'object') {
new Observer(val)
}
// 核心,get时候进行了依赖收集?但是究竟什么时候页面上使用的数据会被收集进来呢?后面再细说
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
console.log('defineReactive')
// 收集对应的观察者对象
if (Dep.target) {
dep.depend()
}
return val
},
// set时候进行一下判断,数据有无变化,变化时候进行依赖更新
set(newVal) {
if (val === newVal) {
return
}
val = newVal
// 如果新值是对象 递归监听
if (typeof val === 'object') {
new Observer(val)
}
// 触发更新
dep.notify()
}
})
}
6. new Complie干了啥? 解析页面上一些数据和指令。Vue版本里面template被编译后,会形成AST,在执行render函数过程中就会触发data.a的getter,实现依赖收集,这里我们继续往下看?原型方法 init执行了parse函数render函数,那我们直接就看parse函数和render函数,抛除细节,我们可以看到的就是在render里面进行了new Watcher() 那么watcher干嘛的,就是我们说的观察者,或者暂且理解为订阅者。这个时候我们去看一下watcher怎么实现的?
// 其实我们并不需要很关心细节,直接可以看他创建实例时候干了啥? 直接看init()做了啥
export default function Compile(vm) {
this.el = vm.$el
this.vm = vm
// 这里都是一些正则,进行对字符串的匹配
this.onRe = /^(v-on:|@)/
this.modelRe = /^v-model/
this.bindRe = /^(v-bind:|:)/
this.braceRe1 = /{{\w+}}/g
this.braceRe2 = /[{}]/g
this.dirs = []
this.handles = handles
this.init()
}
Compile.prototype = {
init() {
this.parse(this.el)
this.render()
},
parse(el) {
const attrs = el.attributes
let name
[...attrs].forEach(e => {
if (this.onRe.test(e.name)) {
name = e.name.replace(this.onRe, '')
this.addDir(this.handles.on, name, e.name, e.value, el)
} else if (this.bindRe.test(e.name)) {
// 类似:bind="name" 解析完后将原本的值删掉
el.removeAttribute(e.name.split('=')[0])
name = e.name.replace(this.bindRe, '')
this.addDir(this.handles.bind, name, e.name, e.value, el)
} else if (this.modelRe.test(e.name)) {
name = e.name.replace(this.modelRe, '')
this.addDir(this.handles.model, name, e.name, e.value, el)
}
})
const children = el.childNodes
if (children.length > 0) {
children.forEach(ele => {
switch (ele.nodeType) {
// 元素节点
case 1:
this.parse(ele)
break
// 文本节点
case 3:
if (this.braceRe1.test(ele.nodeValue)) {
this.vm._textNodes.push(ele)
}
break
}
})
}
},
render() {
const vm = this.vm
const that = this
this.dirs.forEach(e => {
const handle = e.handle
if (handle.implement) {
handle.implement(e.vm, e.el, e.dirName, e.expOrFn)
}
const update = function (newVal, oldVal) {
handle.update(e.vm, e.el, e.expOrFn, newVal, oldVal)
}
// 在这里开始创建观察者实例 将监听的值变化时 触发update回调函数
new Watcher(this.vm, e.expOrFn, update)
})
const handles = this.handles.textNode
vm._textNodes.forEach(e => {
let arry = e.nodeValue.match(this.braceRe1)
let rawValue = e.nodeValue
arry.forEach(str => {
let variable = str.replace(this.braceRe2, '')
handles.implement(vm, e, variable)
const update = function (newVal, oldVal) {
handles.update(vm, newVal, oldVal, e, variable, rawValue, that.braceRe1, that.braceRe2)
}
// 监听文本节点 在这里开始创建观察者实例 将监听的值变化时 触发update回调函数
new Watcher(vm, variable, update)
})
})
}
}
7. Watcher就是订阅者啦,就是我们get时候被搜集的依赖了。不用慌,我们继续看看。初始化之后我们最关键的点在于?this.value = this.get()。在创建watcher实例时先取一次值这个有什么用?非常的有用!!因为我们之前在obsever里面知道了,对数据已经做了一层拦截嘛,而且get时候做了啥?在读取值时先将观察者对象赋值给Dep.target 否则Dep.target为空 不会触发收集依赖,我们是不是已经进行了依赖收集了?当然后面还有啊?如何notify()?
// expOrFn为表达式或一个变量名
export default function Watcher(vm, expOrFn, callback) {
vm._watchers.push(this)
this.id = uid++
this.vm = vm
// 存放dep实例
this.deps = []
// 存放dep的ID
this.depIds = new Set()
// 更新触发回调函数
this.cb = callback
this.getter = () => vm[expOrFn]
this.setter = (val) => {
vm[expOrFn] = val
}
// 在创建watcher实例时先取一次值
this.value = this.get()
}
Watcher.prototype = {
get() {
console.log('watcher')
// 在读取值时先将观察者对象赋值给Dep.target 否则Dep.target为空 不会触发收集依赖
Dep.target = this
const value = this.getter()
// 触发依赖后置为空
Dep.target = null
return value
},
}
下面就是我们observer里面get方法进行的
未完,后面继续看一看。
总结:上面基本过程就是响应式原理的基本过程了,后面还有很多?像如何模板怎么替换的?之前的正则是不是要用上了?这里并没有使用VNode。作者怎么进行数据和页面的更新?
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: woaife 原文链接:https://juejin.im/post/6959055783703085063