就是一篇记录 关于vue 的watch使用记录:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>watch</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<h4>arr1</h4>
<p v-for="(item,index) in arr1" :key="index">{{ item.a }}</p>
<p>------------------------------ 分割线 -----------------------</p>
<h4>arr2</h4>
<p v-for="(item) in arr2" >{{ item }}</p>
<p>------------------------------ 分割线 -----------------------</p>
<p>a-{{a}}</p>
<p>------------------------------ 分割线 -----------------------</p>
<p>o.a1-{{o.a1}}</p>
<p>------------------------------ 分割线 -----------------------</p>
<p>o.a2-{{o.a2}}</p>
<p>------------------------------ 分割线 -----------------------</p>
<button @click="creadNum">改变</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data() {
return {
arr1:[{a:1},{a:2},{a:3},{a:4}],
arr2:[1,2,3,4],
a:1,
o:{
a1:"1",
a2:"2"
}
}
},
watch: {
arr1:{ // 监听一个含有对象的数组
handler:function(val,oldval){
console.log('val',val,'oldval',oldval);
},
deep: true
},
arr2:{
// 如果监听的该数组是一个简单数组 那么在watch里面是获取不到变化值的 具体文档请移步 https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
handler:function(val,oldval){
console.log('val',val,'oldval',oldval);
},
deep: true
},
o:{ // watch 整个对象
handler:function(val,oldVal){
console.log("o-val:",val,"o-oldval",oldVal);
},
deep: true
},
a(val,oldval){ // watch 一个单独的数据
console.log('val-',val,'oldval-',oldval)
},
'o.a1'(val,oldval){ // watch 某一个对象中属相
console.log('val',val,"oldval",oldval);
}
},
methods: {
creadNum() {
this.arr1[0].a='aaa';
this.arr2[0]='aaa';
this.a = 10;
this.o.a1 ="100";
this.o.a2 ="1000";
}
}
})
</script>
</html>