Vue 生命周期与 data 及 el 的关系
2021-07-27 本文已影响0人
弹力盒
<template>
<div>
<el-button @click='count++'>
{{ count }}
</el-button>
</div>
</template>
<script>
export default {
data () {
return {
count: 1
};
},
destroyed () {
console.log('------ destroyed -------');
console.log('$data -- ' + this.$data); // 存在
console.log('$el -- ' + this.$el); // 存在
},
beforeDestroy () {
console.log('------ beforeDestroy -------');
console.log('$data -- ' + this.$data); // 存在
console.log('$el -- ' + this.$el); // 存在
},
updated () {
console.log('------ updated -------');
console.log('$data -- ' + this.$data); // 存在
console.log('$el -- ' + this.$el); // 存在
},
beforeUpdate () {
console.log('------ beforeUpdate -------');
console.log('$data -- ' + this.$data); // 存在
console.log('$el -- ' + this.$el); // 存在
},
mounted () {
console.log('------ mounted -------');
console.log('$data -- ' + this.$data); // 存在
console.log('$el -- ' + this.$el); // 存在
},
beforeMount () {
console.log('------ beforeMount -------');
console.log('$data -- ' + this.$data); // 存在
console.log('$el -- ' + this.$el); // 不存在
},
created () {
console.log('------ created -------');
console.log('$data -- ' + this.$data); // 存在
console.log('$el -- ' + this.$el); // 不存在
},
beforeCreate () {
console.log('------ beforeCreate -------');
console.log('$data -- ' + this.$data); // 不存在
console.log('$el -- ' + this.$el); // 不存在
}
};
</script>
2、初始化阶段

3、数据更新阶段

4、卸载阶段

5、结论
- a、组件在 beforeCreate 生命周期时,不能访问 data、el 参数
- b、组件在 created,beforeMount 生命周期时,不能访问 el 参数,但能访问 data 参数
- c、组件在 mounted、beforeUpdate、updated、beforeDestroy、destoryed 生命周期时,能访问 data el 参数