Vue前端面试整理（原理类）

Vue

基本知识

简介

Vue是一套构建用户界面的渐进式前端框架，可以直接通过使用script标签引入vue当然，如果要构建大型应用就需要cli
特点
1、 双向数据绑定：实现view和model的自动同步（数据绑定+DOM事件监听），即页面会自动对页面中某些数据的变化作出同步的响应（通过指令v-model实现）
双向绑定(MVVM)由三个重要组成，数据层（Model）视图层（View）业务逻辑层(viewModel)
数据变化跟新视图，视图变化更新数据
实现：数据劫持+发布订阅模式来实现的 核心就是Object.defineProperty()
2、 组件化开发，把应用中的模块分为一个个单独的组件，在父级应用中写好各个组件的表签，并在组件标签中写好要传入组件的参数即可 应用由组件树构成
3、 Virtual Dom 本质用原生的js对象去描述一个DOM节点
4、 声明式渲染，用简洁的模板语法来声明式地将数据渲染进DOM系统
5、 单项数据流：数据从父组件传到子组件，子组件无权修改父组件传来的值，只能请求父组件自己对数据进行修改（实在想修改,在data中定义一个，并用prop值初始化它，之后用$emit通知父组件改）
缺点：对浏览器有要求，要ie.8以上
社区活跃度比不上react
优点：中文文档 只关注视图层，属于轻量级框架

生命周期

BeforeCreate：在实例初始化之后,数据观测和事件配置之前调用
数据观测 data observe
事件配置 event/watcher
Data、method、computed 、watcher

Created ：实例创建完成之后调用，但没有$el data数据已创建，可以发起异步请求，初始化数据
beforeMount 在挂载前调用：render首次被调用
mount 挂载完成之后调用 数据双向绑定完毕，可以访问Dom节点，用于操作ＤＯＭ
beforeUpdate 数据更新时调用，发生在虚拟DoM patch前
update 数据更新完毕 避免此阶段更新数据，避免陷入死循环
beforeDestory 实例销毁之前调用 清除定时器
destory 实例销毁后调用 解除绑定

activated keep-alive专属（组件激活时调用 注：用keep-alive包裹的组件会被缓存切换时不会销毁组件）
deactivated keep-alive专属（组件销毁时调用 注：用keep-alive包裹的组件会被缓存）
父子组件渲染过程
父BeforeCreate、Created、beforeMount 子BeforeCreate、Created、beforeMount、mount、父mount
子组件更新
父beforeUpdate子beforeUpdate、update 父 update
父组件更新
父beforeUpdate、update
销毁
父beforeDestory 子beforeDestory 、destory 父 destory

通讯组件

Props和$emit:父组件通过props向子组件传递数据，子组件通过$emit触发事件来给父组件传递
$parent和 $children 获取当前父组件和当前组件的子组件
$ref 访问组件实例
Provide和inject
Vuex状态管理器

Vue2.0响应式数据原理

数据劫持+观察者模式
通过Object.definePropery进行数据属性劫持，数组则是通过重写实现，使用自己依赖watcher的getter收集依赖，属性变化后setter通知对应的watcher去更新
Watcher发布订阅模式

Vue事件绑定原理

原生事件是通过addEventListener绑定给真实元素
组件的事件绑定是通过Vue自定义的$on实现
在组件上使用原生事件，需要加.native来修饰
$on、$emit是基于发布订阅模式的维护一个事件的中心，on的时候将事件按名称存在事件中心里称之为订阅者，让后emit将对应事件进行发布，去执行事件中心里对应的监听器

检测数组变化

选择对7种数组方法（pop、push、shift、unshift、sort、reserve、splice）进行重写，只有通过重写方法修改的数组才会触发对应的watcher

Vue中使用了哪些设计模式

工厂模式：传入参数就可已创建实例的虚拟Dom
发布-订阅模式：Vue事件机制
观察者模式：数据响应原理
装饰器模式：（@装饰器的用法）

策略模式：策略模式对象的某个行为在不同场景有不同实现方案

Vue性能优化

对象层级不要太深
不需要响应的数据不要放在data中，或者用Object.freeze()冻结数据
合理使用v-if和v-show
合理使用computed和watch
v-for遍历加key 避免同时使用v-if
图片懒加载
服务端SSR
防抖节流
适当使用keep-alive缓存组件

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

Styte 前面加一个scoped

Vuex

Vuex是专门为vue提供的全局状态管理系统，用于组件中的数据共享、数据缓存
主要包括以下几个模块：
State：定义了应用状态的数据结构，设置默认初始化状态
Getter：允许组件从Store中获取数据

Mutation：是唯一更改状态的方法，必须是同步函数
Action ：用于提交mutation 而不是直接变更状态，可以包含任意异步请求
Module:允许将单一的Store拆分成更多个store ，且同时保存在单一状态数中