Vue父子组件生命周期

vue

Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程,这个过程就是Vue生命周期Vue中提供的钩子函数beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed,父子组件嵌套时,父组件和子组件各拥有各自独立的钩子函数。

描述

创建过程

创建过程主要涉及beforeCreatecreatedbeforeMountmounted四个钩子函数。

Parent beforeCreate -> Parent Created -> Parent BeforeMount -> Child BeforeCreate -> Child Created -> Child BeforeMount -> Child Mounted -> Parent Mounted

更新过程

更新过程主要涉及beforeUpdateupdated两个钩子函数,当父子组件有数据传递时才会有生命周期的比较。

Parent BeforeUpdate -> Child BeforeUpdate -> Child Updated -> Parent Updated

销毁过程

销毁过程主要涉及beforeDestroydestroyed两个钩子函数,本例直接调用vm.$destroy()销毁整个实例以达到销毁父子组件的目的。

Parent BeforeDestroy -> Child BeforeDestroy -> Child Destroyed -> Parent Destroyed

示例

<!DOCTYPE html>

<html>

<head>

<title>Vue父子组件生命周期</title>

</head>

<body>

<div ></div>

</body>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

<script type="text/javascript">

Vue.component("counter", {

props: {

count: {

type: Number,

default: 0

},

},

beforeCreate: function() {

console.log("Child", "BeforeCreate");

},

created: function() {

console.log("Child", "Created");

},

beforeMount: function() {

console.log("Child", "BeforeMount");

},

mounted: function() {

console.log("Child", "Mounted");

},

beforeUpdate: function() {

console.log("Child", "BeforeUpdate");

},

updated: function() {

console.log("Child", "Updated");

},

beforeDestroy: function() {

console.log("Child", "BeforeDestroy");

},

destroyed: function() {

console.log("Child", "Destroyed");

},

template: `

<div>

<div>{{count}}</div>

</div>

`

})

var vm = new Vue({

el: '#app',

data: function(){

return {

count: 1

}

},

beforeCreate: function() {

console.log("Parent", "BeforeCreate");

},

created: function() {

console.log("Parent", "Created");

},

beforeMount: function() {

console.log("Parent", "BeforeMount");

},

mounted: function() {

console.log("Parent", "Mounted");

},

beforeUpdate: function() {

console.log("Parent", "BeforeUpdate");

},

updated: function() {

console.log("Parent", "Updated");

},

beforeDestroy: function() {

console.log("Parent", "BeforeDestroy");

},

destroyed: function() {

console.log("Parent", "Destroyed");

},

template: `

<div>

<counter :count="count"></counter>

<button @click="count++">++</button>

</div>

`

})

</script>

</html>

生命周期

Vue生命周期钩子函数功能示例,其中this.msg初始化赋值Vue Lifecycle,在更新过程中赋值为Vue Update

beforeCreate

Vue实例开始创建到beforeCreate钩子执行的过程中主要进行了一些初始化操作,例如组件的事件与生命周期钩子的初始化。在此生命周期钩子执行时组件并未挂载,datamethods等也并未绑定,此时主要可以用来加载一些与Vue数据无关的操作,例如展示一个loading等。

console.log("beforeCreate");

console.log(this.$el); //undefined

console.log(this.$data); //undefined

console.log(this.msg); // undefined

console.log("--------------------");

created

beforeCreatecreated的过程中主要完成了数据绑定的配置、计算属性与方法的挂载、watch/event事件回调等。在此生命周期钩子执行时组件未挂载到到DOM,属性$el目前仍然为undefined,但此时已经可以开始操作datamethods等,只是页面还未渲染,在此阶段通常用来发起一个XHR请求。

console.log("created");

console.log(this.$el); //undefined

console.log(this.$data); //{__ob__: Observer}

console.log(this.msg); // Vue Lifecycle

console.log("--------------------");

beforeMount

createdbeforeMount的过程中主要完成了页面模板的解析,在内存中将页面的数据与指令等进行解析,当页面解析完成,页面模板就存在于内存中。在此生命周期钩子执行时$el被创建,但是页面只是在内存中,并未作为DOM渲染。

console.log("beforeMount");

console.log(this.$el); //<div >...</div>

console.log(this.$data); // {__ob__: Observer}

console.log(this.msg); // Vue Lifecycle

console.log("--------------------");

mounted

beforeMountmounted的过程中执行的是将页面从内存中渲染到DOM的操作。在此生命周期钩子执行时页面已经渲染完成,组件正式完成创建阶段的最后一个钩子,即将进入运行中阶段。此外关于渲染的页面模板的优先级,是render函数 >template属性 > 外部HTML

console.log("mounted");

console.log(this.$el); //<div >...</div>

console.log(this.$data); //{__ob__: Observer}

console.log(this.msg); // Vue Lifecycle

console.log("--------------------");

beforeUpdate

当数据发生更新时beforeUpdate钩子便会被调用,此时Vue实例中数据已经是最新的,但是在页面中的数据还是旧的,在此时可以进一步地更改状态,这不会触发附加的重渲染过程。在上述例子中加入了debugger断点,可以观察到Vue实例中数据已经是最新的,但是在页面中的数据还是旧的。

// this.msg = "Vue Update";

console.log("beforeUpdate");

console.log(this.$el); //<div >...</div>

console.log(this.$data); //{__ob__: Observer}

console.log(this.msg); // Vue Update

console.log("--------------------");

updated

当数据发生更新并在DOM渲染完成后updated钩子便会被调用,在此时组件的DOM已经更新,可以执行依赖于DOM的操作。

// this.msg = "Vue Update";

console.log("updated");

console.log(this.$el); //<div >...</div>

console.log(this.$data); //{__ob__: Observer}

console.log(this.msg); // Vue Update

console.log("--------------------");

beforeDestroy

Vue实例被销毁之前beforeDestroy钩子便会被调用,在此时实例仍然完全可用。

// this.$destroy();

console.log("beforeDestroy");

console.log(this.$el); //<div >...</div>

console.log(this.$data); //{__ob__: Observer}

console.log(this.msg); // Vue Update

console.log("--------------------");

destroyed

Vue实例被销毁之后destroyed钩子便会被调用,在此时Vue实例绑定的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁,组件无法使用,datamethods也都不可使用,即使更改了实例的属性,页面的DOM也不会重新渲染。

// this.$destroy();

console.log("destroyed");

console.log(this.$el); //<div >...</div>

console.log(this.$data); //{__ob__: Observer}

console.log(this.msg); // Vue Update

console.log("--------------------");

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://segmentfault.com/a/1190000011381906

https://www.cnblogs.com/yuliangbin/p/9348156.html

https://www.cnblogs.com/zmyxixihaha/p/10714217.html

以上是 Vue父子组件生命周期 的全部内容, 来源链接: utcz.com/z/376615.html

回到顶部