vue 中常见考点

1、计算属性和方法的区别

参考官方回答：https://cn.vuejs.org/v2/guide/computed.html

2、父组件访问子组件实例的方法

• vm.$children——不保证顺序，也不是响应式的
• vm.$slots——用来访问被插槽分发的内容。每个具名插槽有其相应的属性(例如：slot="foo"中的内容将会在vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。
• vm.$refs——一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。

3、Vue的双向绑定原理
Vue实现这种数据双向绑定的效果，需要三大模块：

• Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者

• Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

• Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

4、Object.defineProperty()对数据劫持有什么弊端？

• 该方法对数组的支持不是很好。例如数组arr,对此数组通过Object.defineProperty()方法设置setter,getter函数。当对arr整个赋值操作时会触发setter函数，例如arr=[1,3]。若对arr的某个下标进行赋值操作，则不会触发setter函数，例如arr[1]=3,不会触发。

• 为解决此类问题，官方框架重写了数组的一些方法。
  push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7中方法进行了重写。

5、vue-router 中hash 和history模式的原理

• hash模式：默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
  hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

  window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  }

• history模式：这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
  URL 就像正常的 url，例如 http://yoursite.com/user/id
  还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。
  所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
  相关事件：pushState,replaceState

• 在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

6、nextTick是干嘛的？

• 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。修改数据是一个同步任务，而更新DOM是异步任务。

• 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉mounted

7、axios做一些缓存优化的功能，key如何定义
~~~