Vue中的watch方法
1.普通用法
通过watch监听searchValue的变化
export default {
data() {
return {
searchValue: ''
}
},
watch: {
// 在值发生变化之后，重新加载数据
searchValue(newValue, oldValue) {
// 判断搜索
if (newValue !== oldValue) {
this.$_loadData()
}
}
},
methods: {
$_loadData() {
// 重新加载数据，此处需要通过函数防抖
}
}
}
2.立即触发
searchValue初始化时就触发$_loadData()
export default {
data() {
return {
searchValue: ''
}
},
watch: {
// 在值发生变化之后，重新加载数据
searchValue(newValue, oldValue) {
// 判断搜索
if (newValue !== oldValue) {
this.$_loadData()
}
}
},
methods: {
$_loadData() {
// 重新加载数据，此处需要通过函数防抖
}
}
}
3.深度监听
也就是说监听一个对象的属性，由于对象的newValue===oldValue，按照前面方法的判断会失效。需要使用深度监听的方式，这样newValue和oldValue对应的是对象属性的值。
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: 0,
deptId: ''
}
}
},
watch: {
// 在值发生变化之后，重新加载数据
formData: {
// 需要注意，因为对象引用的原因， newValue和oldValue的值一直相等
handler(newValue, oldValue) {
// 在这里标记页面编辑状态
},
// 通过指定deep属性为true, watch会监听对象里面每一个值的变化
deep: true
}
}
}
此外还有两种方法可以监听对象属性的值
（1）computed计算方法
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: 0,
deptId: ''
}
}
},
computed:{
name(){return this.formData.name;}
}
watch: {
// 在值发生变化之后，重新加载数据
name(newValue,oldValue){
console.log(`${newValue},${oldValue}`)
}
}
}
（2）用字符串表示对象的属性调用
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: 0,
deptId: ''
}
}
},
watch: {
// 在值发生变化之后，重新加载数据
”formData.name’(newValue,oldValue){
console.log(`${newValue},${oldValue}`)
}
}
}
4.随时监听，随时取消，$watch
export default {
data() {
return {
formData: {
name: '',
age: 0
}
}
},
created() {
this.$_loadData()
},
methods: {
// 模拟异步请求数据
$_loadData() {
setTimeout(() => {
// 先赋值
this.formData = {
name: '子君',
age: 18
}
// 等表单数据回填之后，监听数据是否发生变化
const unwatch = this.$watch(
'formData',
() => {
console.log('数据发生了变化')
},
{
deep: true
}
)
// 模拟数据发生了变化
setTimeout(() => {
this.formData.name = '张三'
}, 1000)
}, 1000)
}
}
}
通过this.watch返回的是一个unwatch函数，通过调用unwatch函数可以实现取消数据监听。
