一. v-if和v-show

v-if 如果条件不成立不会渲染当前指令所在节点的 dom 元素

v-show 只是切换当前 dom 的显示或者隐藏

v-show 只是在display: none和 display: block 之间切换。⽆论初始条件是什么 都会被渲染出来，后⾯只需要切换CSS，DOM还是⼀直保留着的。所以总的来说 v- show 在初始渲染时有更⾼的开销，但是切换开销很⼩，更适合于频繁切换的场景。

v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时，组件就不会被渲染，直到条件为true ，并且切换条件时会触发销毁/挂载组件，所以总的来说在切换时开 销更⾼，更适合不经常切换的场景。并且基于 v-if 的这种惰性渲染机制，可以在必要的时候才去渲染组件，减少整个 ⾯的 初始渲染开销。

总结： v-if 按照条件是否渲染， v-show 是 display 的 block 或 none

二. v-if和v-for

v-for 会比 v-if 的优先级高一些,如果连用的话会把 v-if 给每个元素都添加一下,会造成性能问题

对 应 源 码

const VueTemplateCompiler = require('vue-template-compiler');

let r1 = VueTemplateCompiler.compile(`<div v-if="false" v-for="i in 3">hello</div>`);.

/**

with(this) {

return _l((3), function (i) {

return (false) ? _c('div', [_v("hello")]) : _e()

})

}

*/

console.log(r1.render);

三. v-html存在的问题

可能会导致 xss 攻击

v-html 会替换掉标签内部的子元素

对 应 源 码

let template = require('vue-template-compiler');

let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`)

// with(this){return _c('div',{domProps:{"innerHTML":_s('<span>hello</span>')}})}

console.log(r.render);

if (key === 'textContent' || key === 'innerHTML') {

if (vnode.children) vnode.children.length = 0

if (cur === oldProps[key]) continue

// #6601 work around Chrome version <= 55 bug where single textNode

// replaced by innerHTML/textContent retains its parentNode property

if (elm.childNodes.length === 1) {

elm.removeChild(elm.childNodes[0])

}

四. Keep-alive

keep-alive 可以实现组件的缓存，当组件切换时不会对当前组件进行卸载,常用的 2 个属性include/exclude,2 个生命周期 activated,deactivated

五. action和mutation区别

mutation 是同步更新数据(内部会进行是否为异步方式更新数据的检测)

action 异步操作，可以获取数据后调用 mutation 提交最终数据

六. Vue.js双向绑定

双向绑定数据的原理

vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter在数据变动时发布 消息给订阅者，触发相应的监听回调Vue.js实现数据双向绑定的原理 Object.defineProperty()

vue实现数据双向绑定主要是：采⽤数据劫持结合发布者-订阅者模式的⽅式，通过Object.defineProperty() 来劫持各个属性的setter ，getter在数据变动时发布消息给订阅者，触发相应监听回调。当把⼀个普通 Javascript对象传给Vue 实例来作 为它的 data选项时，Vue将遍历它的属性，⽤ Object.defineProperty()将它们转为 getter/setter 。⽤户看不到 getter/setter ，但是在内部它们让 Vue 追踪依 赖，在属性被访问和修改时通知变化

vue 的数据双向绑定

将 MVVM 作为数据绑定的⼊⼝，整合 Observer ， Compile 和 Watcher三者，通过 Observer 来监听⾃⼰的 model 的数据变化，通过Compile来解 析编译模板指令（ vue 中是⽤来解析 {{}} ），最终利⽤ watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（ input ）—> 数据 model 变更双向绑定效果