vue源码学习9: 虚拟Dom实现原理

·  阅读 403
vue源码学习9: 虚拟Dom实现原理

vue源码学习(8):codegen如何将ast语法树转换成render字符串?

在vue源码学习(8)一文中,详细说明了ast语法树如何转变成render字符串。

今天的内容就是如何利用render字符串生成vnode。

模板引擎的

在Vue中的模板引擎,是用new Function + with来实现。

当我们把字符串传递给new Function()之后会得到下面这个函数。

function anonymous() {
    _c('div', {id:"app",a:"111",style:{"color":" red","background":" green"}}),_v("hello"+_s(arr)+"word")
}
复制代码

此时,能看到_s(arr)来源于vm,但是new Function是获取不到vm的。所以这里就需要用到with了。

于是就做了下面的处理:

    // 把code变成`with(this){ return ${code} }`
    let render = new Function(code)
    // 替换成下面的写法
    let render = new Function(`with(this){ return ${code} }`)
复制代码

通过上面这个下发,就可以这样使用:

render.call(vm)
复制代码

小提示💡:new Function可以看做一个沙箱,创建和全局作用域平行的作用域

with的用法

with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式.

举一个例子:

// 假设有一个obj对象,要修改obj中的每一项
var obj = {
	a: 1,
	b: 2,
	c: 3
};

// 方式1:逐一修改obj,使用3次obj
obj.a = 2;
obj.b = 2;
obj.c = 2;
// 方式2: 只用一次obj
with (obj) {
	a = 3;
	b = 3;
	c = 3;
}
复制代码

mountComponent

mountComponent顾名思义,就是生成组件。

实现代码如下:

export function mountComponent(vm, el) {
    console.log(vm, el)
    // 数据变化后,会再次调用更新函数
    let updateComponent = () => {
        // 1. 通过render生成虚拟dom
        vm._update(vm._render()) // 后续更新可以调动updateComponent方法
        // 2. 虚拟Dom生成真实Dom
    }
    updateComponent()
}
复制代码
  • updateComponent:当数据发生变化后,更新函数
  • vm._update:在Vue的原型上面挂载_update方法,来更新
  • vm._render:在Vue的原型上面挂载_c、_v、_s、_render四个方法
export function renderMixin(Vue) {
    Vue.prototype._c = function (tag, data, ...children) {
        console.log(tag, data, children)
        // 产生虚拟节点
        return createElement(this, ...arguments)
    }
    Vue.prototype._v = function (text) {
        console.log(text)
        // 产生虚拟节点
        return createTextElement(this, text)
    }
    Vue.prototype._s = function (val) {
        console.log(val)
        // 产生虚拟节点
        return JSON.stringify(val)
    }
    Vue.prototype._render = function () {
        console.log('render')
        const vm = this
        let render = vm.$options.render
        let vnode = render.call(vm)
        return vnode;
    }
}
复制代码

VDom

vm._render中使用到createElementcreateTextElement的作用,就是生成VDom(虚拟Dom)。

实现代码如下:

export function createElement(vm, tag, data = {}, ...children) {
    console.log('abc', vm, tag, data, children)
    return vnode(vm, tag, data, data.key, children, undefined)
}

export function createTextElement(vm, text) {
    console.log('def', vm, text)
    return vnode(vm, undefined, undefined, undefined, undefined, text)
}

function vnode(vm, tag, data, key, children, text) {
    return {
        vm,
        tag,
        data,
        key,
        children,
        text
    }
}
复制代码

以上内容仅学习使用,

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改