目录：

①v-show 与 v-if 区别
②动态绑定class的方法
③计算属性和 watch 的区别
④怎样理解单向数据流
⑤keep-alive
⑥自定义组件的语法糖 v-model 是怎样实现的
⑦生命周期
⑧组件通信
⑨路由跳转
⑩vue-router 有哪几种导航钩子
★Vue.js 2.x 双向绑定原理
★什么是 MVVM，与 MVC 有什么区别
★vuex
★this.$nextTick()

v-show 与 v-if 区别：

1、v-hsow和v-if的区别： v-show是css切换，v-if是完整的销毁和重新创建。
2、使用 频繁切换时用v-show，运行时较少改变时用v-if
3、v-if=‘false’ v-if是条件渲染，当false的时候不会渲染

绑定 class 的数组用法：

对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
数组方法 v-bind:class="[class1, class2]"
行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"

计算属性和 watch 的区别：

计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。
所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。

说出一下区别会加分

computed 是一个对象时，它有哪些选项？
computed 和 methods 有什么区别？
computed 是否能依赖其它组件的数据？
watch 是一个对象时，它有哪些选项？
有get和set两个选项
2.methods是一个方法，它可以接受参数，而computed不能，computed是可以缓存的，methods不会。
3.computed可以依赖其他computed，甚至是其他组件的data
4.watch 配置
handler
deep 是否深度
immeditate 是否立即执行

总结：

当有一些数据需要随着另外一些数据变化时，建议使用computed。 当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watcher

事件修饰符

1、绑定一个原生的click事件， 加native，
2、其他事件修饰符
3、stop prevent self
4、组合键 click.ctrl.exact 只有ctrl被按下的时候才触发

组件中 data 为什么是函数

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？
因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

keep-alive

在动态组件上使用

自定义组件的语法糖 v-model 是怎样实现的

Vue v-model原理解析

Render 函数 怎样理解单向数据流

这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：
在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：

  props: {
    value: String
  },
  data () {
    return {
      currentValue: this.value
    }
  }
}

如果是对 prop 值的转换，可以使用计算属性：

  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase();
    }
  }
}

生命周期

创建前后 beforeCreate/created在beforeCreate 阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象有了，el还没有。
载入前后 beforeMount/mounted在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前未虚拟的DOM节点，data尚未替换。在mounted阶段，vue实例挂载完成，data成功渲染。
更新前后 beforeUpdate/updated当data变化时，会触发beforeUpdate和updated方法。这两个不常用，不推荐使用。
销毁前后beforeDestory/destoryed beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后，触发的destroyed。

组件间的通信

1. 父子 props/event parentchildren ref provide/inject
2. 兄弟 bus vuex
3. 跨级 bus vuex provide.inject

路由的跳转方式

一般有两种

<router-link to='home'> router-link标签会渲染为<a>标签，咋填template中的跳转都是这种；
另一种是编程是导航 也就是通过js跳转 比如 router.push('/home')

Vue.js 2.x 双向绑定原理

这个问题几乎是面试必问的，回答也是有深有浅。基本上要知道核心的 API 是通过 Object.defineProperty() 来劫持各个属性的setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）。 cn.vuejs.org/v2/guide/re…

什么是 MVVM，与 MVC 有什么区别

www.ruanyifeng.com/blog/2015/0…

nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后，立即使用这个回调函数，获取更新后的 DOM。

vm.msg = 'Hello'
// DOM 还未更新
Vue.nextTick(function () {
  // DOM 更新
})

                                    web前端☆喜欢就关注我吧！