computado
Computed é adequado para calcular dinamicamente o valor do atributo nos dados. O retorno deve ser adicionado. O atributo nos dados não pode ser atribuído. Quando não houver alteração, ele será lido primeiro do cache.
Cenário de uso: quando um valor é afetado por vários atributos
computed: {
btnText(){
return this.totalCount !== 0 ? `${
this.totalCount}s`: "获取验证码"
}
}
Às vezes, você também pode usar get e set
computed: {
list: {
get() {
return this.$store.state.list
},
set(value) {
this.$store.commit('updateList', value)
}
}
}
Assistir
Watch é para monitorar a mudança do valor nos dados. Quando o atributo nos dados muda, a função em watch será executada. Existem dois parâmetros. O primeiro é newVal e o segundo é oldVal. Ao monitorar as alterações de dados de tipo de referência, você precisa realizar um monitoramento profundo ( manipulador + profundo para monitoramento profundo. Imediato: verdadeiro quando a página é carregada pela primeira vez, faça um monitoramento.
Cenário de uso: quando uma alteração de dados afeta vários dados
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 // 该回调将会在侦听开始之后被立即调用
},
},
Como monitorar mudanças em vários valores?
O relógio precisa ser usado em conjunto com o computador
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
}
}