Adquira o hábito de escrever juntos! Este é o 8º dia da minha participação no "Nuggets Daily New Plan · April Update Challenge", clique para ver os detalhes do evento .
No vue2, as duas APIs, watch e computed, são muito úteis para nós, hoje falarei sobre essas duas APIs.
calculado
computed在vue3中以函数形式存在，传入一个对象，当里面的依赖被读取是，调用get函数，被修改时调用set函数
会返回一个ref对象
复制代码Escreva um caso clássico
É necessário fornecer um sobrenome e um primeiro nome. Precisamos enviar o nome. Alguns alunos podem usar diretamente a emenda de strings, o que também é possível, mas usaremos o atributo computado para tentar agora.
definir e obter
Uma vez que a variável da qual a função set depende for modificada, a função set será executada imediatamente
A variável da qual depende a função get, desde que seja lida, a função get será executada
Essas duas funções são muito simples e são o princípio da capacidade de resposta no vue2
caso
Definir lastName, firstName, atualizar funções de atualização, fullName é o nome
setup() {
const firstName = ref("李")
const lastName = ref("华")
const update = ()=>{
firstName.value = "孙"
}
let fullName = computed({
get(){
console.log("get"+'函数被调用');
return firstName.value+lastName.value
},
set(value){
console.log(“set函数被调用”);
}
})
return {
fullName,
update
}
}
复制代码fullName é uma propriedade computada. Quando a dependência get for modificada, a função get será executada imediatamente e novos dados serão retornados. Ela só será chamada quando o próprio fullname for modificado. A função set é diferente.
Podemos ver que quando abrimos a página web, a função get será executada primeiro, e então a função get será executada novamente quando o fristName for modificado.
Função de relógio
Duas APIs, watchEffect e watch, são fornecidas na configuração. Ambas podem ser usadas para monitoramento. A diferença será resumida posteriormente.
watchEffect
watchEffect自动收集依赖，初始化运行,返回值为stop一个函数，调用会停止监听
可以传入一个函数，第一次执行时自动收集获取依赖
复制代码Esta função não requer que especifiquemos dependências, ela obterá as dependências correspondentes quando for executada pela primeira vez
setup() {
const name = ref("scc")
const age = ref(18)
const update = ()=>{
age.value++
}
watchEffect(()=>{
console.log(age.value);
})
return {
name,
age,
update
}
}
复制代码Defina um nome, variável de idade, método de atualização para atualizar a idade, watchEffect escuta o valor de idade
Podemos dar uma olhada nos resultados em execução
Pode-se ver que quando o navegador é atualizado, o programa é executado automaticamente uma vez, e podemos monitorar a alteração do valor da idade
propriedade nivelada
Vamos falar sobre como obter o elemento dom na configuração. No vue2, obtemos o elemento dom através de $refs. No vue3, podemos dar ao elemento dom um atributo ref, definir esse atributo na configuração e passá-lo, podemos passe este atributo obtenha o elemento dom
setup() {
const root = ref(null)
const name = ref("scc")
watchEffect(()=>{
console.log(root.value);
})
return {
root
}
复制代码Definimos root e o distribuímos, adicionamos o atributo ref ao elemento dom e observamos a saída do navegador
Neste ponto, podemos obter o elemento dom, mas ele é executado duas vezes, e todos descobriram, na primeira vez ele gera null e na segunda vez é o elemento dom
Por que é isso? Porque nossa função watchEffect é inicializada uma vez quando o dom não é atualizado e executado novamente quando o dom é montado
Como evitar isso, pode ser feito apenas uma vez
Sim, podemos usar o objeto flush
Um objeto flush pode ser configurado atrás de watchEffect. O padrão é pre, que é inicializado e executado. Ele pode ser modificado para pós-inicialização para não ser executado.
vamos tentar
setup() {
const root = ref(null)
watchEffect(()=>{
console.log(root.value);
},{
flush:"post"
})
return {
root
}
}
复制代码Adicionamos um objeto a watchEffect
Neste ponto watchEffect é executado apenas uma vez
Pare
O valor de retorno de watchEffect é uma função que pode ser executada para interromper o monitoramento
setup() {
const name = ref("scc")
const age = ref(18)
const update = ()=>{
age.value++
}
const stop = watchEffect(()=>{
console.log(age.value);
if(age.value>25){
stop()
}
})
return {
name,
age,
update,
}
}
复制代码Ouvimos o atributo idade e, quando for maior que 25, paramos de ouvir
Podemos ver que quando é maior que 25, a página ainda é atualizada, mas os dados não são mais gerados.
ver
O primeiro parâmetro de watch é o valor a ser monitorado, que pode ser um objeto ref, um objeto reativo, uma função callback e o segundo parâmetro é uma função callback.Quando o valor monitorado mudar, a função callback será chamada.
Ouça objetos reativos
setup() {
const info = reactive({age:18})
const update = ()=>{
console.log(info.age);
info.age++
}
watch(info,(newValue,oldValue)=>{
console.log(newValue+"------------------"+oldValue);
},{
deep:true
})
return{
info,
update
}
}
复制代码Definir informações, atualizar informações de alteração de idade, ver informações do monitor
É possível ouvir informações, mas oldvalue e newvalue parecem ser diferentes do esperado
Isso ocorre porque newValue e oldValue também são objetos reativos. Se você quiser se tornar um valor, você pode converter o objeto reativo em um objeto () =>{return {...info}}
setup() {
const info = reactive({age:18,name:"scc"})
const update = ()=>{
console.log(info.age);
info.age++
}
watch(()=>({...info}),(newValue,oldValue)=>{
console.log(newValue,oldValue);
})
return{
info,
update
}
}
复制代码Desconstruímos as informações e monitoramos o objeto estruturado
Como você pode ver, está tudo bem
monitorar objeto de referência
setup() {
const age = ref(18)
const update = ()=>{
console.log(age.value);
age.value++
}
watch(age,(newValue,oldValue)=>{
console.log(newValue,oldValue);
})
return{
age,
update
}
}
复制代码Crie a idade do objeto ref, atualize a idade da atualização, assista a idade do monitor
Pode monitorar normalmente, exibir conteúdo
Monitore vários dados
如果需要监听多个数据，可以传入一个数组
复制代码O terceiro parâmetro do relógio, item de configuração
deep深度侦听默认为true，结构出来对象没有侦听，需要开启
immediate最开始是否运行
复制代码Terminar
到此结束，明天接着更新
复制代码