計算された
Computedは、データの属性値を動的に計算するのに適しています。リターンを追加する必要があります。データの属性を割り当てることはできません。変更がない場合は、最初にキャッシュから読み取られます。
使用シナリオ：値が複数の属性の影響を受ける場合
computed: {
btnText(){
return this.totalCount !== 0 ? `${
this.totalCount}s`: "获取验证码"
}
}
getとsetを使用できる場合もあります
computed: {
list: {
get() {
return this.$store.state.list
},
set(value) {
this.$store.commit('updateList', value)
}
}
}
見る
ウォッチはデータの値の変化を監視します。データの属性が変化すると、ウォッチの関数が実行されます。2つのパラメータがあります。前者はnewValで、後者はoldValです。参照型データの変更を監視する場合は、詳細監視を行う必要があります（ハンドラー+詳細監視の場合は詳細。即時：ページが初めて読み込まれるときにtrue、監視を実行します。
使用シナリオ：データ変更が複数のデータに影響する場合
watch: {
//a,b,c,d为data里的数据名
a(newVal, oldVal) {
console.log(newVal, oldVal)
},
// 方法名
b: 'someMethod',
c: {
handler(newVal, oldVal) {
},
deep: true // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深,一般用于监听对象
},
d: {
handler: 'someMethod',
immediate: true // 该回调将会在侦听开始之后被立即调用
},
},
複数の値の変化を監視する方法は？
時計は計算されたものと組み合わせて使用する必要があります
computed: {
info() {
const {
password, userCode } = this
return {
password,
userCode
}
},
//直接对一个对象尽行深度接听多个属性值
obj(){
return JSON.parse(JSON.stringify(object))
}
},
watch:{
info:{
handler: function(newval , oldval) {
if(newval.password && newval.userCode){
this.sign = true
}else{
this.sign = false
}
},
deep:true
},
obj:{
handler: function(newval , oldval) {
xx },
deep:true
}
}