VUE相关

vue的生命周期

11个生命周期钩子：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作

挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情…

当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

常用指令：
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once

1.1 解决Vue动态路由参数变化,页面数据不更新

问题描述：

遇到动态路由如：/page/:id
从/page/1 切换到 /page/2 发现页面组件没有更新

解决方式：
给增加一个不同:key值，这样vue就会识别这是不同的了。

<router-view :key="key"></router-view>
  ...
  computed:{
	    key(){
	        return this.$route.path + Math.random();
	    }
	}

1.2 vue组件里定时器销毁问题

问题描述：
在a页面写一个定时器，每秒钟打印一次，然后跳转到b页面，此时可以看到，定时器依然在执行。
推荐的解决方式：
通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。

const timer = setInterval(() => {
	// 定时器操作
}, 1000)

// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

1.3 vue实现按需加载组件的两种方式

1.使用resolve => require([’./ComponentA’], resolve)，方法如下：

const ComponentA = resolve => require(['./ComponentA'], resolve)

2.使用 () => import()， 具体代码如下：

const ComponentA = () => import('./ComponentA')

1.4 组件之间，父子组件之间的通信方案

1 组件之间的通信方案：

2通过事件总线（bus），即通过发布订阅的方式
3vuex
4父子组件： 父组件通过prop向自组件传递数据，子组件绑定自定义事件，通过this.$emit(event,params) 来调用自定义事件

5使用vue提供的$parent/$children & $refs方法来通信
6provide/inject 深层次组件间的通信
7 $attrs, $listeners

v-if 和 v-show的区别

v-if：
该指令用于条件性的渲染一块内容，当指令的表达式返回值为true的时候，内容会被渲染出来；如果条件一直为false，那么内容就一直不会被渲染。相反，当返回值为false的时候，内容会被销毁。

v-if可以和v-else、v-else-if搭配使用，使用方法就跟原生js上的用法基本一致。

在if 和 else的切换过程中，会复用已有的元素，而不是从头开始渲染。但是可以通过给元素添加key属性值，使每次切换都是重新渲染和销毁。
v-show：
该指令和v-if用法基本一致，指令表达式的值为true就显示，为false就隐藏。显示和隐藏是基于css的样式切换，类似于visibility属性。即使一开始条件为false，内容也会被渲染在文档中，只是由css样式控制隐藏而已。
区别：
v-if只有当指令的表达式返回值为true的时候才会被渲染，为false的时候，元素是不存在于文档中的；而v-show则不管指令表达式的返回值是什么，都会被渲染，并且只是基于css的样式切换，元素始终存在于文档中。

什么时候用v-if？什么时候用v-show？
综合上述，可以看出，v-if在切换过程中会有更多性能上的花销；而v-show则在页面初次加载时就渲染完成，后期不会占用更多的性能花销。所以，如果需要频繁地切换，则使用v-show指令比较好。反之则使用v-if 比较好。