知识总结：Vue

1、响应式的好处

对某些数据的修改就能自动更新视图，让开发者不用再去操作DOM，有更多的时间去思考业务逻辑。

2、Vue的优点及缺点

首先Vue最核心的两个特点，响应式 和 组件化。

响应式：这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，通过虚拟DOM让我们可以用数据来操作DOM，而不必去操作真实的DOM，提升了性能。且让开发者有更多的时间去思考业务逻辑。

组件化：把一个单页应用中的各个模块拆分到一个个组件当中，或者把一些公共的部分抽离出来做成一个可复用的组件。所以组件化带来的好处就是，提高了开发效率，方便重复使用，使项目的可维护性更强。

虚拟DOM，当然，这个不是vue中独有的。

缺点：基于对象配置文件的写法，也就是options写法，开发时不利于对一个属性的查找。另外一些缺点，在小项目中感觉不太出什么，vuex的魔法字符串，对ts的支持。兼容性上存在一些问题。不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多

3、Vue中hash模式和history模式的区别

01.  显示上不同

最明显的是在显示上，hash 模式的 URL 中会夹杂着#号，而 history 没有

02. Vue底层对它们的实现方式不同

hash模式是依靠 onhashchange 事件(监听location.hash的改变)

history模式是主要是依靠的 TML5 history 中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈，还可以对浏览器记录进行修改。

当真正需要通过 URL 向后端发送 HTTP 请求的时候，比如常见的用户手动输入 URL 后回车，或者是刷新(重启)浏览器，这时候 history 模式需要后端的支持。因为 history 模式下，前端的 URL 必须和实际向后端发送请求的 URL 一致，例如有一个 URL 是带有路径 path 的(例如 www.lindaidai.wang/blogs/id)，如果后端没有对这个路径做处理的话，就会返回404错误。所以需要后端增加一个覆盖所有情况的候选资源，一般会配合前端给出的一个404页面

hash:

window.onhashchange = function(event){
  // location.hash获取到的是包括#号的，如"#heading-3"
  // 所以可以截取一下
  let hash = location.hash.slice(1);
}

4、在不使用框架的情况下，如何实现组件按需加载？

用 import 来按需引入，或者借助 babel-plugin-import 实现

7、vue全家桶

        Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。

        概括起来就是：1.项目构建工具；2.路由；3.状态管理；4.http请求工具

8、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数

    全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

    钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

    钩子函数参数：el、binding

2、css只在当前组件起作用

答：在style标签中写入scoped即可 例如：

<style scoped></style>

3、$route和$router的区别

答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象，包括了路由的跳转方法，钩子函数等。

4、vue.js的两个核心是什么？

    数据驱动、组件系统

5、Vue --- 列表页带参数进详情页（router-link）

① 用params传参

<router-link 
    :to="{ name:'msgDetail', params: {id: item.msg_id} }"
>
（注意：用params传参这里是命名路由，用name）
</router-link>

路由配置如下： 

export default new Router({
routes: [
 {
   path: '/msgDetail/:id',
   name: 'msgDetail',
   component: msgDetail
 }
]

详情页接收参数：

this.$route.params.id // （注意：这里是$route，而不是$router）

② 用query传参

<router-link 
    :to="{ path: '/msgDetail', query: {id: item.msg_id} }"
>
（注意：用query传参这里是带查询参数，用path）
</router-link>

路由配置如下：

export default new Router({
routes: [
 {
   path: '/msgDetail',
   name: 'msgDetail',
   component: msgDetail
 }
]

详情页接收参数：

this.$route.query.id // （注意：这里是$route，而不是$router）