完整版 Vue VS 非完整版 Vue

时间:2020-8-24 作者:admin

完整版

完整版支持从 html 中得到视图

  • 通过 compiler 编译器将带有’占位符’的 html 字符串 变成 DOM 节点
  • 当’占位符’被替换时,将直接修改 DOM 节点,不需要重新编译
  • 最后通过 DOM 节点分析得到最后的页面效果
  • 由于编译器比较复杂,占用代码体积较大,因此不推荐使用完整版 Vue

非完整版(运行时) + vue-loader

非完整版只支持用 js 构建视图

  • 由于不完整版没有 compiler 编译器,所以无法将 html 字符串 变成 DOM 节点
  • js 构建视图比较麻烦但由于非完整版体积小想要使用它怎么办?

借用webpack 中的 vue-loader

把 .vue 文件翻译成 h 构建方法

  • 在代码一开始 yarn build 时, vue-loader 将 html 字符串转化为 h函数,此时 html 已经被编译了
  • vue-loader 在 yarn build 时进行操作,完成转化无需下载它
  • 因此可以让用户下载只支持 h 函数的版本即非完整版 达到更好的使用体验

Vue 单元组件 (.vue 文件)

  • template 标签写 html 即写视图

  • script 标签写 除了视图之外的选项 且默认导出

  • style 标签写样式

    如何使用?

  • 在 main.js 中将 a.vue 导入

  • vue-loader 自动将其变成对象 a

  • 在 Vue 实例中使用 render() 返回一个 h函数

  • 即实现了将 template 标签里的 html 翻译成 h()

  • 实际上对象 a 有一个 render 方法,自动转化,因此无需在组件里写

    vue-loader的作用

    完整版 Vue VS 非完整版 Vue

    完整版 Vue VS 非完整版 Vue

版本区别

完整版 Vue VS 非完整版 Vue

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。