vue中对组件的生命周期的理解

组件的生命周期简述过程

• 实例被创建-->【beforeCreate】-->
• 注入-->【created】-->
• 生成虚拟dom树[VNode]-->【beforeMount】-->
• 生成真实DOM-->【mounted】-->
• 已挂载-->【数据改变beforeUpdate】-->重新渲染
• 已挂载<--【update】<--重新渲染
• 已挂载-->【beforeDestroy】-->
• 销毁组件-->【destroyed】

分布剖析

1、实例被创建

当用户new一个vue或使用一个组件的时候实例就会被创建

• beforeCreate
  • 当用户new一个vue或使用一个组件的时候实例就会被创建，然后就会运行这个钩子函数
  • 该钩子函数运行点：实例被创建后，在实例 注入之前 会被运行
  • 什么是注入：完成数据响应式，并把这些响应式数据提交到vue实例里面去
  • 所以这个时候是拿不到vue实例里面的data的值
  • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • 这个时候也不能获取methods里面的方法和watch里面的监听事件

2、注入

完成数据响应式，并把这些响应式数据提交到vue实例里面去

• created
  • 该函数在注入之后运行，也就说这个时候响应式数据已经提交到vue实例中了，
  • 如果要在第一时间调用methods中的方法，或者操作data中的数据，可在此钩子中进行操作。
  • 运行该函数时还没有创建虚拟节点，没有虚拟节点就说明还没有真实dom，所以这个时候是拿不到dom
  • 需要注意的是，执行此钩子时，挂载阶段还未开始，$el 属性目前不可见。
  • 此时，可以进行数据请求，将请求回来的值赋值给data中的数据。最好在这个时候调用接口获取数据

3、生成虚拟dom树[VNode]

仅仅只生成虚拟dom树[VNode];无法获取dom

• beforeMount
  • 该函数运行时，已经生成了虚拟dom；但是还没有生成真实节点，所以还是不能获取dom，
  • 也不能使用this.$refs["dom"]获取的；因为用this.$refs获取的也是真实dom
  • 此时模板已经编译完成，只是未将生成的模板替换el对应的元素。
  • 在此钩子函数中，可以获取到模板最初始的状态。
  • 此时，可以拿到vm.$el，只不过为旧模板

4、生成真实dom

已生成了真实dom，可以对dom进行获取操作，也可以使用this.$refs获取dom

• mounted
  • 该函数运行时，已生成了真实dom，可以对dom进行获取操作，也可以使用this.$refs获取dom
  • 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
  • 在该钩子函数中的vm.$el为新模板。
  • 执行完该钩子函数后，代表实例已经被完全创建好。
  • 如果要在第一时间，操作页面上的dom节点时，可以在此钩子函数中操作

5、已挂载

等待用户操作，等待用户点击等待，这时有可能会发生数据变动

• beforeUpdate
  • 该函数在数据变化重新渲染之前会执行，数据更新时调用，发生在虚拟 DOM 打补丁之前。此时数据已经更新，但是DOM还未更新
  • 如果这个时候想去获取dom的innerHTML的话拿的是之前的不是操作更新后的数据
  • 注：这里页面中可能显示的是更新的数据，其实是还没有更新，应为是数据引用，所有要想看到效果就直接打印当前的字符串 this.$el.outerHTML

6、重新渲染

这里渲染就会重新执行上面的操作

• update

  • 数据更改导致DOM重新渲染后，会执行该钩子函数。
  • 此时数据和dom同步。这里获取的就是最新的dom

• beforeDestroy

  • 实例销毁之前调用。在这一步，实例仍然完全可用。
  • 可以在该钩子函数中，清除定时器

7、组件销毁

当这个组件在这个界面中不用了就会被销毁，比如使用v-if="false"的时候就会被销毁或者切换组件页面，这时就会调用 beforeDestroy 和 destroyed函数

• destroyed
  • Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除。