|
vue生命周期
?生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；
生命周期钩子函数
生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向vue的实例；
钩子函数
beforeCreate created? ?可以获取数据及方法
beforeMount mounted? ? 可以获取到真实的DOM
beforeUpdate updated? ? ?数据更新执行
beforeDestroy destroyed? ? 销毁vue实例，不再具有双向数据绑定的特点
Vue的八大生命周期钩子函数?
区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted?
// js部分
<div id="app">
? ? ? ? <h1>{{msg}}</h1>
? ? ? ? <button @click="change">改变msg</button>
? ? ? ? <button @click="destroy">销毁Vue实例</button>
? ? ? ? <h1>{{time}}</h1>
? ? </div>
- beforeCreate：Vue实例化对象创建之前，实例化对象创建之前是获取不到data里面的数据的
//Vue实例化对象创建之前
// 最先执行的生命周期
beforeCreate() {
console.log("Vue实例化对象创建之前");//Vue实例化对象创建之前
console.log(this.msg); // undefined
},
?created：Vue实例化对象创建之后，实例化对象创建之后可以获取data里面的数据?
? ? ? ? ? ? ? ? 实例化对象创建之后不可以获取到dom包括根节点
? ? ? ? ? ? ?★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中
? /* Vue实例化对象创建之后 */
? ? ? ? ? ? created() {
? ? ? ? ? ? ? ? /* 实例化对象创建之后可以获取data里面的数据 */
? ? ? ? ? ? ? ? /* 实例化对象创建之后不可以获取到dom包括根节点 */
? ? ? ? ? ? ? ? console.log('created',this.msg,this.$el)
? ? ? ? ? ? ? ? /* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
? ? ? ? ? ? ? ? // this.timeId = setInterval(()=>{
? ? ? ? ? ? ? ? // ? ? this.time++;
? ? ? ? ? ? ? ? // ? ? console.log(this.time)
? ? ? ? ? ? ? ? // },500)
? ? ? ? ? ? },
beforeMount：Vue的dom挂载之前，beforeMount可以获取到节点，但是不能把data中的数据渲染在dom节点中
beforeMount() {
? ? ? ? ? ? ? ? /* dom挂载之前可以获取到根节点 */
? ? ? ? ? ? ? ? /* beforeMount还没有把data中的数据渲染到dom节点上 */
? ? ? ? ? ? ? ? console.log('beforeMount',this.$el)
? ? ? ? ? ? },
mounted：Vue的dom挂载之后，mounted已经把data中的数据渲染到了dom节点上
? ? ? ? ? ? ? ?★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素
/* Vue的dom挂载之后 */
? ? ? ? ? ? mounted() {
? ? ? ? ? ? ? ? /* mounted已经把data中的数据渲染到了dom节点上 */
? ? ? ? ? ? ? ? console.log('mounted',this.$el)
? ? ? ? ? ? ? ? /* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
? ? ? ? ? ? },
?beforeUpdate：?Vue的data值更新前，当我把Vue实例中的data中的值改变了会触发? ? ? ? ? ? ? ? ?beforeUpdate?和updated，顺序上 beforeUpdate执行顺序优先于updated
? /* Vue的data值更新前 */
? ? ? ? ? ? /* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
? ? ? ? ? ? /* 顺序上 beforeUpdate执行顺序优先于updated ?*/
? ? ? ? ? ? beforeUpdate() {
? ? ? ? ? ? ? ? console.log('beforeUpdate',this.msg,this.$el)
? ? ? ? ? ? },
updated：Vue的data值更新后
? updated() {
? ? ? ? ? ? ? ? console.log('updated',this.msg,this.$el)
? ? ? ? ? ? },
beforeDestroy：Vue组件销毁前，在调用$destroy()方法的时候 会执行下面的两个钩子函数
? ? ? ? ? ? ? ? ? ? ? ? ? 执行顺序上beforeDestroy优先于destroyed执行
? ? ? ? ? ? ? ? ? ? ? ? ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可? ? 以使用
? /* Vue组件销毁前 */
? ? ? ? ? ? /* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
? ? ? ? ? ? /* 执行顺序上beforeDestroy优先于destroyed执行 ?*/
? ? ? ? ? ? /* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
? ? ? ? ? ? beforeDestroy() {
? ? ? ? ? ? ? ? console.log('beforeDestroy',this.msg,this.$el)
? ? ? ? ? ? },
destroyed：Vue组件销毁后
destroyed() {
? ? ? ? ? ? ? ? console.log('destroyed',this.msg,this.$el)
? ? ? ? ? ? ? ? clearInterval(this.timeId)
? ? ? ? ? ? },
整体代码：
<div id="app">
? ? ? ? <h1>{{msg}}</h1>
? ? ? ? <button @click="change">改变msg</button>
? ? ? ? <button @click="destroy">销毁Vue实例</button>
? ? ? ? <h1>{{time}}</h1>
? ? </div>
? ? <script src="./node_modules/vue/dist/vue.min.js"></script>
? ? <script>
? ? ? ? /* Vue的八大生命周期钩子函数 */
? ? ? ? /* 区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted */
? ? ? ? new Vue({
? ? ? ? ? ? el:"#app",
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? msg:'我爱Vue',
? ? ? ? ? ? ? ? time:0,
? ? ? ? ? ? ? ? timeId:null
? ? ? ? ? ? },
? ? ? ? ? ? /* Vue实例化对象创建之前 */
? ? ? ? ? ? beforeCreate() {
? ? ? ? ? ? ? ? /* 实例化对象创建之前是获取不到data里面的数据的 */
? ? ? ? ? ? ? ? console.log('beforeCreate',this.msg)
? ? ? ? ? ? },
? ? ? ? ? ? /* Vue实例化对象创建之后 */
? ? ? ? ? ? created() {
? ? ? ? ? ? ? ? /* 实例化对象创建之后可以获取data里面的数据 */
? ? ? ? ? ? ? ? /* 实例化对象创建之后不可以获取到dom包括根节点 */
? ? ? ? ? ? ? ? console.log('created',this.msg,this.$el)
? ? ? ? ? ? ? ? /* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
? ? ? ? ? ? ? ? // this.timeId = setInterval(()=>{
? ? ? ? ? ? ? ? // ? ? this.time++;
? ? ? ? ? ? ? ? // ? ? console.log(this.time)
? ? ? ? ? ? ? ? // },500)
? ? ? ? ? ? },
? ? ? ? ? ? /* Vue的dom挂载之前 */
? ? ? ? ? ? beforeMount() {
? ? ? ? ? ? ? ? /* dom挂载之前可以获取到根节点 */
? ? ? ? ? ? ? ? /* beforeMount还没有把data中的数据渲染到dom节点上 */
? ? ? ? ? ? ? ? console.log('beforeMount',this.$el)
? ? ? ? ? ? },
? ? ? ? ? ? /* Vue的dom挂载之后 */
? ? ? ? ? ? mounted() {
? ? ? ? ? ? ? ? /* mounted已经把data中的数据渲染到了dom节点上 */
? ? ? ? ? ? ? ? console.log('mounted',this.$el)
? ? ? ? ? ? ? ? /* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
? ? ? ? ? ? },
? ? ? ? ? ? /* Vue的data值更新前 */
? ? ? ? ? ? /* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
? ? ? ? ? ? /* 顺序上 beforeUpdate执行顺序优先于updated ?*/
? ? ? ? ? ? beforeUpdate() {
? ? ? ? ? ? ? ? console.log('beforeUpdate',this.msg,this.$el)
? ? ? ? ? ? },
? ? ? ? ? ? /* Vue的data值更新后 */
? ? ? ? ? ? updated() {
? ? ? ? ? ? ? ? console.log('updated',this.msg,this.$el)
? ? ? ? ? ? },
? ? ? ? ? ? /* Vue组件销毁前 */
? ? ? ? ? ? /* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
? ? ? ? ? ? /* 执行顺序上beforeDestroy优先于destroyed执行 ?*/
? ? ? ? ? ? /* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
? ? ? ? ? ? beforeDestroy() {
? ? ? ? ? ? ? ? console.log('beforeDestroy',this.msg,this.$el)
? ? ? ? ? ? },
? ? ? ? ? ? /* Vue组件销毁后 */
? ? ? ? ? ? destroyed() {
? ? ? ? ? ? ? ? console.log('destroyed',this.msg,this.$el)
? ? ? ? ? ? ? ? clearInterval(this.timeId)
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? change(){
? ? ? ? ? ? ? ? ? ? this.msg = '我爱React'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? destroy(){
? ? ? ? ? ? ? ? ? ? this.$destroy();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? })
? ? </script>
|