快应用如何基于 watch computed 监听多个变量？
在快应用开发中，如何监听多个变脸呢？与 Vue 一样，快应用中的 watch 监听，单纯的使用 watch 无法监听多个变量；如果某些操作，需要多个参数都更新后，才能执行，在自组件中如何能知道这个时机呢？变通方法之一，可通过 computed 计算属性返回一个对象，然后使用 watch 监听这个计算属性，只要值改变就会触发 watch，如此即能达成目的。
子组件示例写法
<template>
<div class="wrapper">
<text class="title">firstName: {{ firstName }}</text>
<text class="title">lastName: {{ lastName }}</text>
</div>
</template>
<script>
export default {
data: {
title: "Hello World. Quickapp Component."
},
computed: {
fullName() {
return {
firstName: this.firstName,
lastName: this.lastName
}
}
},
props: {
firstName: {
default: 'Hello' //默认值
},
lastName: {
default: 'World' //默认值
},
},
onInit() {
this.$watch('fullName', 'watchPropsChange')
},
watchPropsChange(newVal, oldVal) {
console.info(`Okay 👌， Perfect 监听到多个数据变化`, newVal, oldVal)
if (newVal.firstName && newVal.lastName) {
console.log(`Congratulations 🎉, 监听的两个数据，均已发生变化，可以执行更多操作了。`)
}
}
}
</script>
<style>
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: #212121;
}
</style>
父组件调用示例
<template>
<div class="wrapper">
<watch-multi-val first-name="{{firstName}}" last-name="{{lastName}}"></watch-multi-val>
</div>
</template>
<import name="watch-multi-val" src="./../../components/watch-multi-val.ux"></import>
<script>
export default {
private: {
firstName: "",
lastName: ""
},
onInit() {
setTimeout(() => {
this.firstName = "Arya"
}, 0)
setTimeout(() => {
this.lastName = "Stark"
}, 1000)
}
}
</script>
Vue 中如何监听多个属性
事实上，Vue2 官方也没有提供相关方法，来监听多个属性，也需要借助 computed，或者 watch 多个属性，调用同一处理函数。但在 Vue3，官方给出了更为便捷的解决方案，代码示例如下：
import { watch, ref } from 'vue';
export default {
setup(() => {
const a = ref(1), b = ref('hello');
watch([a, b], ([newA, newB], [prevA, prevB]) => {
// do whatever you want
});
});
};