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

image.png

3、数据更新阶段

image.png

4、卸载阶段

image.png

5、结论

上一篇 下一篇

猜你喜欢

热点阅读