Vue实例方法总结($mount,$forceUpdate,$nextTick,$destroy)

最新推荐文章于 2025-07-07 14:58:53 发布

原创最新推荐文章于 2025-07-07 14:58:53 发布 · 3.0k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#Vue实例方法总结($mount #$forceUpdate #$next

十二.vue 专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了Vue实例的几个关键方法：$mount用于挂载组件，$destroy用于销毁Vue实例，$forceUpdate强制重新渲染组件，以及$nextTick用于在DOM更新后执行回调。通过示例代码展示了这些方法的使用场景和效果。

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

一.$mount方法

$mount方法是用来挂载我们的扩展的.
在这里插入图片描述

二.$destroy销毁方法

1.html写在app外面,注意因为是外面,所以点击要用onclick

    <div id="app">
      <h3>扩展构造器</h3>
      <author></author>
    </div>
    <!-- 构造器销毁:写在app外面,注意因为是外面,所以要用onclick -->
    <p><button onclick="destroy()">点我销毁</button></p>

 let jspang = Vue.extend({
        template: `<p>{{message}}</p>`,
        data: function() {
          return {
            message: 'hello jspang!'
          }
        }, //扩展里面也可以加生命周期
        destroyed() {
          console.log('销毁了')
        }
      })

      let vm = new jspang().$mount('author')

      function destroy() {
        vm.$destroy() //调用销毁的方法
      }

当我们点击时,就会调用destroy里面的方法,执行vm实例里的$destroy()方法,最终在控制台打印如下(点击后才打印销毁,不点击不打印,只打印一次):
在这里插入图片描述

三.$forceUpdate方法

更新时触发.
写法跟$destroy类似
1.html里

    <div id="app">
      <h3>扩展构造器</h3>
      <author></author>
    </div>
    <p><button onclick="reload()">点我刷新</button></p>

2.js里

     let jspang = Vue.extend({
        template: `<p>{{message}}</p>`,
        data: function() {
          return {
            message: 'hello jspang!'
          }
        }, //扩展里面也可以加生命周期
        destroyed() {
          console.log('销毁了')
        },
        updated() {
            console.log("被更新了");
            
        },
      })

      let vm = new jspang().$mount('author')

      function reload(){
          vm.$forceUpdate()
      }

效果:点击会不停的更新
在这里插入图片描述

$nextTick方法

修改数据时触发.
1.html里

    <div id="app">
      <h3>扩展构造器</h3>
      <author></author>
    </div>
    <p><button onclick="tick()">点我修改</button></p>

2.js

      let jspang = Vue.extend({
        template: `<p>{{message}}</p>`,
        data: function() {
          return {
            message: 'hello jspang!'
          }
        }, //扩展里面也可以加生命周期
        destroyed() {
          console.log('销毁了')
        },
        updated() {
          console.log('被更新了')
        }
      })

      let vm = new jspang().$mount('author')
      function tick() {
        vm.message = 'update message info '
        vm.$nextTick(function() {
          console.log('message更新完后我被调用了')
        })
      }

实现效果:
在这里插入图片描述