Vue 进阶系列丨生命周期相关的实例方法-优快云博客

本文详细介绍了Vue.js的发展历程及其核心技术原理，包括视图层的演变、关键实例方法如vm.$mount、vm.$forceUpdate、vm.$nextTick和vm.$destroy的使用场景与实现机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。

最早的 Vue.js 只做视图层，没有路由，没有状态管理，也没有官方的构建工具，只有一个库，放到网页里就可以直接用了。

后来，Vue.js 慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（Vue-cli）等。此时，Vue.js 的定位是：The Progressive Framework。翻译成中文，就是渐进式框架。

Vue.js2.0 引入了很多特性，比如虚拟 DOM，支持 JSX 和 TypeScript，支持流式服务端渲染，提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能，现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧！

生命周期相关的实例方法

和生命周期相关的实例方法有四个，分别是 vm.$mount，vm.$forceUpdate，vm.$nextTick 和 vm.$destory。和事件相关的实例方法一样，也是通过在 vue 的原型链上挂载函数实现的。

Vue.prototype.$mount = function(){}
Vue.prototype.$forceUpdate = function(){}
Vue.prototype.$nextTick = function(){}
Vue.prototype.$destory = function(){}

‍

vm.$mount

如果在实例化的时候，设置了 el 选项，Vue.js 会自动将 el 指向的实例挂载到 DOM 元素上，如果没有设置，后期我们可以通过 vm.$mount 去手动挂载。

// 自动挂载
new Vue({
  el:'#app',
  router,
  store,
  render: h => h(App) // 渲染函数
})


// 手动挂载
new Vue({
    render: h => h(App),  // 渲染函数
    router,
    store
}).$mount('#app'


// 示例
// 开始显示的是 {{name}},点击按钮之后，显示名字'hfun'
<div id="app">
     {{name}}
</div>
<button onclick="getName()">显示名字</
<script>
     var obj = {
       name: 'hfun'
     }
     var vm = new Vue({
         data: obj
     })
     function getName() {
         vm.$mount("#app");
     }
</script>

vm.$forceUpdate

vm.$forceUpdate 的作用是更新当前组件以及插入当前组件插槽内部的子组件，注意，并不是全部组件。并且会触发 update 生命周期钩子。当我们使用 v-for 数据层次太多的时候，当修改数据时，页面并没有自动重新渲染，我们就需要手动强制刷新。

<template>
  <p>{{user.name}}</p>
  <button @click="updateName">修改</button>
</template>
<script>
  data(){
    return{
      user: {name:'hfun'}
    }
  },
  methods:{
    updateName(){
      this.user.name='fly'
    }
  }
</script>

当点击按钮时，想要修改名称为 fly，但是结果页面并没有想基本数据类型那样自动更新，这时我们有两个办法来解决。

// 通过vm.$set
methods:{
  updateName(){
    this.$set('user',name,'fly');
  }
}


// 通过vm.$forceUpdate
methods:{
  updateName(){
    this.user.name='fly'
    this.$forceUpdate()
  }
}

vm.$nextTick

接收一个回调作为参数，作用是将回调延迟到下次 DOM 更新周期之后执行。

当我们修改一个变量之后，想要对新的 DOM 进行操作，但是这时候我们是拿不到新的 DOM 的，因为页面还没有重新渲染，我们就要使用vm.$nextTick 方法。

methods:{
  updateName(){
      // 修改数据
      this.user.name='fly'
      // DOM还没有更新
      this.$nextTick(()=>{
        // DOM现在更新了
        ...        
      })
  }
}

vm.$destory

vm.$destory 的作用是完全销毁一个实例，并且清理和他相关联的实例的连接，解绑全部指令和监听器，同时触发 beforeDestory 和 destoryed 生命周期钩子函数。