Vue 生命周期与 data 及 el 的关系

<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、初始化阶段

image.png

3、数据更新阶段

image.png

4、卸载阶段

image.png

5、结论

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