style-scope作用及实现原理
- 什么是scope ？
在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。
- scoped的实现原理
Vue中的scoped属性的效果主要是通过PostCss实现的。既:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。
总结：scoped的渲染规则：给HTML的dom节点添加一个唯一的data属性(例如: data-v-55541445b)来唯一标识这个dom 元素
- scoped样式穿透
stylus eg：.wrapper >>> .class
less/scss eg：.wrapper /deep/ .class
虚拟dom是什么？有什么作用？
虚拟dom实际上是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上
在Javascript对象中，虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别
创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应
真实DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的.真实的DOM节点，哪怕一个最简单的DIV也包含着很多属性,操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验。而通过VNode，更新DOM节点，虚拟DOM不会立即操作DOM，而是将这次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，避免大量的无谓计算，从而有效节省渲染性能。
template是如何渲染的
vue中的模板template无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的HTML语法，所有需要将template转化成一个JavaScript函数，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素，就可以让视图跑起来了，这一个转化的过程，就成为模板编译。
模板编译又分三个阶段，解析parse，优化optimize，生成generate，最终生成可执行函数render。
parse阶段：用大量的正则表达式对template字符串进行解析，将标签、指令、属性等转化为抽象语法树AST。
optimize阶段：遍历AST，找到其中的一些静态节点并进行标记，方便在页面重渲染的时候进行diff比较时，直接跳过这一些静态节点，优化runtime的性能。
generate阶段：将最终的AST转化为render函数字符串\
v-if和v-show的区别
- v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；\
- v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；\
- v-if 有更高的切换开销，v-show 切换开销小；\
- v-if 有配套的 v-else-if 和 v-else，而 v-show 没有\
- v-if 可以搭配 template 使用，而 v-show 不行
