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

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

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)            })        }

 

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