对Vue生命周期钩子函数的理解

对Vue生命周期钩子函数的理解

实例创建之后，初始化事件和生命周期，而后触发beforeCreate。beforeCreate，当前实例创建之前，很少操作，一般用于加载动画，比如创建一个旋转动画。created表示当前实例创建完成，组件、属性等初始化完成，一般封装一个方法，从网络请求数据。该方法调用，触发回调，关闭beforeCreated中的旋转加载动画。当前实例创建完成，页面还未渲染未显示，拿不到DOM元素。而后，判断实例中是否有el属性（挂载点），如果有，继续往下；如果没有，然后判断是不是有vm.$mount，两者二选其一，接着判断有没有template，如果有，触发渲染函数，进入beforeMount，表示将要挂载，页面仍未显示，接着创建vm.$el,接着触发mounted，此时可以操作dom，beforeUpdate与update保持数据与页面的同步，会频繁触发，一般不要进行操作。接下来，destroyed表示组件销毁，destroy的中一般用于取消计时器、观察者等等。## 标题

附带图片理解

1）beforeCreat
组件实例将要被创建，这个时候可以加载一个动画效果。
2）created
组件实例被创建之后，可以访问到实例中data属性和methods方法，但是没有被渲染，所以无法操作DOM，$el是undefined。这时候可以向服务器发起请求
3）beforeMount
组件实例将要被挂载但是还没有挂载，页面未显示，在开发中一般很少用。
4）mounted
组件实例被挂载，页面已经被渲染，页面显示，可以操作DOM。此时也可以向服务器发送请求
5）beforeUpdate
组件将要更新
6）updated
组件更新之后，可以操作DOM
注意：
data数据发生变化，就会触发updated钩子函数，进行页面渲染，引起视图变化。由于触发频率很高，我们很少操作，即使操作，也要保证内部方法轻量级。
7）beforeDestroy
组件将要销毁
8）destroyed
组件已经被销毁，经常在该时机移出耗时操作，比如计时器等