在上一篇博客中我们知道生命周期的方法：
生命周期：
vm.$mount：手动挂载Vue实例；
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；
需要进行手动的挂载实例：
在vue中加入：
vm.$mount('div');
或者：
new Vue({
data:{
username:'perfect'
}
}).$mount('div');
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；
由图看出，销毁了数据的绑定
function _destroy(){
vm.$destroy();
}
html:
<button @click="_destroy()">销毁</button>
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；
定义两个属性：oldName,newName
初始加载的页面：
vue中定义的属性：
oldName:'AAA',
newName:'BBB'
html：
oldName:<span ref='oldName'>{{oldName}}</span><br />
newName:<span>{{newName}}</span>
加一句修改后的界面：
vm.oldName='ccc';
执行下面的这一句代码时得到的是没有更新之前的值；
vm.newName=vm.$refs.oldName.textContent;
使用.$nextTick将oldName的属性值赋值给newName;
以下两种写法代码均可实现：
// vm.$nextTick(function(){
// vm.newName=vm.$refs.oldName.textContent;
//
// });
Vue.nextTick(function(){//全局的.$nextTick
vm.newName=vm.$refs.oldName.textContent;
})
实例方法--生命周期总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 08_常用的实例方法-生命周期</title>
<script type="text/javascript" src="../js/vue.js" ></script> </head>
<body>
<div>
<input type="text" v-model="username" /><br />
用户名：<span>{{username}}</span><br />
<button @click="_destroy()">销毁</button><br /> oldName:<span ref='oldName'>{{oldName}}</span><br />
newName:<span>{{newName}}</span> </div>
</body> <script> // let vm= new Vue({
// //el:'div',
// data:{
//
// username:'perfect'
//
//
// }
//
// }); // vm.$mount('div');
let vm= new Vue({
data:{
username:'perfect',
oldName:'AAA',
newName:'BBB'
}
}).$mount('div'); vm.oldName='ccc'; // vm.newName=vm.$refs.oldName.textContent; // vm.$nextTick(function(){
// vm.newName=vm.$refs.oldName.textContent;
//
// }); Vue.nextTick(function(){//全局的.$nextTick
vm.newName=vm.$refs.oldName.textContent;
})
function _destroy(){
vm.$destroy(); } </script>
</html>
实例方法--生命周期