Vue中的watch用法
Vue.js中的watch主要用于观察Vue实例上的数据变动。
栗子：
<template>
// 观察数据为字符串或数组
<input v-model="example0" />
<input v-model="example1" />
// 单观察数据example2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
<input v-model="example2.inner" />
</template>
<script>
export default {
data () {
return {
example0: "",
example1: "",
example2: {
inner: 1
}
}
},
watch: {
example0 (curVal, oldVal) {
console.log(curVal, oldVal)
},
example1: 'a', // 值可以为methods的方法名
example2: {
// 注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
handler (curVal, oldVal) {
console.log(curVal, oldVal)
},
deep: true
}
},
methods: {
a: function (curVal, oldVal) {
console.log(curVal, oldVal)
}
}
}
</script>
