声明式地描述 UI
Vue.js采用模板的方式来描述UI,但它同样支持使用虚拟DOM来描述UI。虚拟DOM要比模板更加灵活,但模板要比虚拟DOM更加直观。
import { h } from "vue";
export default {
render() {
return h("h1", { onClick: handler }); //虚拟DOM
},
};
h 函数的作用是让我们编写虚拟 DOM 变得更加轻松
初识渲染器
虚拟 DOM 是一个用来描述真实 DOM 的 javascript 对象,渲染器则是把虚拟 DOM 渲染为真实 DOM 的工具;
渲染器 renderer 有两个参数,一个是 vnode(虚拟 DOM 对象),一个是 container(真实 DOM 元素,作为挂载点)
renderer(vnode,document.body)
组件的本质
组件并不是真实的 DOM,而是一组 DOM 元素的封装,虚拟 DOM 也可以描述组件;
Vue.js中的有状态的组件就是使用对象结构来表达的。
模板的工作原理
编译器的作用其实就是将模板编译为渲染函数
.vue 文件中<template>
就是将要编译的模板内容,在打包程序编译以后,会将模板内容编译成渲染函数并添加到<script>
标签块的组件对象上;
.vue 文件最终在浏览器中运行的代码是下面这样的:
export default {
data() {
/**/
},
methods: {
handles: () => {
/**/
},
},
render() {
return h("div", { onClick: handler }, "click me");
},
};
Vue.js 是各个模块组成的有机整体
组件的实现依赖于渲染器,模板的编译依赖于编译器,并且编译后生成的代码时根据渲染器和虚拟DOM的设计决定的,因此Vue.js的各个模块之间是互相关联、互相制约的,共同构成一个有机整体。
渲染器需要去寻找更新变化的内容,而每次更新一点内容都需要在整个虚拟 DOM 对象中去寻找更新点,这样对渲染器的压力比较大,所以编译器在编译的阶段需要标记哪些字段是动态的,哪些是静态的,这样渲染的时候就能高效找到更新点;