[ vue ] 生命周期 & 常见坑

vue生命周期（重）

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed

------beforeCreate创建前状态------
 el     : undefined
 data   : undefined
 message: undefined
 ------created创建完毕状态------
 el     : undefined
 data   : [object Object]   ~~~
 message: Vue的生命周期
 ------beforeMount挂载前状态------
 el     : [object HTMLDivElement]   ~~~
 
​…​
​
 data   : [object Object]
 message: Vue的生命周期
 ------mounted 挂载结束状态------
 el     : [object HTMLDivElement]
 
​…​
​
 data   : [object Object]
 message: Vue的生命周期

beforeCreate（实例初始化之后，数据观测、event/watcher 事件配置之前） ——> 
created（在实例创建完毕后立即被调用） ——> 
beforeMount（在挂载开始之前被调用） ——> 
mounted ——> 
beforeUpdated（数据更新时调用） ——> 
updated （虚拟Dom重新渲染和打补丁之后调用）——> 
activated（keep-alive 组件激活时调用） ——> 
deactived（keep-alive 组件停用时调用）——> 
beforeDestory（实例销毁前调用）——> 
destoryed （Vue实例后调用）

1.在beforeCreate和created钩子函数之间的生命周期

初始化事件，进行数据的观测,可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。

2.created钩子函数和beforeMount间的生命周期

会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)

vm.$mount(el) //这个el参数就是挂在的dom接点

template参数选项的有无对生命周期的影响。

1. 如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
2. 如果没有template选项，则将外部HTML作为模板编译。
3. 可以看到template中的模板优先级要高于outer HTML的优先级。

render函数选项 > template选项 > outer HTML.

3.beforeMount和mounted 钩子函数间的生命周期

vue实例对象添加$el成员，并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。

4.mounted

在mounted之前h1中还是通过{{message}}进行占位的，因为此时还有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

5.beforeUpdate钩子函数和updated钩子函数间的生命周期

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

6.beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue的相关指令

vue常用指令： v-for、v-bind（缩写形式:prop）、v-on(缩写形式@click=’sss')、v-if/v-else/v-else-if、v-model、v-once、v-html、v-show...
vue自定义组件：Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘
{{ p1 }}
' })
vue常用实例方法和属性: data/$data、methods/$methods、$el、computed(计算属性)、$watch、$set、$event、$emit...
如果需要更新的属性需要缓存，则使用计算属性的方式，否则可以使用methods里的方法来更新属性（methods里的方法每次重新渲染都会执行）
计算属性默认提供了getter，你还可以给它设置setter
当你数据变化是异步或者开销较大时，可以使用watch侦听器来响应数据的变化
v-bind:class的值可以是一个对象，可实现类似react中classnames模块的功能
自定义组件上的class会被渲染拼接到template的根节点的class属性上（自定义组件上可使用v-bind:class来做class的判断显示逻辑）
v-bind:style可以用来绑定内联样式，这个内联样式的值可以由一个对象来定义（类似css in js的模式）,且可以被定义为数组(多个样式对象)
v-bind:style可以使用多重值的形式：

v-if/v-else/v-else-if的时候，可以用key来管理可复用的元素
v-if是’真正’的渲染，它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建
v-if是惰性的，初始为假，什么也不做，直到为真的时候才渲染元素
v-show总是渲染元素，只是简单的进行切换
v-if的切换开销大，v-show则是初始渲染开销大，频繁切换使用v-show，运行时经常改变则使用v-if
v-if和v-for一起使用时，v-for的优先级更高
v-for可遍历数组，第二个参数是索引
v-for可遍历对象，第二个参数是key，第三个参数是索引
v-for和