[{"data":1,"prerenderedAt":288},["ShallowReactive",2],{"content:\u002F2020\u002Fvue-difference-version":3,"surround:\u002F2020\u002Fvue-difference-version":282},{"id":4,"title":5,"body":6,"categories":258,"date":260,"description":169,"draft":261,"extension":262,"image":263,"meta":264,"navigation":266,"path":267,"permalink":263,"published":263,"readingTime":268,"recommend":263,"references":263,"seo":273,"sitemap":274,"stem":275,"tags":276,"type":280,"updated":263,"__hash__":281},"content\u002Fposts\u002F2020\u002Fvue-difference-version.md","Vue 两个版本的区别（完整版 v.s. 运行时版）",{"type":7,"value":8,"toc":251},"minimark",[9,14,59,63,67,162,173,176,183,186,208,212,234,237],[10,11,13],"h2",{"id":12},"使用-vue-实例的三种方式","使用 Vue 实例的三种方式",[15,16,17,32,46],"ul",{},[18,19,20,21],"li",{},"方法一：从 HTML 得到视图\n",[15,22,23,26,29],{},[18,24,25],{},"使用「完整版 Vue」",[18,27,28],{},"通过 cdn 或 import 来引入 vue.js 或者 vue.min.js",[18,30,31],{},"将视图写在 HTML 中或者写在 template 选项中",[18,33,34,35],{},"方法二：用 JS 来构建视图\n",[15,36,37,40,43],{},[18,38,39],{},"使用「非完整版 Vue」",[18,41,42],{},"通过 cdn 或 import 来引入 vue.runtime.js 或者 vue.runtime.min.js",[18,44,45],{},"使用 render 函数",[18,47,48,49],{},"方法三：使用 vue-loader（webpack 的一个 loader）\n",[15,50,51,53,56],{},[18,52,39],{},[18,54,55],{},"vue-loader 可以把 *.vue 文件翻译成 h 构建方法",[18,57,58],{},"这种做法的缺点是，HTML 内就只有一个 div#app，对 SEO 不友好",[10,60,62],{"id":61},"完整版运行时-编译器-vs-非完整版只包含运行时","完整版（运行时 + 编译器） v.s. 非完整版（只包含运行时）",[64,65,66],"p",{},"对比如下：",[68,69,70,89],"table",{},[71,72,73],"thead",{},[74,75,76,80,83,86],"tr",{},[77,78],"th",{"align":79},"center",[77,81,82],{"align":79},"Vue 完整版 （运行时 + 编译器）",[77,84,85],{"align":79},"Vue 非完整版（只包含运行时）",[77,87,88],{"align":79},"评价",[90,91,92,107,121,135,149],"tbody",{},[74,93,94,98,101,104],{},[95,96,97],"td",{"align":79},"特点",[95,99,100],{"align":79},"有 compiler",[95,102,103],{"align":79},"没有 compiler",[95,105,106],{"align":79},"compiler 占 30% 体积",[74,108,109,112,115,118],{},[95,110,111],{"align":79},"视图",[95,113,114],{"align":79},"写在 HTML 中或者写在 template 选项中",[95,116,117],{"align":79},"写在 render 函数里用 h 来创建标签",[95,119,120],{"align":79},"h 是尤雨溪写好传给 render 的",[74,122,123,126,129,132],{},[95,124,125],{"align":79},"cdn 引入",[95,127,128],{"align":79},"vue.js",[95,130,131],{"align":79},"vue.runtime.js",[95,133,134],{"align":79},"文件名不同，生产环境后缀为 .min.js",[74,136,137,140,143,146],{},[95,138,139],{"align":79},"webpack 引入",[95,141,142],{"align":79},"需要配置 alias",[95,144,145],{"align":79},"默认使用此版",[95,147,148],{"align":79},"尤雨溪配置的",[74,150,151,154,157,159],{},[95,152,153],{"align":79},"@vue\u002Fcli 引入",[95,155,156],{"align":79},"需要额外配置",[95,158,145],{"align":79},[95,160,161],{"align":79},"尤雨溪、蒋豪群配置的",[163,164,170],"pre",{"className":165,"code":167,"language":168,"meta":169},[166],"language-js","\u002F\u002F 需要编译器\nnew Vue({\n  template: '\u003Cdiv>{{ hi }}\u003C\u002Fdiv>'\n})\n\n\u002F\u002F 不需要编译器\nnew Vue({\n  render (h) {\n    return h('div', this.hi)\n  }\n})\n","js","",[171,172,167],"code",{"__ignoreMap":169},[64,174,175],{},"当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。",[177,178,180],"alert",{"type":179},"info",[64,181,182],{},"最佳实践：总是使用非完整版，然后配合 vue-loader 和 vue 单文件组件。",[64,184,185],{},"Vue 作者的思路：",[187,188,189,196,202],"ol",{},[18,190,191,192],{},"为了保证用户体验，让用户下载的 JS 文件体积更小，但只",[193,194,195],"strong",{},"支持 h 函数",[18,197,198,199],{},"为了保证开发体验，让开发者可以直接在 vue 文件里写 HTML 标签，而",[193,200,201],{},"不写 h 函数",[18,203,204,205],{},"由此发明了 vue-loader，脏活儿让 loader 来做，",[193,206,207],{},"vue-loader 把 vue 文件里的 HTML 转为 h 函数",[10,209,211],{"id":210},"seo-基本原理","SEO 基本原理",[15,213,214,217,220,223],{},[18,215,216],{},"全称：Search Engine Optimization，中文：搜索引擎优化",[18,218,219],{},"你可以认为搜索引擎就是在不停的发起 curl",[18,221,222],{},"搜索引擎根据 curl 的结果来猜测页面的内容",[18,224,225,226],{},"如果页面的内容是通过 JS 渲染上去的，则不利于 SEO\n",[15,227,228,231],{},[18,229,230],{},"JS 创建 div",[18,232,233],{},"比如 Vue 的 HTML 内初始就只有一个 div#app，这个 div 的内容是通过 JS 后面填充进去的，因此 Vue 不利于 SEO（可以用 SSR 来解决 Vue 的 SEO 问题）",[64,235,236],{},"解决「SEO 不友好」方法：",[15,238,239,242,245,248],{},[18,240,241],{},"原则上只要让 curl 能得到页面的信息，SEO 就能正常工作",[18,243,244],{},"把 title、description、keyword、meta、h1、a 写好即可",[18,246,247],{},"百度的 SEO 就是个笑话，充钱你就能变强",[18,249,250],{},"Google 其实可以获取 JS 创建的内容，但毕竟在墙外，国内还是别想了",{"title":169,"searchDepth":252,"depth":252,"links":253},4,[254,256,257],{"id":12,"depth":255,"text":13},2,{"id":61,"depth":255,"text":62},{"id":210,"depth":255,"text":211},[259],"学习笔记","2020-06-30 20:56:48",false,"md",null,{"comments":261,"slots":265},{},true,"\u002F2020\u002Fvue-difference-version",{"text":269,"minutes":270,"time":271,"words":272},"4 min read",3.51,210600,702,{"title":5,"description":169},{"loc":267},"posts\u002F2020\u002Fvue-difference-version",[277,278,279],"Vue","SEO","Vue compiler","tech","QbModhrDBYnc5BVt0P5LhOnoKb7APwMjkc1Rb3aB62E",[263,283],{"title":284,"path":285,"stem":286,"date":287,"type":280,"children":-1},"浅析前端路由","\u002F2021\u002Ffrontend-routing","posts\u002F2021\u002Ffrontend-routing","2021-02-22 17:12:30",1793699840097]