Vue 综合-生命周期

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

const app = new Vue({
  // template: '<div>{{text}}</div>',
  data:{
    text: 0
  },
  render (h) { // template 的写法
    // 手动设置渲染出错
    // throw new TypeError('render error')
    return h('div', {}, this.text)
  },
  renderError(h, error) { // 这是当前组件渲染出错的时候调用，子组件渲染出错则不会触发
    return h('div', {}, error.stack)
  },
  errorCaptured() { // 只需要在根组件中使用这个方法，之后自身的报错以及子组件的报错都会被捕捉回调这里。
    // 会向上冒泡，并且正式环境可以使用
  },
  beforeCreate () {
    console.log(this.$el, 'beforeCreate'); // undefined "beforeCreate"
  },
  created () {
    console.log(this.$el, 'created'); // undefined "created"
  },
  beforeMount () {
    console.log(this.$el, 'beforeMount'); // <div id=" app"></div>' "beforeMount"
  },
  mounted () {
    console.log(this.$el, 'mounted'); // <div>0</div> "mounted"
  },
  beforeUpdate () {
    console.log(this.$el, 'beforeUpdate'); // <div>0</div> "mounted"
  },
  updated () {
    console.log('updated');
  },
  activated () {
    console.log('activated');
  },
  deactivated () {
    console.log('deactivated');
  },
  beforeDestroy () {
    console.log('beforeDestroy');
  },
  destroyed () {
    console.log('destroyed');
  }
})
// this.$el 指的是当前的 DOM, 一般 DOM 操作都是放在 mounted () 里面，因为只有到它之后才能拿到当前的 DOM, 如果是数据的话则可以在 created () 或者 mounted () 都行，看情况而定放置。
// activated deactivated 这两个是在页面被激活使用的时候会回调，也就是你从这个页面离开重新再次进来的时候会触发。
// 初始化过程
// 输出:
// beforeCreate
// created

// 挂载到app节点
// 输出:
// beforeMount
// mounted
app.$mount('#app')

// 数据变更
// 输出:
// beforeUpdate
// updated
setTimeout(() => {
  app.text += 1
}, 1000);

// 对象销毁
// 输出:
// beforeDestroy
// destroyed
setTimeout(() => {
  app.$destroy()
}, 1000);

// beforeCreate ()  created () beforeMount ()  mounted () 都是只调用一次的，而且在服务器渲染中 beforeMount ()  mounted () 是不会被调用的。