Vue3 监听属性 watch,我们可以通过 watch 来响应数据的变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
以下实例通过使用 watch 实现计数器:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
实例
以下实例进行千米与米之间的换算:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
实例
点击 "尝试一下" 按钮查看在线实例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法: kilometers 和 meters。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。可以看下如下视频演示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
异步加载中使用 watch
异步数据的加载 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
以下实例我们使用 axios 库,后面会具体介绍。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
实例
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
question: '',
answer: '每个问题结尾需要输入 ? 号。'
}
},
watch: {
// 每当问题改变时,此功能将运行,以 ? 号结尾
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = '加载中...'
axios
.get('https://yesno.wtf/api')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = '错误! 无法访问 API。 ' + error
})
}
}
}).mount('#watch-example')
</script>