Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改

Posted 2020-09-21 千と千寻の

html

 <div id="app">
    
        </div>
    <p><button onclick="destroy()">卸载</button></p>
    <p><button onclick="reload()">刷新</button></p>
    <p><button onclick="tick()">修改</button></p>

js

 var demo = Vue.extend({
             template:`#tmp`,
             data:function(){
                 return{
                    message:"用Vue.extend构造器生成一个组件,并用实例$mount挂载上去"
                 }
             },
             destroyed:function(){
                console.log(‘10-destroyed(第十个钩子函数) 销毁之后‘);
             },
             mounted:function(){
                console.log(‘4-mounted 被创建‘);
             },
             updated:function(){
                 console.log("6-updated 被更新后");
             }
        })
      var vm =  new demo().$mount(‘#app‘)
        function destroy(){
            vm.$destroy()
        };
        function reload(){
            vm.$forceUpdate()
        };
        function tick(){
            vm.message="原生js操作对象属性"
            // 当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。
            vm.$nextTick(function(){
                console.log(‘原生js操作对象属性,修改后利用$nextTick来检测并输出修改的内容为‘+vm.message)
            })
        }