watch,是一个键值对,键是要要监测的表达式,可以是props元素也可以是data元素等,
值可以是string, Function, Object, Array。他的作用就是监听表达式变化,并且根据变化
进行相应的操作。
简单使用:
<template>
<div>{{ text }}</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
text: ''
}
},
watch: {
text: function (newData, oldData) {
console.log('监听到text变化---', oldData, newData)
}
},
mounted() {
let _this = this
function clock() {
let i = 0
return setInterval(function() {
i++
_this.text = i.toString()
}, 1000)
}
let timer = clock()
}
}
</script>
其他使用
<template>
<div>{{ content.text }}</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
content: {
text: ''
}
}
},
watch: {
content: {
handler(newData, oldData) {
console.log('watch监听---', newData.text, '---', oldData)
},
immediate: true, // 注释一
deep: true // 注释二
}
},
mounted() {
let _this = this
function clock() {
let i = 0
return setInterval(function() {
i++
_this.content.text = i.toString()
}, 1000)
}
let timer = clock()
}
}
</script>
注释一
immediate为true时,当组件初始化时就已经开始监听(即beforeCreate阶段)
immediate为false时,只有改变时才会监听
注释二
deep可以检测到对象内部属性的变化,数组除外。
1、deep为true时
2、deep为false
特别注意:
watcher定义函数不可以使用箭头函数。箭头函数绑定了父级作用域的上下文章,
而不会指向vue示例。