1. Introdução básica e criação de projeto do vue3
Vue é uma estrutura progressiva para construção de interfaces de usuário . A versão oficial do Vue.js 3.0 "One Piece" foi lançada em setembro de 2020. Após mais de 2 anos de desenvolvimento, mais de 100 colaboradores, mais de 2.600 envios e mais de 600 PRs, o Vue3 também oferece suporte à maioria dos recursos do Vue2. suporta melhor TypeScript e adiciona muitos novos recursos, como: API de composição, novos componentes (Fragment/Teleport/Suspense), etc.
Para introdução detalhada e métodos de criação de projeto, consulte o artigo publicado anteriormente——
https://blog.csdn.net/gkx19898993699/article/details/127656687?spm=1001.2014.3001.55012. APIs de combinação comumente usadas (configuração, ref, reativa)
(1) configuração
- Nova opção, todas as funções combinadas da API são usadas aqui, executadas apenas uma vez durante a inicialização
- Se a função retornar um objeto, as propriedades ou métodos do objeto poderão ser usados diretamente no modelo.
export default {
name: "toRefs",
setup () {
let a = 6
return {
a
},
}
}(2) referência
● Função: definir uma resposta de dados
●Sintaxe: const xxx = ref(initValue):
○Crie um objeto de referência contendo dados responsivos
○Dados de operação em js: xxx.value
○Dados de operação no modelo: Não é necessário .value
●Geralmente usado para definir um tipo básico de dados responsivos
<template>
<h2>{
{count}}</h2>
<hr>
<button @click="update">更新</button>
</template>
<script>
import {
ref
} from 'vue'
export default {
/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
// data () {
// return {
// count: 0
// }
// },
// methods: {
// update () {
// this.count++
// }
// }
/* 使用vue3的composition API */
setup () {
// 定义响应式数据 ref对象
const count = ref(1)
console.log(count)
// 更新响应式数据的函数
function update () {
// alert('update')
count.value = count.value + 1
}
return {
count,
update
}
}
}
</script>(3) reativo
- Função: Definir capacidade de resposta para vários dados
- const proxy = reativo(obj): recebe um objeto normal e retorna um objeto proxy reativo do objeto normal
- As transformações reativas são "profundas": afetam todas as propriedades aninhadas dentro do objeto
- A implementação do proxy interno é baseada no ES6, e os dados internos do objeto de origem são operados por meio do objeto proxy de maneira responsiva.
<template>
<h2>name: {
{state.name}}</h2>
<h2>age: {
{state.age}}</h2>
<h2>wife: {
{state.wife}}</h2>
<hr>
<button @click="update">更新</button>
</template>
<script>
/*
reactive:
作用: 定义多个数据的响应式
const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”：会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
*/
import {
reactive,
} from 'vue'
export default {
setup () {
/*
定义响应式数据对象
*/
const state = reactive({
name: 'tom',
age: 25,
wife: {
name: 'marry',
age: 22
},
})
console.log(state, state.wife)
const update = () => {
state.name += '--'
state.age += 1
state.wife.name += '++'
state.wife.age += 2
}
return {
state,
update,
}
}
}
</script>Para obter detalhes sobre os três acima, você pode pular para o artigo anterior——
3. Compare a capacidade de resposta de Vue2 e Vue3
(1) Vue2
- Objeto: sequestrar (monitorar/interceptar) a leitura e modificação dos valores de propriedade existentes do objeto por meio de defineProperty
- Array: implemente o sequestro de modificação de elemento, substituindo o array de atualização do array e uma série de métodos para atualizar os elementos.
(2) Vue3
- Através de Proxy: intercepte quaisquer (13 tipos) operações em qualquer atributo de dados, incluindo leitura e gravação de valores de atributos, adição de atributos, exclusão de atributos, etc...
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
- Através do Reflect: execute dinamicamente operações específicas nas propriedades correspondentes do objeto proxy
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
1.Reflect.get (target, propertyKey)
parâmetros (1) target: o objeto alvo cujo valor precisa ser obtido
(2) propertyKey: o valor chave do valor que precisa ser obtido
(3) valor de retorno: o valor de a propriedade
2.Reflect.set(target, propertyKey, value)
parâmetros (1) target: o objeto alvo para definir a propriedade.
(2) propertyKey: o nome da propriedade definida.
(3) valor: o valor definido
(4) valor de retorno: retorna um valor booleano que indica se o atributo foi definido com sucesso.
Para obter detalhes, vá para o artigo publicado anteriormente——
4. Atributos computados e monitoramento
- função computada:
- Consistente com a função de configuração computada
- Existem getters e setters
- função de relógio
- Consistente com a função de configuração do relógio
- único ganhador
- Monitore um ou mais dados reativos especificados e execute automaticamente retornos de chamada de monitoramento assim que os dados forem alterados.
- Por padrão, o retorno de chamada não é executado inicialmente, mas você pode configurar imediato como verdadeiro para especificar que o primeiro retorno de chamada seja executado imediatamente durante a inicialização.
- Especifique o monitoramento de profundidade configurando deep como true
- função watchEffect
- Não há necessidade de especificar diretamente os dados a serem monitorados. Os dados responsivos usados na função de retorno de chamada serão monitorados.
- Por padrão, ele será executado pela primeira vez, para que os dados que precisam ser monitorados possam ser coletados.
- Retorno de chamada ao monitorar alterações de dados
Para obter detalhes, vá para——
5. Comparação dos ciclos de vida de Vue3 e Vue2
API combinável correspondente ao ciclo de vida da versão 2.x
- beforeCreate -> usar setup()
- criado -> usar setup()
- antesMount -> onBeforeMount
- montado -> onMounted
- beforeUpdate -> onBeforeUpdate
- atualizado -> onAtualizado
- beforeDestroy -> onBeforeUnmount
- destruído -> onUnmounted
- erroCaptured -> onErrorCaptured
Nova função de gancho
A API de composição também fornece as seguintes funções de gancho de depuração:
- onRenderTracked
- onRenderTriggered
6. Função de gancho personalizada
- Funções funcionais reutilizáveis encapsuladas usando a API de composição do Vue3
- A função do gancho personalizado é semelhante à tecnologia mixin no vue2
- Vantagens dos ganchos personalizados: A fonte do código de função reutilizado é muito clara e mais clara e fácil de entender.
- Requisito 1: Colete as coordenadas da página dos ganchos de clique do mouse do usuário/useMousePosition.ts
1. Crie um arquivo ts da função hook
import { ref, onMounted, onUnmounted } from 'vue'
/*
收集用户鼠标点击的页面坐标
*/
export default function useMousePosition () {
// 初始化坐标数据
const x = ref(-1)
const y = ref(-1)
// 用于收集点击事件坐标的函数
const updatePosition = (e: MouseEvent) => {
x.value = e.pageX
y.value = e.pageY
}
// 挂载后绑定点击监听
onMounted(() => {
document.addEventListener('click', updatePosition)
})
// 卸载前解绑点击监听
onUnmounted(() => {
document.removeEventListener('click', updatePosition)
})
return {x, y}
}2. Apresente-o na página necessária para usar os dados e métodos no gancho
<template>
<div>
<h2>x: {
{x}}, y: {
{y}}</h2>
</div>
</template>
<script>
import {
ref
} from "vue"
/*
在组件中引入并使用自定义hook
自定义hook的作用类似于vue2中的mixin技术
自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂
*/
import useMousePosition from './hooks/useMousePosition'
export default {
setup() {
const {x, y} = useMousePosition()
return {
x,
y,
}
}
}
</script>7. paraRefs
Converta um objeto responsivo em um objeto normal. Cada propriedade do objeto normal é uma referência
Aplicação: toRefs é útil ao retornar objetos reativos de funções compostas, para que o componente consumidor possa decompor o objeto retornado sem perder a reatividade.
Problema: Todos os valores de propriedade recuperados do objeto reativo não respondem
Solução: Use toRefs para converter todas as propriedades originais de um objeto reativo responsivo em propriedades ref responsivas.
<template>
<h2>App</h2>
<h3>foo: {
{foo}}</h3>
<h3>bar: {
{bar}}</h3>
<h3>foo2: {
{foo2}}</h3>
<h3>bar2: {
{bar2}}</h3>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue'
/*
toRefs:
将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象
应用: 当从合成函数返回响应式对象时，toRefs 非常有用，
这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用
*/
export default {
setup () {
const state = reactive({
foo: 'a',
bar: 'b',
})
const stateAsRefs = toRefs(state)
setTimeout(() => {
state.foo += '++'
state.bar += '++'
}, 2000);
const {foo2, bar2} = useReatureX()
return {
// ...state,
...stateAsRefs,
foo2,
bar2
}
},
}
function useReatureX() {
const state = reactive({
foo2: 'a',
bar2: 'b',
})
setTimeout(() => {
state.foo2 += '++'
state.bar2 += '++'
}, 2000);
return toRefs(state)
}
</script>8. ref obtém o elemento
Nota: Adicione lang="ts" na tag do script
Use a função ref para obter o elemento label no componente
Nota: Declarar uma ref para armazenar uma referência ao elemento
deve ter o mesmo nome que a ref no modelo.
Requisito funcional: deixe a caixa de entrada ganhar foco automaticamente
<template>
<h2>App</h2>
<input type="text">---
<input type="text" ref="inputRef">
</template>
<script lang="ts">
import { onMounted, ref } from 'vue'
/*
ref获取元素: 利用ref函数获取组件中的标签元素
功能需求: 让输入框自动获取焦点
*/
export default {
setup() {
//声明一个 ref 来存放该元素的引用
//必须和模板里的 ref 同名
const inputRef = ref<HTMLElement|null>(null)
onMounted(() => {
inputRef.value && inputRef.value.focus()
})
return {
inputRef
}
},
}
</script>9. A diferença entre usar <script setup> e passar parâmetros de pai para filho no Vue3 (pontos-chave)
Pessoalmente, acho que este é um ponto muito importante no Vue3 e, quando você se familiarizar com ele, descobrirá que é muito mais conveniente do que o Vue2. Para obter detalhes, pule para um artigo separado——