生命周期

beforeCreate

在实例初始化之后, 进行数据侦听和事件/侦听器的配置之前同步调用 (数据初始化之前)

created

在实例创建完成后被立即同步调用 (数据初始化之后)

• 注意

1. 在这一步中, 实例已经完成对选项的处理. data methods event watch 的回调函数 已经配置完成
2. 这一步是 发送请求获取数据 的最佳时期 ★

beforeMount

在实例挂载开始之前被调用 (Dom 开始渲染之前)

• 注意

1. 相关的 render 函数首次被调用
2. 该钩子在服务器端渲染期间不被调用

mounted

实例被挂载后被调用 (Dom 渲染完成之后)

• 注意

1. 这时 el 被新创建的 vm.$el 替换了.
2. 如果根实例挂载到了一个文档内的元素上, 当 mounted 被调用时 xm.$el 也在文档内
3. 注意, mounted 不会保证所有的子组件也都被挂载完成. 如果你希望等到整个视图都渲染完毕再执行某些操作, 可以在 mounted 内部使用 vm.$nextTick

    mounted() { 
    this.$nextTick(function () { // 仅在整个视图都被渲染之后才会运行的代码 })
    }

4. 这一步是 操作DOM 的最佳时期 ★

beforeUpdate

在数据发生改变后, Dom被更新之前被调用. (数据改变之后, Dom 更新之前)

• 注意

1. 这里适合在现有 DOM 将要被更新之前访问它, 比如移除手动添加的事件监听器
2. 该钩子在服务器端渲染期间不被调用, 因为只有初次渲染会在服务器端进行

updated

在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用 (Dom 更新完成之后)

• 注意

1. 当这个钩子被调用时, 组件 DOM 已经更新, 所以你现在可以执行依赖于 DOM 的操作. 然而在大多数情况下, 你应该避免在此期间更改状态. 如果要相应的状态改变, 通常最好使用 computed 或 watcher 取而代之
2. 注意, updated 不会保证所有的子组件也都被重新渲染完毕. 如果你希望等到 整个视图都渲染完毕, 可以在 updated 里使用 vm.$nextTick

    updated() { 
    this.$nextTick(function () { // 仅在整个视图都被渲染之后才会运行的代码 })
    }

3. 该钩子在服务端渲染期间不被调用