vue源码学习

涵。

已于 2022-11-11 13:55:09 修改

阅读量406

点赞数

分类专栏： vue 文章标签： vue.js 学习 javascript

于 2022-11-11 13:53:53 首次发布

本文链接：https://blog.csdn.net/weixin_44208404/article/details/127791360

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何通过模板解析将HTML转化为AST树，并详细阐述了diff算法在虚拟DOM更新中的应用，包括属性和children的比较及响应式编程原理，如`reactive`和`watchEffect`在状态管理中的作用。

摘要由CSDN通过智能技术生成

1 模板解析

将html转化成AST语法树，然后根据AST语法树使用render函数生成虚拟DOM节点

2 diff算法

使用patch对比新旧两个节点，如果两个节点的tag一致，比较两个节点的props（属性），如果新节点中相应prop值变更，将新节点的值赋给旧节点；如果新节点中有旧节点中没有的prop，则添加进旧节点中

然后对比两个节点的children，这里children有两种情况，如果旧节点的children为string，新节点也为string，那么将相应children的textcontent变为新节点的，如果旧节点为数组，那么还是将新节点的textcontent赋给旧节点；如果旧节点为string，新节点为数组，那么将旧节点的innerHTML变为空，然后遍历新节点，使用mount函数将新节点的children挂载到旧节点下；如果都是数组，对相同长度的部分进行patch比较；如果新节点child的长度大于旧节点child的长度，将超出长度部分的节点mount挂载；如果新节点child长度小于旧节点child长度，对超出长度部分的节点removeChild

3 响应式原理

const state = reactive({
	count: 1
})

let activeEffect
class Dep{
	subs = new Set()
	depend(){
		if(activeEffect){
			this.subs.add(activeEffect)	
		}	
	}
	notify(){
		this.subs.forEach(effect=>{
			effect()	
		})
	}
}

function watchEffect(effect){
	activeEffect = effect
	effect()
	activeEffect = null
}

let targetMap = new WeakMap()
function getDep(target,key){
	const depsMap = targetMap.get(target)
	if(!depsMap){
		depsMap = new Map()
		targetMap.set(target,depsMap)	
	}
	let dep = depsMap.get(key)
	if(!dep){
		const dep =new Dep()
		depsMap.set(key,dep)
	}
	return dep
}

let reactiveHandles = {
	get(target,key,receiver){
		const dep = getDep(target,key)
		dep.depend()
		return Reflect.get(target,key,receiver)
	},
	set(target,key,value,receiver){
		const dep = getDep(target,key)
		const result = Reflect.set(target,key,value,receiver)
		dep.notify()
		return result
	}
}

function reactive(raw){
	return new Proxy(raw,reactiveHandlers)
}

watchEffect(()=>{
	console.log(state.count)
})