<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="../assets/js/flexible_css.js"></script> <script src="../assets/js/flexible.js"></script> <script src="../assets/js/jquery-3.2.1.js"></script> <script src="../assets/js/vue.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>