# Vue 部分

# vue 的优点是什么？

• 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当Model变化的时候View也可以不变
• 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
• 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

# 请详细说下你对 vue 生命周期的理解

答：总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后

• 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el 还没有
• 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
• 更新前/后：当data变化时，会触发beforeUpdate和updated方法
• 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在 什么是 vue 生命周期？
• 答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 Dom→ 渲染、更新 → 渲染、销毁等一系列过程，称之为 Vue 的生命周期。 vue 生命周期的作用是什么？
• 答：它的生命周期中有多个事件钩子，让我们在控制整个 Vue 实例的过程时更容易形成好的逻辑。 vue 生命周期总共有几个阶段？
• 答：它可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。 第一次页面加载会触发哪几个钩子？
• 答：会触发下面这几个beforeCreate、created、beforeMount、mounted。 DOM 渲染在哪个周期中就已经完成？
• 答：DOM渲染在mounted中就已经完成了

# 请列举出 3 个 Vue 中常用的生命周期钩子函数？

• created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算,watch/event事件回调. 然而, 挂载阶段还没有开始,$el属性目前还不可见
• mounted:el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。
• activated:keep-alive组件激活时调用

# NextTick

nextTick可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的DOM

# Vue 实现数据双向绑定的原理：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变更双向绑定效果。

# Vue 组件间的参数传递

# 父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据；

• 子组件传给父组件：$emit方法传递参数 非父子组件间的数据传递，兄弟组件传值

  eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适（虽然也有不少人推荐直接用VUEX，具体来说看需求）

# Vue 的路由实现：hash 模式 和 history 模式

• hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
• history模式：history采用HTML5的新特性；且提供了两个新方法：pushState()，replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

# vue 路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

• beforeEach主要有 3 个参数to，from，next。
• to：route即将进入的目标路由对象。
• from：route当前导航正要离开的路由。
• next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

# vuex 是什么？怎么使用？哪种功能场景使用它？

• 只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
• 在main.js引入store，注入。新建了一个目录store，… export
• 场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
• state：Vuex使用单一状态树,即每个应用将仅仅包含一个store实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
• mutations：mutations定义的方法动态修改Vuex的store中的状态或数据
• getters：类似vue的计算属性，主要用来过滤一些数据。
• action：actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view层通过store.dispath来分发action modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理

# v-if 和 v-show 区别

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

# $route和$router的区别

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

# 如何让 CSS 只在当前组件中起作用？

将当前组件的<style>修改为<style scoped>

# <keep-alive></keep-alive>的作用是什么？

• <keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染

  比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

# Vue 组件 data 为什么必须是函数

• 每个组件都是Vue的实例。
• 组件共享data属性，当data的值是同一个引用类型的值时，改变其中一个会影响其他

# 在 Vue 中使用插件的步骤

• 采用ES6的import ... from ...语法或CommonJS的require()方法引入插件
• 使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

# vue-cli 工程技术集合介绍

# 问题一：构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？

• vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。
• vue-router：vue官方推荐使用的路由框架。
• vuex：专为Vue.js应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。
• axios（ 或者fetch、ajax）：用于发起GET、或POST等http请求，基于Promise设计。
• vuex等：一个专为vue设计的移动端 UI 组件库。
• 创建一个emit.js文件，用于vue事件机制的管理。
• webpack：模块加载和vue-cli工程打包器。 问题二：vue-cli 工程常用的 npm 命令有哪些？
• 下载node_modules资源包的命令：

npm install

• 启动vue-cli开发环境的 npm 命令：

npm run dev

• vue-cli生成 生产环境部署资源 的npm命令：

npm run build

• 用于查看vue-cli生产环境部署资源文件大小的npm命令：

npm run build --report

在浏览器上自动弹出一个 展示vue-cli工程打包后app.js、manifest.js、vendor.js文件里面所包含代码的页面。可以具此优化vue-cli生产环境部署的静态资源，提升 页面 的加载速度

# 路由之间跳转？

# 声明式（标签跳转）

<router-link :to="index"></router-link>

# 编程式（ js 跳转）

router.push('index');

# 实现 Vue SSR

# 其基本实现原理

• app.js作为客户端与服务端的公用入口，导出Vue根实例，供客户端entry与服务端entry使用。客户端entry主要作用挂载到DOM上，服务端entry除了创建和返回实例，还进行路由匹配与数据预获取。
• webpack为客服端打包一个Client Bundle，为服务端打包一个Server Bundle。
• 服务器接收请求时，会根据url，加载相应组件，获取和解析异步数据，创建一个读取Server Bundle的BundleRenderer，然后生成html发送给客户端。
• 客户端混合，客户端收到从服务端传来的DOM与自己的生成的 DOM 进行对比，把不相同的DOM激活，使其可以能够响应后续变化，这个过程称为客户端激活 。为确保混合成功，客户端与服务器端需要共享同一套数据。在服务端，可以在渲染之前获取数据，填充到stroe里，这样，在客户端挂载到DOM之前，可以直接从store里取数据。首屏的动态数据通过window.__INITIAL_STATE__发送到客户端

  Vue SSR的实现，主要就是把Vue的组件输出成一个完整HTML,vue-server-renderer就是干这事的

• Vue SSR需要做的事多点（输出完整 HTML），除了complier -> vnode，还需如数据获取填充至HTML、客户端混合（hydration）、缓存等等。 相比于其他模板引擎（ejs,jade等），最终要实现的目的是一样的，性能上可能要差点

# Vue computed 实现

• 建立与其他属性（如：data、Store）的联系；
• 属性改变后，通知计算属性重新计算

  实现时，主要如下

• 初始化data， 使用Object.defineProperty把这些属性全部转为getter/setter。
• 初始化computed, 遍历computed里的每个属性，每个computed属性都是一个watch实例。每个属性提供的函数作为属性的getter，使用Object.defineProperty转化。
• Object.defineProperty getter依赖收集。用于依赖发生变化时，触发属性重新计算。
• 若出现当前computed计算属性嵌套其他computed计算属性时，先进行其他的依赖收集

# Vue complier 实现

• 模板解析这种事，本质是将数据转化为一段html，最开始出现在后端，经过各种处理吐给前端。随着各种mv*的兴起，模板解析交由前端处理。
• 总的来说，Vue complier是将template转化成一个render字符串。

  可以简单理解成以下步骤：

• parse过程，将template利用正则转化成AST抽象语法树。
• optimize过程，标记静态节点，后diff过程跳过静态节点，提升性能。
• generate过程，生成render字符串

# 怎么快速定位哪个组件出现性能问题

用timeline工具。 大意是通过timeline来查看每个函数的调用时常，定位出哪个函数的问题，从而能判断哪个组件出了问题