<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>example 实例方法</title> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> </head> <body> <div id="app"> </div> <button onclick="destroy()">销毁</button> <button onclick="reload()">刷新</button> <button onclick="tick()">数据更改</button> </body> <script type="text/javascript"> var cai=Vue.extend({ // 扩展器 template:`<p>{{message}}</p>`, //模版 data:function(){ //数据 return { message:'你好我蔡蔡' } }, mounted:function(){ //挂载运行次方法 console.log('mounted 被创建！') }, destroyed:function(){ //销毁后 调用次方法 生命周期 console.log('destroyed 销毁之后') }, updated:function(){ console.log('updated更新后') } }) var vm=new cai().$mount("#app"); //挂载 function destroy(){ // js方法函数 vm.$destroy(); //销毁 } function reload(){ vm.$forceUpdate(); //更新 } function tick(){ vm.message="修改后的内容"; vm.$nextTick(function(){ //数据修改方法 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 console.log('message更改完成后我被调用了'); }) } </script> </html>