生命周期

创建-》挂载-》更新-》卸载

VUEX

• Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方

法触发对应action进行回应。

• dispatch：操作行为触发方法，是唯一能执行action的方法。
• actions：操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/

异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模
块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以
支持action的链式触发。

• commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
• mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式

下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴
露出来，以进行state的监控等。

• state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯

一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数
据响应机制来进行高效的状态更新。

• getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue

Components通过该方法读取全局state对象。

对生命周期的理解

• beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。
• created阶段：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
• beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点
• mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
• beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
• updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
• beforeDestroy阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
• destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

  vue-router

  vue-router有两种模式，hash模式和history模式

  hash模式（改变#不触发网页加载）

  hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

  hash和browser路由区别？

  最大区别是路径问题。hash根目录永远是一致的。browser，每个页面的根目录是它自己，所以导致配置文件最好是后台提供~不然就读取不到~

  history路由(放在服务器环境下测试)

  history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中

  交互方式

  Vue组件接收交互行为，调用dispatch方法触发action相关处理，若页面状态需要改变，则调用
  commit方法提交mutation修改state，通过getters获取到state新值，重新渲染Vue Components，
  界面随之更新。

  vue双向绑定理解

  vue数据双向绑定是通过数据劫持结合发布者
  订阅者模式的方式来实现的。
  通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情。
  https://www.cnblogs.com/zhouyideboke/p/9626804.html 链接
  1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
  2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
  3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并初始化模板数据以及初始化相应的订阅器。
  4.VUE语法糖： this.$emit(‘input’, 123)

  v-if 与 v-show的区别

  相同点：v-if与v-show都可以动态控制dom元素显示隐藏
  不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css—display:none，dom元素还在。

  destroyed 在什么时候使用

  当我们离开这个页面的时候，便会调用这个函数(具体可以看看vue的的生命周期)，我们常用来销毁一些监听事件及定时函数

  nextTick 是什么，做了什么

  nextTick定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
  简单理解就是：当数据更新了，在dom中渲染后，自动执行该函数

  nextTick 和 setTimeout 有什么区别？

  setTimeout：将回调延迟到指定时间之后执行；（将回调函数加入“任务队列”，等当前执行栈执行完，主线程才会执行任务队列中的回调函数）
  nextTick：将回调函数加入到 当前执行栈的尾部，而不是任务队列的尾部
  所以有时候会出现使用nextTick不会马上更新，而setTimeout会

  
  vuex 用户退出，如何重置全部模块

1. 创建一个mutation，将state重新赋值为初始值(可以在开始时深拷贝一个state对象)
2. 创建一个action，触发上面的mutation
3. 退出登录时调用这个action

const state = {}
var copyState = deepClone(state) // 拷贝state对象
function deepClone (obj) {
var newObj = obj instanceof Array ? [] : {}
for (var i in obj) {
newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
}
return newObj
}
const mutations = {
resetState (state) {
for (var i in copyState) {
state[i] = copyState[i] // 递归赋值
}
}
}
在登陆页添加
this.$store.commit('resetState')

什么是深拷贝，什么是浅拷贝

浅拷贝是指拷贝一层，深层次对象级别就只拷贝引用；
深拷贝是每一层的数据都会拷贝出来。

watch和computed区别

• watch擅长处理的场景：一个数据影响多个数据

watch是监听data里的值的变化，当data中的属性发生改变的时候，watch中的函数就会执行，有两个参数，前者是newVal，后者是oldVal。当监听引用类型数据的变化，需要进行深度监听（用handler + deep的方式进行深度监听。immediate:true 页面首次加载的时候做一次监听。

• computed擅长处理的场景：一个数据受多个数据影响

computed适用于动态计算data里的属性值，必须加return，不能对data里的属性进行赋值，当无变化时会先从缓存里读取。

methods和computed区别

最主要是computed带缓存~
methods不带缓存~
只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。

data里面的值变化， 页面的值为什么变化

如果一个单价*数量=总价，用computed来监听单价和数量改变怎么做？

由于是多个变量影响一个属性（总量），所以可以 在
computed：{
sum(){
return 单价*数量
}
}

如果一个data里面是list,现在需要每行加一个active来判别是否演示隐藏，怎么做？

vue 如何让一个小数保留两位小数点

filters: {
numFilter (value) {
let realVal = ‘’
if (!isNaN(value) && value!== ‘’) {
// 截取当前数据到小数点后两位
realVal = parseFloat(value).toFixed(2)
} else {
realVal = ‘—‘
}
return realVal
}
}