vue3总结

《Vue3 总结：基础语法》

一、引入组件的方式

Vue2 中引入子组件，需要三个步骤：引入、注册、渲染。

在 Vue3 中引入子组件可以省略第二步，只需要引入组件后就可以直接渲染使用。

<template>
    <Child></Child>
</template>
<script setup lang="ts">
import Child from './Child.vue'
</script>

二、组件的 template

Vue2 中 template 只能有一个根节点，在 Vue3 中，template 可以有多个根节点。

三、setup

Vue3 中 setup 的语法有好几个版本，我们通常选择使用新提案版本：

<scirpt setup lang="ts">
</scirpt>

四、组件的数据

Vue3 组件内部的数据可以通过两种方式来定义：

1. ref：ref 的数据在 script 中访问时需要 .value
2. reactive：

import { ref, reactive } from 'vue';
const count = ref(0);
console.log(count.value);
const state = reactive({
    count: 1
})
console.log(state.count);

五、组件的方法

Vue2 中组件的方法都是定义在 methods 属性中，而 Vue3 中的方法直接在 script 中定义：

<scirpt setup lang="ts">
const login = () => {
}
</scirpt>

六、计算属性

Vue3 中也提供了 computed 作为计算属性。

import { computed } from 'vue';
const 变量一 = computed(() => {
    return 计算属性值;
})
const 变量二 = computed(() => {
    return 计算属性值;
})

七、侦听器

Vue3 提供了两种侦听器：

• watch
• watchEffect

1、watch

import { watch } from 'vue';
watch(
    () => 侦听的数据,
    () => {
        console.log('侦听的数据变化时执行该方法')
    },
    {
        deep: true,
        immediate: true
    }
);

2、watchEffect

import { watchEffect, reacitve } from 'vue';
const state = reacitve({
    num1: 1,
    num2: 2
})
watchEffect(() => {
    console.log(state.num1 + state.num2);
})

说明：

1. watchEffect 的回调函数会在页面首次加载时执行一次；
2. 后续当 watchEffect 的回调函数中使用的任意数据发生改变，该函数会重新执行；

八、生命周期函数

Vue2	Vue3
beforeCreate
created
beofreMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

《Vue3 总结：组件传值》

一、Prop

Vue3 中，父组件给子组件传值的方式和 Vue2 一样：

<Child name="zhangsan" :age="20"></Child>

子组件中接收 props 的方式有所不同：

<script setup lang="ts">
    import { defineProps } from 'vue';
    const props = defineProps({
        name: String,
        age: Number
    });
    console.log(props.name)
</script>

二、自定义事件

Vue3 中，父组件给子组件添加自定义事件的方式和 Vue2 一致：

<Child @getData="getData"></Child>

子组件中触发自定义事件：

import { defineEmits } from 'vue';
const emit = defineEmits();
emit('getData', 'hello')

《Vue3 总结：路由》

一、创建路由对象

import { createRouter } from 'vue-router'
const routes = [
    // ... 和 Vue2 一样
]
const router = createRouter({
    routes
})

二、设置路由模式

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
const router = createRouter({
    //  history: createWebHashHistory()   // hash 模式
    history: createWebHistory()           // history 模式
})

三、全局挂载路由

import router from './router';
const app = createApp(App)
app.use(router)

四、获取路由对象

Vue3 中提供了 useRoute 和 useRouter 两个方法，来获取路由信息对象和路由实例对象。

import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

注意：useRoute 和 useRouter 两个方法都只能在 setup 范围内使用。

《Vue3 总结：状态机》

一、全局挂载

import { createPinia } from 'pinia';
const app = createApp(App)
const pinia = createPinia();
app.use(pinia)

二、定义仓库

import { defineStore } from 'pinia'
export const useGlobalStore = defineStore('global', {
    state: () => ({
        数据名: 数据值
    }),
    getters: {
        计算属性名: (state) => {
            return 计算属性值;
        }
    },
    // 定义公共的修改 state 的方法，可以是同步，也可以是异步
    actions: {
        方法名() {
            // 获取 state 的数据
            console.log(this.属性名);
            // 修改 state 的数据
            this.属性名 = 新值;
        }
    }
})

三、操作仓库

如果我们在仓库以外的文件中需要操作仓库，都可以使用以下方式：

1、获取 state 的数据

import { useGlobalStore } from '../store/globalStore'
const globalStore = useGlobalStore();
console.log(globalStore.数据名);

2、修改 state 的数据

import { useGlobalStore } from '../store/globalStore'
const globalStore = useGlobalStore();
globalStore.数据名 = 新值;

3、调用 actions 的方法

import { useGlobalStore } from '../store/globalStore'
const globalStore = useGlobalStore();
globalStore.方法名()