跳至主要內容

Vue 程序运行过程

White...约 365 字大约 1 分钟

runtime-compilerruntime-only 区别,runtime-only 的性能更好,代码量更少(使用两种方式创建项目的时候,compiler 比 only 要大)。

  1. runtime-compiler 的处理过程

    vm.options.template —[parse]—> AST(抽象语法树) —[compile]—> vm.options.render(functions) —[render]—> virtual dom(虚拟 DOM) —[update]—> UI

  2. runtime-only 的处理过程

    render -> vdom -> UI

使用 runtime-only 的写法

// main.js
new Vue({
  el: '#app',
  render: (h) => h(App),
});

使用 runtime-compiler 的写法

// main.js
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
});

runtime-only 中的函数 h,实际上是 createElement 函数。所以上面这种写法可以改成如下

// createElement 的一种用法: createElement('标签',{标签的属性},[内容])
new Vue({
  el: '#app',
  render: (createElement) => {
    // 创建一个 <h1 class="box">Hello World</h1> 替换掉app挂载的元素
    return createElement('h1', { class: 'box' }, ['Hello World']);
    /*
     * 因为内容是个数组,所以可以这么写来实现嵌套
     * return createElement('h1', {class: 'box'}, ['Hello World', createElement('button',['按钮'])])
     */
  },
});

// createElement 还能接受一个组件作为参数
import cpn from './cpn';
new Vue({
  el: '#app',
  render: (createElement) => {
    // createElement的用法: createElement(组件)。如果将组件 cpn 换成 App,其实就跟 runtime-only 的写法是一样的了
    return createElement(cpn);
  },
});

更多关于 createElement 的内容,请见官方文档open in new window

runtime-only中是没有runtime-compiler前面从template —> AST的处理过程,那*.vue文件中的 template 是由谁处理的呢?
—— 由 package.json 中devDependencies引入的vue-template-compiler插件完成的

评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8