vue面试题以及答案（Vue经典面试题入门道精通的面试题）
vue面试题以及答案（Vue经典面试题入门道精通的面试题）1）用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；优点：3）实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。4）实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重
Vue 是如何实现数据双向绑定的？Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。
Vue 主要通过以下 4 个步骤来实现数据双向绑定的：
1）实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
2）实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
3）实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。
4）实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。
说你对 SPA 单页面的理解，它的优缺点分别是什么？SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
1）用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
2）基于上面一点，SPA 相对对服务器压力小；
3）前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
1）初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
2）前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
3）SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。
Class 与 Style 如何动态绑定？Class 可以通过对象语法和数组语法进行动态绑定：
- 对象语法：
<div v-bind:class="{ active: isActive 'text-danger': hasError }"></div>
data: {
isActive: true
hasError: false
}
复制代码
- 数组语法：
<div v-bind:class="[isActive ? activeClass : '' errorClass]"></div>
data: {
activeClass: 'active'
errorClass: 'text-danger'
}
复制代码
Style 也可以通过对象语法和数组语法进行动态绑定：
- 对象语法：
<div v-bind:style="{ color: activeColor fontSize: fontSize 'px' }"></div>
data: {
activeColor: 'red'
fontSize: 30
}
复制代码
- 数组语法：
<div v-bind:style="[styleColor styleSize]"></div>
data: {
styleColor: {
color: 'red'
}
styleSize:{
fontSize:'23px'
}
}怎样理解 Vue 的单向数据流？
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
有两种常见的试图改变一个 prop 的情形 :
- 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
props: ['initialCounter']
data: function () {
return {
counter: this.initialCounter
}
}
复制代码
- 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性
props: ['size']
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}谈谈你对 Vue 生命周期的理解？
（1）生命周期是什么？
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
（2）各个生命周期的作用
|
生命周期 |
描述 |
|
beforeCreate |
组件实例被创建之初，组件的属性生效之前 |
|
created |
组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用 |
|
beforeMount |
在挂载开始之前被调用：相关的 render 函数首次被调用 |
|
mounted |
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 |
|
beforeUpdate |
组件数据更新之前调用，发生在虚拟 DOM 打补丁之前 |
|
update |
组件数据更新之后 |
|
activited |
keep-alive 专属，组件被激活时调用 |
|
deactivated |
keep-alive 专属，组件被销毁时调用 |
|
beforeDestory |
组件销毁前调用 |
|
destoryed |
组件销毁后调用 |
