虽然自己用 Vue 已经有一段时间了,Vue 相关的项目也做了不少,但没有细看 Vue 的文档,总感觉自己学得不够深入,接下来一段时间我会从头开始梳理一遍 Vue 的基础知识

# 使用 Vue 实例的三种方式

  • 方法一:从 HTML 得到视图
    • 使用「完整版 Vue」
    • 通过 cdn 或 import 来引入 vue.js 或者 vue.min.js
    • 将视图写在 HTML 中或者写在 template 选项中
  • 方法二:用 JS 来构建视图
    • 使用「非完整版 Vue」
    • 通过 cdn 或 import 来引入 vue.runtime.js 或者 vue.runtime.min.js
    • 使用 render 函数
  • 方法三:使用 vue-loader(webpack 的一个 loader)
    • 使用「非完整版 Vue」
    • vue-loader 可以把 *.vue 文件翻译成 h 构建方法
    • 这种做法的缺点是,HTML 内就只有一个 div#app,对 SEO 不友好

# 完整版(运行时 + 编译器) v.s. 非完整版(只包含运行时)

对比如下:

Vue 完整版 (运行时 + 编译器)Vue 非完整版(只包含运行时)评价
特点有 compiler没有 compilercompiler 占 30% 体积
视图写在 HTML 中或者写在 template 选项中写在 render 函数里用 h 来创建标签h 是尤雨溪写好传给 render 的
cdn 引入vue.jsvue.runtime.js文件名不同,生产环境后缀为 .min.js
webpack 引入需要配置 alias默认使用此版尤雨溪配置的
@vue/cli 引入需要额外配置默认使用此版尤雨溪、蒋豪群配置的
// 需要编译器
new Vue({
  template: '<div></div>'
})
// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。

最佳实践:总是使用非完整版,然后配合 vue-loader 和 vue 单文件组件。

Vue 作者的思路:

  1. 为了保证用户体验,让用户下载的 JS 文件体积更小,但只 支持 h 函数
  2. 为了保证开发体验,让开发者可以直接在 vue 文件里写 HTML 标签,而 不写 h 函数
  3. 由此发明了 vue-loader,脏活儿让 loader 来做, vue-loader 把 vue 文件里的 HTML 转为 h 函数

# SEO 基本原理

  • 全称:Search Engine Optimization,中文:搜索引擎优化
  • 你可以认为搜索引擎就是在不停的发起 curl
  • 搜索引擎根据 curl 的结果来猜测页面的内容
  • 如果页面的内容是通过 JS 渲染上去的,则不利于 SEO
    • JS 创建 div
    • 比如 Vue 的 HTML 内初始就只有一个 div#app,这个 div 的内容是通过 JS 后面填充进去的,因此 Vue 不利于 SEO(可以用 SSR 来解决 Vue 的 SEO 问题)

解决「SEO 不友好」方法:

  • 原则上只要让 curl 能得到页面的信息,SEO 就能正常工作
  • 把 title、description、keyword、meta、h1、a 写好即可
  • 百度的 SEO 就是个笑话,充钱你就能变强
  • Google 其实可以获取 JS 创建的内容,但毕竟在墙外,国内还是别想了
更新于