vue生命周期

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> vue生命周期

首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。

vue生命周期

所有的钩子

beforeCreate —-创建前状态

created —  创建完毕状态

beforeMount — 挂载前状态

mounted — 挂载结束状态

beforeUpdate

updated

beforeDestroy

destroyed

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
!DOCTYPE htmlhtml lang="en"head  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  meta http-equiv="X-UA-Compatible" content="ie=edge"  titlevue生命周期学习/title  script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"/script/headbody  div id="app"    h1/h1  /div/bodyscript  var vm = new Vue({    el: '#app',    data: {      message: 'Vue的生命周期'    },    beforeCreate: function() {      console.group('------beforeCreate创建前状态------');      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined      console.log("%c%s", "color:red","data   : " + this.$data); //undefined       console.log("%c%s", "color:red","message: " + this.message)     },    created: function() {      console.group('------created创建完毕状态------');      console.log("%c%s", "color:red","el     : " + this.$el); //undefined      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化       console.log("%c%s", "color:red","message: " + this.message); //已被初始化    },    beforeMount: function() {      console.group('------beforeMount挂载前状态------');      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化      console.log(this.$el);      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化        console.log("%c%s", "color:red","message: " + this.message); //已被初始化      },    mounted: function() {      console.group('------mounted 挂载结束状态------');      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化      console.log(this.$el);          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化      console.log("%c%s", "color:red","message: " + this.message); //已被初始化     },    beforeUpdate: function () {      console.group('beforeUpdate 更新前状态===============》');      console.log("%c%s", "color:red","el     : " + this.$el);      console.log(this.$el);         console.log("%c%s", "color:red","data   : " + this.$data);       console.log("%c%s", "color:red","message: " + this.message);     },    updated: function () {      console.group('updated 更新完成状态===============》');      console.log("%c%s", "color:red","el     : " + this.$el);      console.log(this.$el);       console.log("%c%s", "color:red","data   : " + this.$data);       console.log("%c%s", "color:red","message: " + this.message);     },    beforeDestroy: function () {      console.group('beforeDestroy 销毁前状态===============》');      console.log("%c%s", "color:red","el     : " + this.$el);      console.log(this.$el);          console.log("%c%s", "color:red","data   : " + this.$data);       console.log("%c%s", "color:red","message: " + this.message);     },    destroyed: function () {      console.group('destroyed 销毁完成状态===============》');      console.log("%c%s", "color:red","el     : " + this.$el);      console.log(this.$el);        console.log("%c%s", "color:red","data   : " + this.$data);       console.log("%c%s", "color:red","message: " + this.message)    }  })/script/html

然后运行可以看到到created的时候就停止了:
<img class="alignnone size-full wp-image-6992" src="https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151110938-1893086667.png" src="https://www.javazhiyin.com/wp-content/themes/mnews/images/post-loading.gif" alt="" width="764" height="285" srcset="https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151110938-1893086667.png 764w, https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151110938-1893086667-150x56.png 150w, https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151110938-1893086667-300x112.png 300w" sizes="(max-width: 764px) 100vw, 764px">

el: ‘#app’,

如果我们在后面继续调用vm.$mount(el),可以发现代码继续向下执行了

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

结果:
<img class="alignnone size-full wp-image-6993" src="https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151612012-1257673202.png" src="https://www.javazhiyin.com/wp-content/themes/mnews/images/post-loading.gif" alt="" width="560" height="78" srcset="https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151612012-1257673202.png 560w, https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151612012-1257673202-150x21.png 150w, https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151612012-1257673202-300x42.png 300w" sizes="(max-width: 560px) 100vw, 560px">

!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8”
meta name=”viewport” content=”width=device-width, initial-scale=1.0”
meta http-equiv=”X-UA-Compatible” content=”ie=edge”
titlevue生命周期学习/title
script src=”https://cdn.bootcss.com/vue/2.4.2/vue.js"/script
/head
body
div id=”app”
!–html中修改的–
h1undefined这是在outer HTML中的/h1
/div
/body
script
var vm = new Vue({
el: ‘#app’,
template: “h1undefined这是在template中的/h1”, //在vue配置项中修改的
data: {
message: ‘Vue的生命周期’
}
/script
/html

那么将vue对象中template的选项注释掉后打印如下信息:


<img class="alignnone size-full wp-image-6994" src="https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151634932-1925201400.png" src="https://www.javazhiyin.com/wp-content/themes/mnews/images/post-loading.gif" alt="" width="699" height="106" srcset="https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151634932-1925201400.png 699w, https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151634932-1925201400-150x23.png 150w, https://www.javazhiyin.com/wp-content/uploads/2018/08/1258691-20180731151634932-1925201400-300x45.png 300w" sizes="(max-width: 699px) 100vw, 699px">

这下就可以想想什么el的判断要在template之前了~是因为vue需要通过el找到对应的outer template。

在vue对象中还有一个render函数,它是以createElement作为参数,然后做渲染操作,而且我们可以直接嵌入JSX.

123456
new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('h1', 'this is createElement')
    }
})

new Vue({
el: ‘#app’,
render: function(createElement) {
return createElement(‘h1’, ‘this is createElement’)
}
})

可以看到页面中渲染的是:

vue生命周期

所以综合排名优先级:

render函数选项 template选项 outer HTML.

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

 

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

4. mounted

注意看下面截图:

vue生命周期

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

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

vue生命周期

当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdateupdated钩子函数。我们在console中输入:

1
vm.message = '触发组件更新'

vm.message = ‘触发组件更新’

发现触发了组件的更新:

vue生命周期

 

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

vue生命周期

beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> vue生命周期


  转载请注明: 好好学java vue生命周期

 上一篇
20 个让你效率更高的 CSS 代码技巧 20 个让你效率更高的 CSS 代码技巧
点击上方“前端技术精选”,选择“置顶公众号” 技术文章第一时间送达! 作者:果冻 segmentfault.com/a/1190000019542534 segmentfault.com/a/1190000019542534
2021-04-05
下一篇 
Vue2总结(十)异步 Vue2总结(十)异步
目前社区有很多 Vue.js 的源码解读文章,但是质量层次不齐,不够系统和全面,最近我将从各个细枝末节解读 Vue.js 的实现原理,针对 vue3 版本之前,让同学们可以彻底掌握 Vue.js。 友情提示:阅读本文大概需要** 34*
2021-04-05