写作计划

欢迎大家持续关注、首先做一个简单的计划。

这个计划一定会变😜，要不然怎么叫迭代呢。

📎 Mock状态

🚀简版实现

Step		00	01	02	03	04	05	06
响应式逻辑		-	📎	🚀	🚀	🚀	🚀	🚀
编译函数		-	📎	📎	📎	🚀	🚀	🚀
	Parser		-	📎	📎	🚀	🚀	🚀
	Transformer	-	-	📎	📎	🚀	🚀	🚀
	Generator	-	-	📎	📎	🚀	🚀	🚀
运行时环境		-	📎	📎	🚀	🚀	🚀	🚀
	渲染器	-	📎	📎	📎	🚀	🚀	🚀
核心特性	Dom Diff	-	-	-	-	-	🚀	🚀
	静态提升	-	-	-	-	-	-	🚀
	自定义渲染器	-	-	-	-	-	-	🚀
		-	-	-	-	-	-	🚀

完整的代码

Step00 NoMVVM

想象一下如果没有MVVM框架我们要怎么实现一个这样的功能。

创建一个数据模型

const data = {
        message: 'Hello Vue 3!!'
    }

创建一个视图

<div id='app'>
    <input />
    <button></button>
</div>

创建一个将模型数据更新到视图上的渲染函数

function update() {
    // 更新视图
    document.querySelector('button').innerHTML = data.message
    document.querySelector('input').value = data.message
}

执行首次数据更新

// 首次数据渲染
update()

绑定按钮点击事件

修改模型中数据：反转字符串

修改模型后重新渲染数据

document.querySelector('button').addEventListener('click', function () {
    data.message = data.message.split('').reverse().join('')
    update()
})

对输入项变化进行监听

数据项变化时修改模型中数据

修改模型后重新渲染数据

document.querySelector('input').addEventListener('keyup', function () {
    data.message = this.value
    update()
})

Step01 总体架构 - MVVM(Mock版)

MVVM原理

MVVM框架其实就是在原先的View和Model之间增加了一个VM层完成以下工作。完成数据与视图的监听。我们这一步先写一个Mock版本。其实就是先针对固定的视图和数据模型实现监听。

接口定义

我们MVVM的框架接口和Vue3一模一样。

初始化需要确定

视图模板

数据模型

模型行为 - 比如我们希望click的时候数据模型的message会会倒序排列。

