// 这一步极其重要,在虚拟dom上存一下dom,方法最后比对完成之后转换成真实dom操作,触发更新页面,所以说虚拟dom也是要做真实dom操作的,
vnode.el = el
return el
}
完整代码
完整代码比较长,建议先看一下前面两篇,分别是挂载和响应式,这个代码是基于上面的,都看下来会理解的比较快
function reactive(obj) {
const proxy = new Proxy(obj, {
get(target, key) {
/*
render函数第一次渲染的时候会获取引用的值 所以第一次渲染就会走到这个 get 方便我们开始做依赖收集
*/
track(target, key)
return target[key]
},
set(target, key, value) {
target[key] = value
console.log(‘proxy’, key)
/*
修改的时候,去依赖收集的数据结构中 找到对应的key 把 key 对应的 更新函数都执行一遍,这就触发了页面的响应式
*/
trigger(target, key)
// app.update()
}
/*
proxy 的优势出了可以监听get 和 set之外 还是可以监听另外十多种情况,这个是Object.defineProperty()做不到的
这个是语言层面上的升级
*/
})
return proxy
}
// 副作用函数 – 这里是为了暂时的存放每一个副作用函数,当副作用函数已经和依赖关系建立好了之后再清除空间
const effectStack = []
function effect(fn) {
const eff = function () {
try {
effectStack.push(eff)
fn()
} finally {
effectStack.pop()
}
}
eff()
return eff
}
// 依赖收集函数
/*
依赖收集的数据结构是这样的
{
state:{
title:[effect,effect] // effect 对应的就是一个个的更新函数,每个响应式对象的值都是存着更新函数的数组,当这个值变化的时候遍历执行数组里面的一个个effect函数
}
}
*/
const trackMap = {}
function track(target, key) {
/*
effectStack 是临时存放副作用函数的地方,每次关系建立完成之后就会再清空掉,所以获取数组的最后一个元素即可
*/
const effect = effectStack[effectStack.length - 1]
if (effect) {
let map = trackMap[target]
if (!map) {
map = trackMap[target] = {}
}
let deps = map[key]
if (!deps) {
deps = map[key] = []
}
// 将副作用函数放入 deps
if (deps.indexOf(effect) === -1) {
deps.push(effect)
}
}
}
function trigger(target, key) {
const map = trackMap[target]
if (map) {
const effects = map[key]
effects.forEach(effect => effect())
}
}
function h(target, props, children) {
// 创建虚拟DOM的函数
return {
target,
props,
children
}
}
function createApp(config) {
let app = {}
app.mount = function (id) {
this.rootDOM = document.getElementById(id)
if (!config.render) {
config.render = this.compile(this.rootDOM.innerHTML)
}
if (config.setup) {
this.setupCtx = config.setup()
} else {
this.dataCtx = config.data()
}
this.proxy = new Proxy(this, {
get(target, key) {
if (key in target.setupCtx) {
return target.setupCtx[key]
} else {
return target.dataCtx[key]
}
},
set(target, key, value) {
if (key in target.setupCtx) {
target.setupCtx[key] = value
} else {
target.dataCtx[key] = value
}
}
})
this.update = effect(() => {
// render 函数的结果是一个 vnode
const vnode = config.render.call(this.proxy)
if (!this.isMounted) {
// 首次挂载
const el = this.createEle(vnode)
this.__node = vnode
this.rootDOM.innerHTML = ‘’
this.rootDOM.appendChild(el)
} else {
// 更新
this.patch(this.__node, vnode)
this.__node = vnode
}
})
this.update()
this.isMounted = true // 已经挂载成功
return this
}
app.compile = function (template) {
return function () {
// 真实DOM操作
// const h3 = document.createElement(‘h3’)
// h3.textContent = this.title
// return h3
// 采用虚拟dom
const vnode = h(‘h3’, null, this.title)
return vnode
}
}
app.createEle = function (vnode) {
let el = document.createElement(vnode.target)
// 先忽略掉属性
// vnode.props
if (typeof vnode.children === ‘string’) {
// 文本
/*
{
h(‘h3’,null,this.title)
}
*/
el.textContent = vnode.children
} else {
// 是数组,数组里面是子虚拟DOM
/*
{
h(‘h3’,null,[
h(‘p’,null,this.title),
h(‘p’,null,this.title),
h(‘p’,null,this.title)
])
}
*/
vnode.children.forEach(node => {
// 递归调用
el.appendChild(this.createEle(node))
})
}
vnode.el = el
return el
}
app.patch = function (node1, node2) {
// 这里就是有涉及到 diff 算法了,但是我只会最简单的部分
// 这步很重要,把每次node1绑定的元素再赋值给node2的元素,这样才可以每次都保持更新元素
const el = node2.el = node1.el
let child1 = node1.children,
child2 = node2.children
// 两次虚拟dom比对,只更新变化的
console.log(node1, node2)
if (typeof node1.children === ‘string’) {
if (typeof node2.children === ‘string’) {
if (child1 !== child2) {
el.textContent = child2
}
} else {
// 变成了数组 – 遍历虚拟dom转换成真实dom 再插入
el.innerHTML = ‘’
child2.forEach(child => el.appendChild(document.createElement(child)))
}
自学几个月前端,为什么感觉什么都没学到??
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。
最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。
很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。
这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。
但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。