框架设计概览
第一章 权衡的艺术
第二章 框架设的核心要素
第三章 VUe.js的设计思路
声明式UI： Vue.js 3是一个声明式UI框架
声明式描述UI的方式有两种
1.模板描述
2.JavaScript对象描述
const vnode = {
tag: 'div',
props: {
onclick: () => alert('gl')
},
children: 'click me'
}
- 使用JavaScript对象来描述UI的方式，便是所谓的 虚拟DOM
- 一个组件要渲染的内容就是通过渲染函数来描述的
初始渲染器
渲染器的作用就是把虚拟DOM渲染为真是DOM
function renderer(vnode, continer) {
// 使用虚拟dom的属性创建节点
const el = document.createElement(vnode.tag);
// 遍历vnode属性，将节点的属性或方法添加到dom元素
for (const key in vnode.props) {
if (/^on/.test(key)) {
el.addEventListener(
key.substring(2).toLowerCase(),
vnode.props[key]
)
}
}
// 处理children
if (typeof vnode.children === 'string') {
el.appendChild(document.createTextNode(vnode.children))
} else if (Array.isArray(vnode.children)) {
vnode.children.array.forEach(child => {
renderer(child, el)
});
}
continer.appendChild(el)
}
渲染器函数接受两个参数：
- vnode：虚拟DOM对象
- container：一个真实的DOM元素
组件的本质
虚拟DOM除了可以描述真实DOM外，还可以描述组件。
组件就是一组DOM元素的封装
const vnode = {
tag:MyConpnent
}
当期描述组件的时候，tag属性所表述的不再是一个标签名称，而是
组件函数。但同时组件就一定时函数吗？当然不是，组件还可以是对象来表达。
模板的工作原理
无论是手写虚拟DOM还是使用模板，都属于声明式地描述UI，并且Vue同时支持这两种UI表示方式。
那么模板是怎么工作的----> 编译器
编译器的作用就是将模板编译为渲染函数
如下模板
<div @click='handler'>
click me
</div>
对于编译器来说，模板就是一个字符串，它会分析该字符串并生成一个功能与之相同的渲染函数。
render() {
return h('div',{
onClick:handler},'click me')
}
一个.vue文件就是一个组件.
<template>
<div @click='handler'>
click me
</div>
</template>
<script>
export default {
data() {
/*···*/},
methods:{
/*···*/},
}
</script>
template标签里的内容就是模板内容，编译器会把模板内容编译成渲染函数并添加到script标签块的组件对象上，所以最终在浏览器运行的代码是：
export default {
data() {
/*···*/},
methods:{
/*···*/},
render() {
return h('div',{
onClick:handler},'click me')
}
}
对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟DOM渲染为真实DOM，这就是模板的工作原理，也就是vue渲染页面的流程。