跳到主要内容

基本原理

template 到 render 的过程（模版编译）​

vue 的模版编译过程主要如下：template -> ast -> render 函数

vue 在模版编译版本的码中会执行 compileToFunctions 将 template 转化为 render 函数：

CompileToFunctions 中的主要逻辑如下 ∶

（1）调用 parse 方法将 template 转化为 ast（抽象语法树）

  • parse 的目标：把 tamplate 转换为 AST 树，它是一种用 JavaScript 对象的形式来描述整个模板。
  • 解析过程：利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的 回调函数，来达到构造 AST 树的目的。

AST 元素节点总共三种类型：type 为 1 表示普通元素、2 为表达式、3 为纯文本

（2）对静态节点做优化

这个过程主要分析出哪些是静态节点，给其打一个标记，为后续更新渲染可以直接跳过静态节点做优化

深度遍历 AST，查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点，他们生成的 DOM 永远不会改变，这对运行时模板更新起到了极大的优化作用。

（3）生成代码 generate 将 ast 抽象语法树编译成 render 字符串并将静态部分放到 staticRenderFns 中，最后通过 new Function( render) 生成 render 函数。

vue 中如何定义一个全局的方法​

将方法挂载到 Vue.prototype 上面 （this）

// 在项目入口的 main.js 里配置
import Vue from "vue";
// 重置 message 防止重复点击重复弹出message弹框
import { message as Message } from "./resetMessage";
Vue.prototype.$message = Message;

定义一个专用模块来配置全局变量，然后通过 export 暴露出去，在需要的组件引入 global.vue

props​

不要在子组件中修改 props；如果你尝试修改，将会给你警告甚至报错。 不要解构 props。解构的 props 会失去响应性。除非用 toRef