Vue 问题集锦（概念）

一 .computed 和 watch 的区别和运用的场景？

　　computed: 计算属性，依赖其余属性值，而且computed 的值有缓存，只有它依赖的值发生改变，下一次获取它的值才会从新计算。

　　watch: 更多的是 观察 的做用，相似数据的监听回调，每次监听的数据发生变化都会执行回调而后进行操做。

二. Vue 的父组件和子组件生命周期钩子函数执行顺序？

• 加载渲染过程

  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程

  父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父组件更新过程

  父 beforeUpdate -> 父 updated

• 销毁过程

  父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

三.  组件中 data 为何是一个函数？

　　 组件是用来复用的，js对象是引用类型，若是是组件的data是对象，那么做用域就没有隔离，自组件的data会相互影响，若是是函数，每一个实例能够维护一份一份被返回的对象的独立拷贝，组件之间不相互影响，而 new Vue 的实例不是复用，因此不存在引用对象的问题。

四. vue-router 中经常使用的 hash 和 history 路由模式实现原理吗？

　　1. hash:  location.hash 基于来实现

　　hash 路由模式的实现主要是基于下面几个特性：

• URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
• hash 值的改变，都会在浏览器的访问历史中增长一个记录。所以咱们能经过浏览器的回退、前进按钮控制hash 的切换；
• 能够经过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用  JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
• 咱们可使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

　　2. history : HTML5 提供的 History API 来实现的

　　history 路由模式的实现主要基于存在下面几个特性：

• pushState 和 repalceState 两个 API 来操做实现 URL 的变化 ；
• 咱们可使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
• history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时咱们须要手动触发页面跳转（渲染）

五. 虚拟DOM的优缺点？

　　优势：保证性能下限     无需手动操做DOM    跨平台 

　　缺点：没法进行极致优化

六. Vue 中的 Key 有什么做用？ 

　　key 是Vue 中 Vnode的惟一标示，经过这个 Key ，diff 的操做更加准确，快速。