【成都校区】详解Vue生命周期 - 黑马程序员技术交流社区

生命周期是理解Vue的一个非常重要的环节，初学Vue时可能会出现数据渲染的失败的错误，因此打算写两篇博客详细介绍Vue的生命周期：

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用；data、computed、watch、methods和DOM都不能使用

[JavaScript] 纯文本查看 复制代码

  data () {

    return {

      msg: 1

    }

  },

  beforeCreate() {

    console.log(this.$data)  //undefined

    console.log(this.$el)    //undefined

  }

如果非要在beforeCreate()取data也不是没有办法，异步方式可以通过this.$nextTick()或seTimeout，同步方式可以通过this.$options。当然一般不会这么操作。

[JavaScript] 纯文本查看 复制代码

  beforeCreate() {

    this.$nextTick(() => {       

      console.log(this.msg)                  //1

    })



    setTimeout(()=> {

      console.log(this.msg)                  //1

    }, 1000)



    console.log(this.$options.data()["msg"]) //1

  }

在实例创建完成后被立即调用，可以操作data、computed、watch、methods，但DOM还没挂载，不能操作。

[JavaScript] 纯文本查看 复制代码

  created () {

    this.getMsg()          //1

    console.log(this.msg)  //1

    console.log(this.$el)  //undefined

  },

  methods: {

    getMsg() {

      console.log(this.msg)

    }

  }

通常在此进行页面初始化操作或简单的Ajax请求（此时页面还未呈现，过多的请求会导致白屏）

在挂载开始之前被调用：相关的 render 函数首次被调用。这一步没啥特别的，很少在此进行操作。

[JavaScript] 纯文本查看 复制代码

  beforeMount() {

    console.log(this.msg)  //1

    console.log(this.$el)  //undefined

  }

[JavaScript] 纯文本查看 复制代码

  mounted() {

    console.log(this.msg)  //1

    console.log(this.$el)   //可看到 DOM 的信息

  }

mounted 不保证所有子组件都一起被挂载了。若想要等整个视图都渲染完毕再操作，可以使用 this.$nextTick

[JavaScript] 纯文本查看 复制代码

  mounted() {

    this.$nextTick()

  }

只有数据更新时才调用，发生在虚拟 DOM 打补丁之前。适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

[HTML] 纯文本查看 复制代码

<div>{{msg}}</div>

[JavaScript] 纯文本查看 复制代码

 mounted() {   

    this.msg = 2

  },

  beforeUpdate: function() {

    console.log(this.$el.innerHTML)  //1

    console.log(this.$el)            //<div ...> 2 </div>

    console.log(this.msg)            //2

  }

虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可以执行依赖于DOM的操作。

[JavaScript] 纯文本查看 复制代码

  mounted() {   

    this.msg = 2

  },

  updated: function() {

    console.log(this.$el.innerHTML)  //2

    console.log(this.$el)            //<div ...> 2 </div>

    console.log(this.msg)            //2

  }

updated 不保证所有子组件都被重绘了。若想要等到整个视图都重绘完毕再操作，可以用 this.$nextTick

实例销毁前调用，这里没什么特殊的，该用的仍然可用

[JavaScript] 纯文本查看 复制代码

  beforeDestroy() {

    console.log(this.msg)  //2

    console.log(this.$el)  //<div ...> 2 </div>

  }

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

这里我一开始的理解是数据不能用了，结果还依然打印了数据，不解中……

[JavaScript] 纯文本查看 复制代码

 destroyed() {

    console.log(this.msg)  //2

    console.log(this.$el)  //<div ...> 2 </div>

  }