vue 组件的生命周期怎么只执行一次_Vue单组件与父子组件的生命周期

单个组件的生命周期

现根据实际代码执行情况分析：

单组件

更新 {{dataVar}}

销毁

export default {

data() {

return {

dataVar: 1

}

},

beforeCreate() {

this.compName = 'single'

console.log(`--${this.compName}--beforeCreate`)

},

created() {

console.log(`--${this.compName}--created`)

},

beforeMount() {

console.log(`--${this.compName}--beforeMount`)

},

mounted() {

console.log(`--${this.compName}--mounted`)

},

beforeUpdate() {

console.log(`--${this.compName}--beforeUpdate`)

},

updated() {

console.log(`--${this.compName}--updated`)

},

beforeDestroy() {

console.log(`--${this.compName}--beforeDestroy`)

},

destroyed() {

console.log(`--${this.compName}--destroyed`)

},

methods: {

handleDestroy() {

this.$destroy()

}

}

}

初始化组件时，打印：

当data中的值变化时，打印：

当组件销毁时，打印：

从打印结果可以看出:

初始化组件时，仅执行了beforeCreate/Created/beforeMount/mounted四个钩子函数

当改变data中定义的变量(响应式变量)时，会执行beforeUpdate/updated钩子函数

当切换组件(当前组件未缓存)时，会执行beforeDestory/destroyed钩子函数

初始化和销毁时的生命钩子函数均只会执行一次，beforeUpdate/updated可多次执行

父子组件的生命周期

将单组件作为基础组件(由于props在beforeCreate()中未初始化)，需要做如下更改：

props: {

compName: {

type: String,

default: 'single'

}

},

beforeCreate() {

// this.compName = 'single'

// console.log(`--${this.compName}--beforeCreate`)

console.log(` --data未初始化--beforeCreate`)

},

父组件代码如下：

复杂组件

const COMPONENT_NAME = 'complex'

import LifecycleSingle from './LifeCycleSingle'

export default {

beforeCreate() {

console.log(`--${COMPONENT_NAME}--beforeCreate`)

},

created() {

console.log(`--${COMPONENT_NAME}--created`)

},

beforeMount() {

console.log(`--${COMPONENT_NAME}--beforeMount`)

},

mounted() {

console.log(`--${COMPONENT_NAME}--mounted`)

},

beforeUpdate() {

console.log(`--${COMPONENT_NAME}--beforeUpdate`)

},

updated() {

console.log(`--${COMPONENT_NAME}--updated`)

},

beforeDestroy() {

console.log(`--${COMPONENT_NAME}--beforeDestroy`)

},

destroyed() {

console.log(`--${COMPONENT_NAME}--destroyed`)

},

components: {

LifecycleSingle

}

}

初始化组件时，打印：

当子组件data中的值变化时，打印：

当父组件data中的值变化时，打印：

当props改变时，打印：

当子组件销毁时，打印：

当父组件销毁时，打印：

从打印结果可以看出:

仅当子组件完成挂载后，父组件才会挂载

当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数(仅首次)

父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的(可实践)

销毁父组件时，先将子组件销毁后才会销毁父组件

文章摘选自：微信公众号，前端大全