No vue3.2, precisamos apenas adicionar configuração na tag de script. Isso pode ser feito. Componentes só precisam ser introduzidos sem registro, atributos e métodos podem ser usados no modelo sem retorno, e não há necessidade de escrever funções de configuração ou exportar padrão. Mesmo instruções personalizadas podem ser obtidas automaticamente em nosso modelo. .
1. Sintaxe do modelo
1. Usando expressões JavaScript
Apenas ligamos alguns nomes de propriedades simples no modelo. Mas o Vue realmente suporta expressões JavaScript completas em todas as ligações de dados:
{
{ number + 1 }}
{
{ ok ? 'YES' : 'NO' }}
{
{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>2. Chame a função
Um método exposto por um componente pode ser usado em uma expressão de ligação:
<span :title="toTitleDate(date)">
{
{ formatDate(date) }}
</span>
3. ref Obtenha elementos
<template>
<div id="haha" ref="haha"></div>
</template>tem que ref especificar o tipo HTMLElement
setup() {
let haha = ref<HTMLElement|null>(null)
console.log(haha)
return {
haha,
}
},haha.style.fontSize = '20px'4.reactive
{
{obj.name}} Você pode usá-lo diretamente no modelo
Modificar modificação direta obj[name] = ‘xxx’
A diferença entre ref e reativo:
ref: É usado para vincular dados responsivos a tipos básicos de dados. Ao acessar, ele precisa passar a forma de .value , e o tamplate será analisado automaticamente e .value não é necessário
reativo: usado para vincular dados responsivos a tipos de dados complexos, basta acessá-los diretamente
<template>
<div>
<p>{
{title}}</p>
<h4>{
{userInfo}}</h4>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
type Person = {
name: string;
age: number;
gender: string;
};
const title = ref<string>("彼时彼刻，恰如此时此刻");
const userInfo = reactive<Person>({
name: '树哥',
age: 18
})
</script>5.toRefs
setup() {
const user = reactive({
name: '小浪',
age: 21,
})
let userObj = toRefs(user)
return {
...userObj,
}
}6. Qual é a diferença entre ref e reactivo?
Em termos de função, ref e reativo podem realizar dados responsivos!
No nível gramatical, os dois diferem. Dados responsivos definidos por ref precisam ser alterados na forma de [data].value; dados definidos em reativo precisam ser alterados na forma de [data].[prpoerty].
const actTitle: Ref<string> = ref('活动名称');
const actData = reactive({
list: [],
total: 0,
curentPage: 1,
pageSize: 10
});
actTitle.value = '活动名称2';
actData.total = 100;Mas no nível do aplicativo, ainda existem diferenças.De um modo geral: para um único tipo comum de dados, usamos ref para definir a capacidade de resposta. Na cena do formulário, a cena que descreve o objeto chave:valor de um formulário usa reativo ; em alguns cenários, um conjunto de dados de um determinado módulo geralmente usa o método reativo para definir os dados.
Então, os objetos precisam ser definidos usando reativos? Na verdade não é, pode ser feito, de acordo com seus próprios cenários de negócios, problemas específicos e análises específicas! ref enfatiza a alteração de um valor de dados e reativo enfatiza a alteração de um determinado atributo do objeto definido.
7. Função periódica onMounted
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
onMounted(() => {
// 处理业务，一般进行数据请求
})
return {
counter
}
}
})8. uso da loja
importar { useStore } de "vuex";
const store = useStore();
const storeData = computered (() => store); // Coopere com o computered para obter o valor de store.
import { useStore } from "vuex";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const store = useStore();
const storeData = computed(() => store); // 配合computed，获取store的值。
return {
counter,
storeData
}
}
})
9. O uso do roteador
importar { useRouter } de "vue-router";
roteador const = useRouter();
const onClick = () => { router.push ({ name: "AddGift" }); }
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
return {
counter,
onClick
}
}
})
10. Separação de preocupações
A separação de preocupações deve ser dividida em dois significados: o primeiro significado é que a própria configuração do Vue3 coloca os dados relacionados e a lógica de processamento juntos. Este é um tipo de agregação de preocupações, que é mais conveniente para nós olharmos para o código de negócios.
A segunda camada significa que, quando a configuração se torna maior, podemos extrair uma parte relacionada do negócio dentro da configuração para alcançar a separação de interesses na segunda camada.
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
import useMerchantList from './merchant.js';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
// 在该示例中，我们把获取商家列表的相关业务分离出去。也就是下面的merchant.ts
const {merchantList} = useMerchantList();
return {
counter,
onClick,
merchantList
}
}
})
comerciante.ts
import { getMerchantlist } from "@/api/rights/gift";
import { ref, onMounted } from "vue";
export default function useMerchantList(): Record<string, any> {
const merchantList = ref([]);
const fetchMerchantList = async () => {
let res = await getMerchantlist({});
merchantList.value = res.data.child;
};
onMounted(fetchMerchantList);
return {
merchantList
};
}
11.interface
Usando TS para desenvolvimento de negócios, uma ideia central é focar primeiro na estrutura de dados e depois desenvolver páginas com base na estrutura de dados. O modelo anterior de desenvolvimento de front-end era escrever a página primeiro e depois focar nos dados.
Por exemplo, para escrever uma página de lista de presentes, podemos precisar definir essas interfaces. Em suma, o que precisamos prestar atenção são: a interface dos dados da página, o tipo de dados retornado pela interface, o tipo de parâmetro de entrada da interface e assim por diante.
// 礼品创建、编辑、列表中的每一项，都会是这个数据类型。
interface IGiftItem {
id: string | number;
name: string;
desc: string;
[key: string]: any;
}
// 全局相应的类型定义
// 而且一般来说，我们不确认，接口返回的类型到底是什么（可能是null、可能是对象、也可能是数组），所以使用范型来定义interface
interface IRes<T> {
code: number;
msg: string;
data: T
}
// 接口返回数据类型定义
interface IGiftInfo {
list: Array<IGiftItem>;
pageNum: number;
pageSize: number;
total: number;
}
Em uma solicitação de interface comum, geralmente usamos TS para definir uma solicitação de dados, o tipo req da solicitação de dados e o tipo res da solicitação de dados.
export const getGiftlist = (
params: Record<string, any>
): Promise<IRes<IGiftInfo>> => {
return Http.get("/apis/gift/list", params);
};
12. Suporta vários modelos v
//父组件
<template>
<child v-model="name" v-model:email="email" />
<p>姓名：{
{ name }}</p>
<p>邮箱：{
{ email }}</p>
</template>
<script lang="ts" setup>
import child from './child.vue'
import { ref } from 'vue'
const name = ref<string>('张三')
const email = ref<string>('[email protected]')
</script>// 子组件
<template>
<button @click="updateName">更新name</button>
<button @click="updateEmail">更新email</button>
</template>
<script lang="ts" setup>
// 定义emit
const emits = defineEmits<{
(e: 'update:modelValue', value: string): void
(e: 'update:email', value: string): void
}>()
const updateName = () => {
emits('update:modelValue', '李四')
}
const updateEmail = () => {
emits('update:email', '[email protected]')
}
</script>Se v-modelnenhum parâmetro for usado, seu valor padrão modelValueé o primeiro acima v-model, observe que não é mais usado como Vue2 neste momento $emit('input'), mas é usado uniformemente update:xxx.
13. assista
watch(data,()=>{},{})
Parâmetro um, os dados monitorados
Parâmetro dois, a função de retorno de chamada acionada quando os dados mudam (newVal, oldVal)
O parâmetro três, o item de configuração de opções, é um objeto
-
1. Ouça um dado de resposta definido por ref
<script setup lang="ts">
import { ref, watch } from "vue";
const str = ref('彼时彼刻')
//3s后改变str的值
setTimeout(() => { str.value = '恰如此时此刻' }, 3000)
watch(str, (newV, oldV) => {
console.log(newV, oldV) //恰如此时此刻 彼时彼刻
})
</script>-
2. Ouça várias referências
Neste momento, o método de escrita torna-se a forma de um array
<script setup lang="ts">
import { ref, watch } from "vue";
let name = ref('树哥')
let age = ref(18)
//3s后改变值
setTimeout(() => {
name.value = '我叫树哥'
age.value = 19
}, 3000)
watch([name, age], (newV, oldV) => {
console.log(newV, oldV) // ['我叫树哥', 19] ['树哥', 18]
})
</script>-
3. Ouça o objeto responsivo definido por Reativo
<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
name: '树哥',
age: 18
})
//3s后改变值
setTimeout(() => {
info.age = 19
}, 3000)
watch(info, (newV, oldV) => {
console.log(newV, oldV)
})
</script>-
4. Ouça reativo para definir um único atributo de um objeto responsivo
<script setup lang="ts"> import { reactive, watch } from "vue"; let info = reactive({ name: '树哥', age: 18 }) //3s后改变值 setTimeout(() => { info.age = 19 }, 3000) watch(()=>info.age, (newV, oldV) => { console.log(newV, oldV) // 19 18 } </script>
-
pare de ouvir
Quando watchEffect é chamado na função setup() de um componente ou em um gancho de ciclo de vida, o ouvinte é vinculado ao ciclo de vida do componente e para automaticamente quando o componente é desmontado.
Mas criamos um ouvinte de forma assíncrona. Neste momento, o ouvinte não está vinculado ao componente atual, portanto, mesmo que o componente seja destruído, o ouvinte ainda existirá.
Neste momento, podemos chamar explicitamente para parar de ouvir
<script setup lang="ts">
import { watchEffect } from 'vue'
// 它会自动停止
watchEffect(() => {})
// ...这个则不会！
setTimeout(() => {
watchEffect(() => {})
}, 100)
const stop = watchEffect(() => {
/* ... */
})
// 显式调用
stop()
</script>(o mesmo abaixo)
Monitoramento de diferentes tipos de dados
Monitoramento de tipos básicos de dados:
const nome = ref<string>('Zhang San')
watch (name, ( newValue, oldValue ) => { console.log('watch===', newValue, oldValue) })
Monitoramento de tipos de dados complexos:
interface UserInfo { name: string age: number } const userInfo = reactive< UserInfo >({ name: 'Zhang San', age: 10 }) // monitora todo o objeto watch( userInfo , (newValue, oldValue) => { console log('watch userInfo', newValue, oldValue) }) // monitora uma propriedade watch( () => userInfo.name , (newValue, oldValue) => { console.log('watch name', newValue, oldValue) })
Suporte para ouvir várias fontes
const name = ref<string>('Zhang San')
const userInfo = reactive({ age: 18 }) // Monitora o atributo age de name e userInfo ao mesmo tempo watch([name, () => userInfo.age ] , ([ novoNome, novaIdade], [antigoNome, velhice]) => { // })
14. watche watchEffectdiferença:
1. Watch é execução preguiçosa, ou seja, só será executado quando o valor monitorado mudar, mas watchEffect é diferente, e watchEffect será executado toda vez que o código for carregado (ignore a configuração do terceiro parâmetro de watch, se você modificar o item de configuração, você também pode implementá-lo imediatamente)
2. Watch precisa passar pelo objeto monitorado, watchEffect não precisa
3. Watch pode monitorar apenas dados responsivos: atributos definidos por ref e objetos definidos por reativo.Se você monitorar diretamente os atributos no objeto definido por reativo, não é permitido, a menos que você use uma função para convertê-lo.
4. WatchEffect não funciona se monitorar o objeto definido por reativo, ele pode monitorar apenas as propriedades no objeto.
15. calculado
<template>
<div>
<p>{
{title}}</p>
<h4>{
{userInfo}}</h4>
<h1>{
{add}}</h1>
</div>
</template>
<script setup lang="ts">
import { ref, reactive,computed } from "vue";
const count = ref(0)
// 推导得到的类型：ComputedRef<number>
const add = computed(() => count.value +1)
</script>