常用的实例方法：
数据：
vm.$set：设置属性值；
vm.$delete：删除属性值；
vm.$watch：观测数据变化；
生命周期：
vm.$mount：手动挂载Vue实例；
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；
vm.$set：设置属性值与vm.$delete：删除属性值；
示例：
想和上图一样可以添加一个id，如果有id就就行自增，如果没有就添加一个默认值，因此只能使用.$set的实例方法：
vue代码：
<script> let vm= new Vue({ el:'div', data:{ user:{ username:'perfect' } }, methods:{ changeUsername(){ this.user.username='perfect_1'; }, addId(){ // this.$set(this.user,'id',1);//局部进行添加Id // Vue.set(this.user,'id',1);//全局设置 if(this.user.id){ this.user.id++; }else{ Vue.set(this.user,'id',1); } console.log(this.user.id); } } }); </script>
其中，this.user表示对象，id表示key，1表示value
html:
<body>
<div>
Id:<span>{{user.id}}</span><br />
用户名：<span>{{user.username}}</span><br />
<button @click="changeUsername">changeUsername</button>
<button @click="addId">添加ID</button>
</div>
</body>
同理，我们使用.$delete实例方法：如果有id的时候我们进行删除
使用.$delete实例方法的vue代码：
delId(){ if(this.user.id){ // this.$delete(this.user,'id'); Vue.delete(this.user,'id');//全局的 console.log('已经删除ID'); }
HTML：
<div> Id:<span>{{user.id}}</span><br /> 用户名：<span>{{user.username}}</span><br /> <button @click="changeUsername">changeUsername</button> <button @click="addId">添加ID</button> <button @click="delId">删除ID</button> </div>
.$set与.$delete实例方法总的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 06_常用的实例方法</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 8 </head> 9 <body> 10 <div> 11 Id:<span>{{user.id}}</span><br /> 12 13 用户名：<span>{{user.username}}</span><br /> 14 <button @click="changeUsername">changeUsername</button> 15 <button @click="addId">添加ID</button> 16 <button @click="delId">删除ID</button> 17 18 </div> 19 </body> 20 21 <script> 22 23 24 let vm= new Vue({ 25 el:'div', 26 data:{ 27 user:{ 28 username:'perfect' 29 } 30 31 }, 32 methods:{ 33 34 changeUsername(){ 35 36 this.user.username='perfect_1'; 37 }, 38 39 addId(){ 40 // this.$set(this.user,'id',1);//局部进行添加Id 41 // Vue.set(this.user,'id',1);//全局设置 42 43 if(this.user.id){ 44 this.user.id++; 45 }else{ 46 Vue.set(this.user,'id',1); 47 } 48 console.log(this.user.id); 49 }, 50 delId(){ 51 if(this.user.id){ 52 // this.$delete(this.user,'id'); 53 54 Vue.delete(this.user,'id');//全局的 55 console.log('已经删除ID'); 56 } 57 58 59 } 60 61 } 62 63 64 65 66 }); 67 68 69 70 71 </script> 72 </html>
vm.$watch：观测数据变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 07_常用的实例方法_watch</title>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div>
<input type="text" v-model="msg" /><br />
msg:<span> {{msg}}</span><br />
<input type="text" v-model="num" /><br />
num:<span> {{msg}}</span><br />
<button onclick="unWatch()">unWatch</button>
</div>
</body>
<script>
let vm= new Vue({
el:'div',
data:{
msg:'perfect',
num:1
},
watch:{
num:function(newValue,oldValue){
console.log("修改了num old="+oldValue+"new="+newValue);
}
},
});
let unwatch=vm.$watch('msg',function(newValue,oldValue){//返回一个取消观察函数，用来停止触发回调：
console.log("修改了msg old="+oldValue+"new="+newValue);
});
function unWatch(){
unwatch();
}
</script>
</html>
观测一个普通的属性，可以进行回调
实例方法watch深度观测
当观测一个对象时：需要一个深度观测deep这样才能进行回调
发现打印出来新值与旧值得结果都一样，说明没有获取到修改的username
加入的vue代码：
user:{ handler:function(newValue,oldValue){ console.log("修改了username old="+oldValue.username+"new="+newValue.username); console.log(oldValue==newValue); }, deep:true }
加入的HTML：
<input type="text" v-model="user.username" /><br /> username:<span> {{user.username}}</span><br />
当然.$watch也有这样的写法；
其代码为：
let unwatch=vm.$watch('user',{//返回一个取消观察函数，用来停止触发回调： handler:function(newValue,oldValue){ console.log("修改了msg old="+oldValue+"new="+newValue); }, deep:true });
vm.$watch总的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 07_常用的实例方法_watch</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 8 </head> 9 <body> 10 <div> 11 <input type="text" v-model="msg" /><br /> 12 msg:<span> {{msg}}</span><br /> 13 <input type="text" v-model="num" /><br /> 14 num:<span> {{msg}}</span><br /> 15 <input type="text" v-model="user.username" /><br /> 16 username:<span> {{user.username}}</span><br /> 17 <button onclick="unWatch()">unWatch</button> 18 19 20 21 22 23 24 25 </div> 26 </body> 27 28 <script> 29 30 31 let vm= new Vue({ 32 el:'div', 33 data:{ 34 msg:'perfect', 35 num:1, 36 user:{ 37 id:'01', 38 username:'perfect*' 39 } 40 41 42 }, 43 watch:{ 44 num:function(newValue,oldValue){ 45 console.log("修改了num old="+oldValue+"new="+newValue); 46 }, 47 48 // user:{ 49 // handler:function(newValue,oldValue){ 50 // console.log("修改了username old="+oldValue.username+"new="+newValue.username); 51 // console.log(oldValue==newValue); 52 // }, 53 // deep:true 54 // } 55 } 56 57 }); 58 59 let unwatch=vm.$watch('user',{//返回一个取消观察函数，用来停止触发回调： 60 61 handler:function(newValue,oldValue){ 62 console.log("修改了msg old="+oldValue+"new="+newValue); 63 }, 64 deep:true 65 }); 66 function unWatch(){ 67 68 unwatch(); 69 } 70 71 72 73 74 75 76 77 78 </script> 79 </html>