1)定义:vue实例从创建到销毁的过程
2)钩子函数
2.1)beforeCreate:vue实例初始化之前调用,这个阶段vue实例刚刚在内存中创建,此时data和methods这些都没初始化好。
2.2)Created:vue实例初始化之后调用,这个阶段vue实例在内存中已经创建好了,data和methods也能够获取到了,但是模板还没编译。
2.3) beforeMount : 挂载到DOM树之前调用,这个阶段完成了模板的编译,但是还没挂载到页面上。
2.4) mounted: 挂载到DOM树之后调用,这个阶段,模板编译好了,也挂载到页面中了,页面也可以显示了。
2.5) beforeUpdate:数据更新之前调用,此时data中数据的状态值已经更新为最新的,但是页面上显示的数据还是最原始的,还没有重新开始渲染DOM树。
2.6) updated:数据更新之后调用,此时data中数据的状态值是最新的,而且页面上显示的数据也是最新的,DOM节点已经被重新渲染了。
2.7)beforeDestroy:vue实例销毁之前调用,这个阶段vue实例还能用。
2.8)destroyed:vue实例销毁之后调用,此时所有实例指示的所有东西都会解除绑定,事件监听器也都移除,子实例也被销毁。
1)v-if 为false的时候,不会渲染
2)v-show 为false的时候也会渲染,只是通过css的属性隐藏
3)如果页面显示和隐藏是一次性决定的,后面不再改变的话,这种情况用v-if比较好,因为v-show的话,它会把不需要显示的元素给渲染在页面上
4)如果渲染之后,显示和隐藏还是频繁切换,这种情况用v-show会更好,因为用v-show的话,如果控制显示和隐藏,它只需要操作css的属性就可以了,如果是用v-if,它需要创建
我们的dom元素,然后销毁我们的dom元素,那这样性能消耗会更加大。
1)父 beforeCreate created beforeMount
2)子 beforeCreate created beforeMount mounted
3)父 mounted
1)如果业务是父组件引入子组件,并且优先加载子组件的数据,那么在父组件中当前的请求要放mounted中。
2)如果当前组件没有依赖关系,那么放在哪个生命周期中请求都是可以的。
因为如果请求在methods封装好了,在beforeCreate调用的时候,beforeCreate阶段是拿不到method里面的方法的
只要写异步代码,获取dom是在异步中获取到,就可以了。例如:setTimeout, promise.then或者使用vue系统内置的this.$nextTick
keep-alive是用来缓存组件的,如果使用该组件,新增两个生命周期:activated和deactivated
1)如果当前组件加入了keep-alive,只会执行一个生命周期,activated
2)如果没有加入keep-alive,会执行前四个