vue-005 编译器

1.带编译器的版本(完全构建)

// 编译器负责将模板作为字符串接收,当你使用模板属性时,它都会将模板转化为虚拟 dom 对象
// 在控制台体验一下
const res = Vue.compile("<p>Hello</p>"); //将模板作为字符串接收
res; // 返回一个虚拟dom的渲染函数

2.不带编译器的版本(运行时编译)

• 不使用编译器我们应该如何将对象传递给视图呢

  • 使用 render 函数来构建我们的模板

let vm = Vue.createApp({
  data() {
    return {
      message: "Hello world!!",
    };
  },
  render() {
    return Vue.h("h1", this.message);
  },
});

总结

• 两种的唯一区别在于编译器本身
• h 是超级脚本的缩写

• 是否有编译器决定我们的模板存在于哪里

  • 有:vue 视图实例外,方便组织和管理
  • 无:使用 render 函数在 vue 视图实例内

• 在没有编译器的情况下使用 vue

  1. 优点:文件的大小减小
  2. 缺点:增加加载时间
  3. 缺点:如果没有适当的工具,它会更难阅读和管理