watch 侦听器
程序员文章站
2022-05-16 22:10:16
...
第 1 章:watch 侦听器 基本用法
侦听字符串 和 侦听对象的属性 用法的区别
<template>
<div class="watch">
<input type="text" v-model="name" />
<p>{{ name }}</p>
<input type="text" v-model="info.age" />
<p>{{ info }}</p>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
name: '张三',
info: {
age: 20
}
}
},
watch: {
// 情形一:监听字符串,新旧值都可以打印
name: function (newValue, oldValue) {
console.log('name', newValue, oldValue);
},
/**
* 情形二:深度监听对象里面的属性,只能打印新值,拿不到旧值
* 因为对象是引用类型,两个对象都是同一个引用地址
* 所以打印的结果都是一样的
*/
info: {
handler: function (newValue, oldValue) {
console.log('新值age', newValue);
console.log('旧值age', oldValue); // oldValue 和 newValue 一样
},
deep: true
}
}
}
</script>
第 2 章:watch响应数据的变化,执行异步操作
Vue中计算属性和watch的区别
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。
这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时
,这个方式是最有用的。
<template>
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question" />
</p>
<p>{{ answer }}</p>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
}
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer(); // [思考???]
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
// 请参考:https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
}
</script>
上一篇: 如何点击书签后获取当前的URL?