浅解 Vue 生命周期

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

19- ref 的使用

1. 它可以获取原生的 DOM 子组件的依然也可以 (标签上定义: ref="name" 使用: this.$refs.name )
2. 虽然很无敌但是慎用

<input ref="name" v-if="login" type="text">

  methods: {
    fn() {
      this.login = true
      this.$nextTick(() => {
        this.$refs.name.focus()
      })
    }
  },

20- nextTeck 的使用

1. vue 中, 视图的更新是异步的; 视图不是立马更新的; 会先把事件放进一个队列里面; 当所有的同步代码执行完毕以后再去队列里面执行更新视图; 如果希望在更新之后的 DOM 的基础上做一些事情，就可以把这个事情放在 nextTick 的回调里面
2. 使用: 使用场景: 点击按钮出现输入框同时获取光标
3. 用法: this.$nextTeck(() => { 事件处理 })

  methods: {
  fn() {
    this.login = true
    this.$nextTick(() => {
      this.$refs.name.focus()
    })
  }
},

21- vue 的生命周期 由四个阶段; 8 个钩子组成

1. 创建前后: 1.创建前: beforeCreate 示例初始化前; 2. 创建后: created (一般来说发送 Ajax在这个钩子里边)
2. 挂载前后: 3. 挂载前: beforeMount (vue 的虚拟 DMO 挂载到真实网页之前) 4. 挂载后操作 DOM : mounted (vue 的虚拟 DMO 挂载到真实网页上)
3. 更新前后: 更新前: beforeUpdate ; 更新后: updated
4. 销毁前后: 销毁前: beforeDestroy 销毁后: destroyed 一般在这个阶段消除定时器, 解绑 js 定义的事件。
5. 小结: 如果是包含子组件的情况下生命周期是这样的: 子组件的实例初始化会在父组件的第三个钩子 (beforeMount) 之后开始执行, 等待子组件的虚拟 DOM 挂载到真实的网页上完毕后,父组件 虚拟 DOM 才会挂载到真实的网页, 随之就会更新各自的数据;
6. 父组件的生命周期: 实例初始化前 --> 父组件的生命周期: 实例初始化后 --> 父组件的生命周期: vue的虚拟DOM, 挂载到真实的网页之前 --> 子组件的生命周期: 实例初始化前 --> 子组件的生命周期: 实例初始化后 --> 子组件的生命周期: vue的虚拟DOM, 挂载到真实的网页之前 --> 子组件的生命周期: vue的虚拟DOM, 挂载到真实的网页上 --> 父组件的生命周期: vue的虚拟DOM, 挂载到真实的网页上