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

一.$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更新完后我被调用了')
        })
      }

实现效果: