1. ciclo de vida
En el ciclo de vida de Vue3, create () se elimina y se reemplaza por otros ciclos de vida más, como se muestra a continuación
Además, se agrega el atributo de configuración, que se ejecuta antes de lo creado. Al mismo tiempo, esto en la configuración no apunta a la instancia. Este método se llama antes de onBeforeMounted. Al mismo tiempo, vue3 también elimina este punto en El ciclo de vida y todos los métodos deben ser creados por ellos mismos y llamados en la instancia de vue.
Escritura gramatical de azúcar, de la siguiente manera:
/**
*作者：星辰38
*链接：https://juejin.cn/post/7044823063027941389
*来源：稀土掘金
**/
<template>
<div>123</div>
</template>
<script setup>
//setup写法，自带语法糖（推荐）
//在setup中没有this，所有的方法必须引入后使用
import {ref,onMounted,onUnmounted} from 'vue'
let up =ref(123)
import {} from 'vue'
//所有的生命周期用法均为回调函数
onMounted(()=>{
console.log('我创建了');
})
// 销毁实例变为onUnmounted，与vue2的destroy作用一致
onUnmounted(()=>{
console.log('我销毁了');
})
</script>
El escrito original es el siguiente:
<template>
<div>123</div>
</template>
<script>
import {ref} from 'vue'
export default{
setup() {
//定义数据需要在数据前面加ref包裹，后面会具体详解
let up=ref(123)
return{
up
}
}
}
</script>2. Enlace de datos
ref es un tipo de conversión de datos en una estructura de datos receptiva en vue3, debido a que no hay datos () {} en vue3, es imposible secuestrar datos para generar datos receptivos. Tenga en cuenta que se debe agregar .value a los datos obtenidos de la referencia
<template>
<div>
<div>{
{ num }}</div>
<button @click="addNum">num+1</button>
</div>
</template>
<script setup>
import { ref } from "vue";
let num = ref(1);
let addNum = () => {
//注意，使用ref变成响应式数据的时候，必须通过.value才可以拿到定义的数据
num.value = num.value + 1;
console.log("我执行了，现在的num是" + num.value);
console.log(num);
};
</script>3. Adquisición de elementos Dom
El dom solo se puede recuperar después de que se completa el renderizado. El dom no se ha renderizado durante la configuración, por lo que debe recuperarse
después del ciclo onMounted().
<template>
<div>
<!-- 模板中无需使用.value，会被自动编译转换成真实数据 -->
<div ref="box">{
{ num }}</div>
</div>
</template>
<script setup>
import { ref,nextTick ,onMounted} from "vue";
let num = ref(1);
// 需要拿取box这个元素，那么只需要定义一个名字为上方ref相同的名字即可
let box =ref();
// 这么拿取的话会是undefined，需要等dom渲染完成后才能拿取到，因为setup时候dom还没渲染
console.log(box.value);//undefined
nextTick(()=>{
console.log('我是nextTIck执行');
console.log(box.value);
})
onMounted(()=>{
console.log('我是mouted执行');
console.log(box.value);
})
</script>Cuarto, datos de definición reactiva.
Reactve puede convertir todo el objeto en datos receptivos, eliminando el problema de usar .value para recuperar datos.
<template>
<div>
<div ref="box">{
{ data.name }}</div>
<button @click="setName">修改名字</button>
</div>
</template>
<script setup>
import { reactive } from "vue";
let data = reactive({
name: "张三",
age: 13,
sex: "男"
});
function setName() {
// 调用时更像vue2，不用.value去调用
data.name = "李四";
data.age = 35;
data.sex = "女";
}
</script>5. Método vinculante
Se pueden utilizar tanto funciones anónimas como funciones normales.
template>
<div>
<button @click="setFn"></button>
</div>
</template>
<script setup>
// 以下方法都可以定义函数，按自己开发习惯定义一种即可
let setFn = ()=>{
console.log("我是匿名函数");
}
function setFn(){
console.log('我是普通函数');
}
</script>6. Calculado para usar
<template>
<div class="box">
<!-- 在上方调用即可，结果为169 -->
{
{add}}
</div>
</template>
<script setup>
import { computed, ref } from "vue";
let num1 = ref(13);
let num2 = ref(13);
// 设置个变量接收
let add = computed(() => {
return num1.value * num2.value;
});7. Monitoreo de atributo único
<template>
<div class="box">
<input type="text" v-model="user" />
</div>
</template>
<script setup>
import { watch, ref } from "vue";
// 用户名
let user = ref();
// watch监听接收两个或者三个匿名函数，第一个是监听的数值，第二个是处理监听函数，第三个是否开启深监听(可选)
watch(
() => user.value,
(newVal, oldVal) => {
console.log("新值:" + newVal + "旧值:" + oldVal);
},
// 可选项，是否开启深监听
{
deep: true
}
);
</script>8. Monitoreo de múltiples atributos
<template>
<div class="box">
<input type="text" v-model="user" />
<input type="password" v-model="password" />
</div>
</template>
<script setup>
import { watch, ref } from "vue";
// 用户名
let user = ref();
let password = ref();
// 监听user
watch(
() => user.value,
newVal => {
console.log("用户名:" + newVal);
},
// 可选项，是否开启深监听
{
deep: true
}
);
// 监听password
watch(
() => password.value,
newVal => {
console.log("密码:" + newVal);
}
);
</script><template>
<div class="box">
<input type="text" v-model="user" />
<input type="password" v-model="password" />
</div>
</template>
<script setup>
import { watch, ref } from "vue";
// 用户名
let user = ref();
let password = ref();
// 同时监听多个值，只要有一个值变化就会触发方法
// 同时监听user和password，只要user或者password其中一个值变化，就会触发下面的方法
watch(()=>[user.value, password.value],([newUser, newPassword],[oldUser, oldPassword])=>{
console.log('我是新的user值'+newUser);
console.log('我是旧的的user值'+oldUser);
console.log('我是新的pass值'+newPassword);
console.log('我是旧的的pass值'+oldPassword);
})
</script>9. Salto de ruta
Utilice this.$router.push en vue2 para saltar, pero en vue3, es necesario introducir useRouter para su uso.
<template>
<div>
<button @click="jumpNewPage">跳转首页</button>
</div>
</template>
<script setup>
// 切记是在vue-router中引入useRouter
import {useRouter} from 'vue-router'
const router = useRouter()
let jumpNewPage = ()=>{
// 切记不可将router定义在方法中，这样他不是响应式数据，会报错
// const router = useRouter()
router.push({path: '/'})
}
</script>10. Parámetros de enrutamiento
Nota: Cuando se utiliza la consulta para pasar parámetros, los parámetros se reflejarán en la ruta, como 8080/?name=XX, pero los parámetros no
<template>
<div>
<button @click="jumpNewPage">跳转首页</button>
</div>
</template>
<script setup>
// 记住是在vue-router中引入useRouter
import {useRouter} from 'vue-router'
const router = useRouter()
let jumpNewPage = ()=>{
// 有两种传参方式，query和params，两者写法不一样，请注意
// query更像get传参，是显性传参，前面跳转加path路径即可，刷新也还在，
router.push({path: '/',query: {name:'首页'}})
// params更像post，是隐性传参过去，跳转需注意，不使用path跳转，而是用路由中跳转组件的name进行跳转，否则拿不到params
router.push({name: 'Home',params: {name:'首页'}})
}
</script>El objeto de inicio en la ruta es:
const router = [
{
path:'/',
name:'Home',
component:()=> import('../views/Home.vue')
meta:{title:'首页'}
}
]11. Parámetros de recepción de ruta
//#1 params接收
<script setup>
// 引入useRoute,获取是route
import {useRoute} from 'vue-router'
import {onMounted} from 'vue'
const route = useRoute()
onMounted(()=>{
console.log(route.params);//结果为{name:'首页'}
})
</script>
//#2 query接收
<script setup>
// 引入useRoute,获取是route
import {useRoute} from 'vue-router'
import {onMounted} from 'vue'
const route = useRoute()
onMounted(()=>{
console.log(route.query);//结果为{name:'首页'}
})
</script>
12. Componentes
Los componentes se pueden utilizar directamente en la plantilla después de introducirlos directamente en los accesorios, sin necesidad de registrarse.
<template>
<div class="box">
<!-- 子组件引用 -->
<v-child></v-child>
</div>
</template>
<script setup>
// 引入后无需注册
import vChild from '../components/child.vue'
</script>13. Parámetros de paso de defineProps de padre a hijo
El elemento principal pasa los datos al elemento secundario, y el elemento secundario usa defineProps para recibirlos.
//父元素
<template>
<div class="box">
<!-- 子组件引用 -->
<v-child msg='我给子元素带的一段话'></v-child>
</div>
</template>//子元素
<template>
<div class="child">
我是子组件
</div>
</template>
<script setup>
import {defineProps} from 'vue'
// 在接收时候也得注意，vue3 props接收必须规定数据类型，如果父元素数据类型出错，那么会报错
const props = defineProps({msg:String})
console.log(props); // Proxy {msg: '我给子元素带的一段话'}
</script>14. Pasar valor del hijo al padre defineEmits
//子组件
<template>
<div class="child">
我是子组件
</div>
</template>
<script setup>
import {defineEmits,onMounted} from 'vue'
const emit = defineEmits()
onMounted(()=>{
emit('getChildMsg','我是子元素，给父元素传的话')
})
</script>//父组件
<template>
<div class="box">
<!-- 接收子组件的方法 -->
<v-child @getChildMsg="getMsg"></v-child>
</div>
</template>
<script setup>
// 引入后无需注册
import vChild from "../components/child.vue";
let getMsg = e => {
console.log(e); //我是子元素，给父元素传的话
};
</script>15. El padre toma el método hijo defineExpose
//子组件
<template>
<div class="child">
{
{val}}
</div>
</template>
<script setup>
import {ref,defineExpose} from 'vue'
let val = ref('我是子组件')
let fn = ()=>{
val.value='我改变了子组件'
}
// 暴露val和fn
defineExpose({
val,fn
})
</script>//父组件
<template>
<div class="box">
<!-- 接收子组件的方法 -->
<v-child ref ='child'></v-child>
</div>
</template>
<script setup>
// 引入后无需注册
import vChild from "../components/child.vue";
import {ref,onMounted} from 'vue';
// 获取child实例
let child = ref()
onMounted(()=>{
console.log(child.value.val);//直接打印：我是子组件，并不需要加.value
// 执行子组件的fn函数
child.value.fn()
})
</script>