高频面试题 —— vue

vue 钩子函数
vue 双向绑定
vuex
虚拟dom
v-show v-if
组件通信
methods 、computed 和watch区别
vue权限管理
scoped属性
前端路由

vue 钩子函数

beforeCreate→created→beforeMount→mounted→beforeUpdate→updated→beforeDestroy→destroyed

组件创建期间的4个钩子函数
beforecreated：el、methods 和 data 并未初始化
created:完成了 data、methods 数据的初始化，el 没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载

组件运行阶段的2个钩子函数
beforeUpdate：页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步
updated：页面和 data 数据已经保持同步了，都是最新的

销毁阶段的函数
beforeDestroy
destroyed

vue 双向绑定

MVVM模式（Model-View-ViewModel）

 - Model - 包含了业务和验证逻辑的数据模型
 - View - 定义屏幕中View的结构，布局和外观
 - ViewModel - 扮演“View”和“Model”之间的使者，帮忙处理 View 的全部业务逻辑

vue的数据双向绑定主要通过 Object.defineProperty() 方法来进行数据劫持以及发布者-订阅模式来实现的。
通过 Object.defineProperty() 来劫持各个属性的 setter 、 getter ，在数据变动时发布消息给订阅者，触发相应的监听回调

响应式系统简述

 - 任何一个 Vue Component 都有一个与之对应的 Watcher 实例。
 - Vue 的 data 上的属性会被添加 getter 和 setter 属性。
 - 当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)
 - data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data的组件去调用他们的 render 函数进行更新。

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

这个状态自管理应用包含以下几个部分

 - state，驱动应用的数据源；
 - view，以声明方式将 state 映射到视图；
 - actions，响应在 view 上的用户输入导致的状态变化。

虚拟dom

首先，我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢，更因为频繁变动DOM会造成浏览器的回流或者重回，这些都是性能的杀手，因此我们需要这一层抽象，在patch过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况.

其次，现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率.

最后，也是Virtual DOM最初的目的，就是更好的跨平台，比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual DOM,因为Virtual DOM本身是JavaScript对象.

虚拟dom原理流程

 - 用JavaScript模拟DOM树，并渲染这个DOM树
 - 比较新老DOM树，得到比较的差异对象
 - 把差异对象应用到渲染的DOM树。

v-show v-if

 - v-show指令：可以控制一个dom的显示隐藏（通过操作dom 的display属性）达到效果
 - v-if指令：主要是操控一个dom元素的创建与销毁（决定一个元素的存在与否）

  v-if 有更高的切换开销（元素的创建与销毁），而 v-show 有更高的初始渲染开销（display属性控制元素的显示与消失）。
  如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

vue 组件通信

 - 父->子组件间的数据传递：父组件通过 props 向下传递数据给子组件
 - 子->父组件间的数据传递：子组件通过 $emit 给父组件发送消息
 - 兄弟组件间的数据传递：路由URL参数、Bus通信、Vuex集中状态管理
 - 组件深层嵌套，祖先组件与子组件间的数据传递： $attrs $listeners

methods 、computed 和watch区别

methods 不存在缓存，执行一次运行一次，执行n次，运行n次
computed 当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。data 数据变化，computed 也跟着变化，当data中数据没有发生改变时，我们调用 computed 中函数n次，只会进行缓存（执行一次）
watch 数据变化时执行异步或开销较大的操作，可以随时修改状态的变化。在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择

computed 是计算，计算是通过变量计算来得出数据，是通过几个数据的变化，来影响一个数据
watch 是观察，观察一个特定的值，根据被观察者的变动进行相应的变化，是可以一个数据的变化，去影响多个数据
methods 是方法
computed 和 watch 都是vue对监听器的实现，只不过computed主要用于对同步数据的处理，watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。

vue权限管理

一、整体思路
	后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用 addRoutes 动态挂载路由。

二、实现要点
	（1）路由定义，分为初始路由和动态路由，一般来说初始路由只有 login，其他路由都挂载在 home 路由之下需要动态挂载。
	（2）用户登录，登录成功之后得到 token，保存在 sessionStorage，跳转到 home，此时会进入路由拦截根据 token 获取用户权限列表。
	（3）全局路由拦截，根据当前用户有没有 token 和 权限列表进行相应的判断和跳转，当没有 token 时跳到 login，当有 token 而没有权限列表时去发请求获取权限等等逻辑。
	（4）处理用户权限，在 store.js 定义一个模块 permission.js，专门用于处理用户权限相关的逻辑，用户权限列表、菜单列表都保存在此模块；
	（5）用户权限列表、菜单列表的处理，前端的路由要和后端返回的权限有一个唯一标识（一般用路由名做标识符），根据此标识筛选出对应的路由。
	（6）左侧菜单，要和用户信息、用户管理模块使用的菜单信息一致，统一使用保存在 store 中的变量。
三、总结
	缺点：
		全局路由守卫里，每次路由跳转都要做判断；
		每次刷新页面，需要重新发请求获取用户权限；
		退出登录时，需要刷新一次页面将动态添加的路由以及权限信息清空；
	优点：
		菜单与路由分离，菜单的修改、添加、删除由后端控制，利于后期维护；
		使用 addRoutes 动态挂载路由，可控制用户不能在 url 输入相关地址进行跳转；

scoped

在style标签上使用scoped属性主要是实现样式的私有化，防止对全局样式造成污染。

scoped的渲染规则
1.给HTML的dom节点添加一个不重复的data属性(例如 data-v-5558831a)来唯一标识这个dom 元素
2.在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式
3.如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

scoped穿透

1.在模板中使用两次style标签
	<style lang="scss">
	    /*添加要覆盖的样式*/
	</style>
	<style lang="scss" scoped>
	    /* local styles */
	</style>
	
2.使用 >>>或者 /deep/ 操作符（Sass 之类的预处理器无法正确解析 >>>，可以使用/deep/）
<style lang="scss" scoped>
	.box {
	  /deep/ input {
	    width: 166px;
	    text-align: center;
	  }
	}
</style>
或者
<style lang="scss" scoped>
	.box >>> input {
	    width: 166px;
	    text-align: center;
	  }
	}
</style>

vue 前端路由