const App = {
  // 视图模板
  template: `
<input v-model="message"/>
<button @click='click'>{{message}}</button>
`,
  // 数据模型
  data() {
    return {
      message: 'Hello Vue 3!!'
    }
  },
  // 行为函数
  methods: {
    click() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
const {
  createApp
} = Vue
createApp(App).mount('#app')

程序骨架

const Vue = {
  createApp(config) {
    // 编译过程
    const compile = (template) => (observed, dom) => {
    }
    // 生成渲染函数
    const render = compile()
    // 定义响应函数
    let effective
    // 数据劫持
    observed = new Proxy(config.data(), {
    })
    return {
      // 初始化
      mount: function (container) {
      }
    }
  }
}

编译渲染函数

MVVM框架中的渲染函数是会通过视图模板的编译建立的。

// 编译函数
// 输入值为视图模板
const compile = (template) => {
  //渲染函数
  return (observed, dom) => {
   // 渲染过程
 }
}

简单的说就是对视图模板进行解析并生成渲染函数。

大概要处理以下三件事

确定哪些值需要根据数据模型渲染

// <button>{{message}}</button>
// 将数据渲染到视图
button = document.createElement('button')
button.innerText = observed.message
dom.appendChild(button)

绑定模型事件

// <button @click='click'>{{message}}</button>
// 绑定模型事件
button.addEventListener('click', () => {
  return config.methods.click.apply(observed)
})

确定哪些输入项需要双向绑定

// <input v-model="message"/>
// 创建keyup事件监听输入项修改
input.addEventListener('keyup', function () {
  observed.message = this.value
})

完整的代码

const compile = (template) => (observed, dom) => {
    // 重新渲染
    let input = dom.querySelector('input')
    if (!input) {
        input = document.createElement('input')
        input.setAttribute('value', observed.message)
        input.addEventListener('keyup', function () {
            observed.message = this.value
        })
        dom.appendChild(input)
    }
    let button = dom.querySelector('button')
    if (!button) {
        console.log('create button')
        button = document.createElement('button')
        button.addEventListener('click', () => {
            return config.methods.click.apply(observed)
        })
        dom.appendChild(button)
    }
    button.innerText = observed.message
}

数据监听的实现

Vue普遍走的就是数据劫持方式。不同的在于使用DefineProperty还是Proxy。也就是一次一个属性劫持还是一次劫持一个对象。当然后者比前者听着就明显有优势。这也就是Vue3的响应式原理。

Proxy/Reflect是在ES2015规范中加入的，Proxy可以更好的拦截对象行为，Reflect可以更优雅的操纵对象。优势在于

针对整个对象定制而不是对象的某个属性，所以也就不需要对keys进行遍历。

支持数组,这个DefineProperty不具备。这样就省去了重载数组方法这样的Hack过程。

Proxy 的第二个参数可以有 13 种拦截方法，这比起 Object.defineProperty() 要更加丰富

Proxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 Object.defineProperty() 是一个已有的老方法

可以通过递归方便的进行对象嵌套。

说了这么多我们先来一个小例子

var obj = new Proxy({}, {
    get: function (target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
    },
    set: function (target, key, value, receiver) {
        console.log(`setting ${key}!`);
        return Reflect.set(target, key, value, receiver);
    }
})
obj.abc = 132

这样写如果你修改obj中的值，就会打印出来。

也就是说如果对象被修改就会得的被响应。

image-20200713122621925

当然我们需要的响应就是重新更新视图也就是重新运行render方法。

首先制造一个抽象的数据响应函数

// 定义响应函数
let effective
observed = new Proxy(config.data(), {
  set(target, key, value, receiver) {
    const ret = Reflect.set(target, key, value, receiver)
    // 触发函数响应
    effective()
    return ret
  },
})

在初始化的时候我们设置响应动作为渲染视图

const dom = document.querySelector(container)
// 设置响应动作为渲染视图
effective = () => render(observed, dom)
render(observed, dom)

视图变化的监听

浏览器视图的变化,主要体现在对输入项变化的监听上，所以只需要通过绑定监听事件就可以了。

document.querySelector('input').addEventListener('keyup', function () {
        data.message = this.value
    })

完整的代码

<html lang="en">
<body>
    <div id='app'></div>
    <script>
        const App = {
            // 视图
            template: `
                <input v-model="message"/>
                <button @click='click'>{{message}}</button>
            `,
            data() {
                return {
                    message: 'Hello Vue 3!!'
                }
            },
            methods: {
                click() {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        }
        const Vue = {
            createApp(config) {
                // 编译过程
const compile = (template) => (observed, dom) => {
    // 重新渲染
    let input = dom.querySelector('input')
    if (!input) {
        input = document.createElement('input')
        input.setAttribute('value', observed.message)
        input.addEventListener('keyup', function () {
            observed.message = this.value
        })
        dom.appendChild(input)
    }
    let button = dom.querySelector('button')
    if (!button) {
        console.log('create button')
        button = document.createElement('button')
        button.addEventListener('click', () => {
            return config.methods.click.apply(observed)
        })
        dom.appendChild(button)
    }
    button.innerText = observed.message
}
                // 生成渲染函数
                const render = compile()
                // 定义响应函数
                let effective
                // 数据劫持
                observed = new Proxy(config.data(), {
                    set(target, key, value, receiver) {
                        const ret = Reflect.set(target, key, value, receiver)
                        // 触发函数响应
                        effective()
                        return ret
                    },
                })
                return {
                    mount: function (container) {
                        const dom = document.querySelector(container)
                        effective = () => render(observed, dom)
                        render(observed, dom)
                    }
                }
            }
        }
        const {
            createApp
        } = Vue
        createApp(App).mount('#app')
    </script>
</body>
</html>

OK今天写到这，终于完成了第一步虽然大部分还都是固定的至少把大体结构搞定了。

Step02 编译流程(Mock)

这个章节我们主要看看compile这个功能。

上文已经说过编译函数的功能

// 编译函数
// 输入值为视图模板
const compile = (template) => {
  //渲染函数
  return (observed, dom) => {
   // 渲染过程
 }
}

简单的说就是

输入：视图模板

输出：渲染函数

细分起来还可以分为三个个小步骤

Snip20200713_17

Parse 模板字符串 -> AST(Abstract Syntax Treee)抽象语法树

Transform 转换标记譬如 v-bind v-if v-for的转换

Generate AST -> 渲染函数

//  模板字符串 -> AST(Abstract Syntax Treee)抽象语法树
let ast = parse(template)
// 转换处理 譬如 v-bind v-if v-for的转换
ast = transfer(ast)
// AST -> 渲染函数
return generator(ast)

我们可以通过在线版的VueTemplateExplorer感受一下

https://vue-next-template-explorer.netlify.com/

image-20200713150630150

“
编译函数解析

Parse解析器

解析器的工作原理其实就是一连串的正则匹配。

比如：

标签属性的匹配

class="title"

class='title'

class=title

const attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)=("([^"]*)"|'([^']*)'|([^\s"'=<>`]+)/
"class=abc".match(attr);
// output
(6) ["class=abc", "class", "abc", undefined, undefined, "abc", index: 0, input: "class=abc", groups: undefined]
"class='abc'".match(attr);
// output
(6) ["class='abc'", "class", "'abc'", undefined, "abc", undefined, index: 0, input: "class='abc'", groups: undefined]

这个等实现的时候再仔细讲。可以参考一下文章。

AST解析器实战

那对于我们的项目来讲就可以写成这个样子

// <input v-model="message"/>
// <button @click='click'>{{message}}</button>
// 转换后的AST语法树
const parse = template => ({
    children: [{
            tag: 'input',
            props: {
                name: 'v-model',
                exp: {
                    content: 'message'
                },
            },
        },
        {
            tag: 'button',
            props: {
                name: '@click',
                exp: {
                    content: 'message'
                },
            },
            content:'{{message}}'
        }
    ],
})

Transform转换处理

前一段知识做的是抽象语法树，对于Vue3模板的特别转换就是在这里进行。

比如：vFor、vOn

在Vue三种也会细致的分为两个层级进行处理

compile-core 核心编译逻辑

AST-Parser

基础类型解析 v-for 、v-on

image-20200713183256931

compile-dom 针对浏览器的编译逻辑

v-html

v-model

v-clock

image-20200713183210079

const transfer = ast => ({
    children: [{
            tag: 'input',
            props: {
                name: 'model',
                exp: {
                    content: 'message'
                },
            },
        },
        {
            tag: 'button',
            props: {
                name: 'click',
                exp: {
                    content: 'message'
                },
            },
            children: [{
                content: {
                    content: 'message'
                },
            }]
        }
    ],
})

Generate生成渲染器

生成器其实就是根据转换后的AST语法树生成渲染函数。当然针对相同的语法树你可以渲染成不同结果。比如button你希望渲染成 button还是一个svg的方块就看你的喜欢了。这个就叫做自定义渲染器。这里我们先简单写一个固定的Dom的渲染器占位。到后面实现的时候我在展开处理。

const generator = ast => (observed, dom) => {
    // 重新渲染
    let input = dom.querySelector('input')
    if (!input) {
        input = document.createElement('input')
        input.setAttribute('value', observed.message)
        input.addEventListener('keyup', function () {
            observed.message = this.value
        })
        dom.appendChild(input)
    }
    let button = dom.querySelector('button')
    if (!button) {
        console.log('create button')
        button = document.createElement('button')
        button.addEventListener('click', () => {
            return config.methods.click.apply(observed)
        })
        dom.appendChild(button)
    }
    button.innerText = observed.message
}

关于发布时间

具体时间可以看大家可以看看官方时间表。官方时间表

目前在Vue3处于Beta版本,后面主要是处理稳定性问题。也就是说主要Api不会有很多改进。尤大神从直播中说虽然很多想法,但是大的变化最快也会出现在3.1上面了。所以目前的版本应该应该和正式版差异很小了。看来Q2能发布的可能性极大。

脑图

>>>>>>>️脑图链接<<<<<<<

渐进式手敲Vue3.0框架 - 2万字以上 - 持续更新

写作计划

Step00 NoMVVM

Step01 总体架构 - MVVM(Mock版)

接口定义

程序骨架

编译渲染函数

数据监听的实现

视图变化的监听

完整的代码

Step02 编译流程(Mock)

Parse解析器

Transform转换处理

Generate生成渲染器

关于发布时间

脑图

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

渐进式手敲Vue3.0框架 - 2万字以上 - 持续更新

写作计划

Step00 NoMVVM

Step01 总体架构 - MVVM(Mock版)

接口定义

程序骨架

编译渲染函数

数据监听的实现

视图变化的监听

完整的代码

Step02 编译流程(Mock)

Parse解析器

Transform转换处理

Generate生成渲染器

关于发布时间

脑图

热门文章

最新文章

相关课程

相关电子书

相关实验场景