Vue3框架核心功能点响应式数据reactive、组合式API setup、computed、组件通信、路由导航，状态管理vuex、pinia等的实战示例代码

记录几个Vue3框架核心功能点，例如响应式数据reactive、组合式API setup、computed、组件通信、路由导航，状态管理vuex、pinia……等实战示例代码：

一、响应式数据（Reactive Data）

1. 创建响应式对象

   • 使用reactive函数创建一个响应式的对象。

   import { reactive } from 'vue';const state = reactive({count: 0,message: 'Hello Vue3'
   });// 在组件中使用
   export default {setup() {return { state };}
   };
   

   • 在模板中可以直接使用{{state.count}}和{{state.message}}来显示数据，并且当这些数据发生变化时，视图会自动更新。

2. 响应式数组操作

   • 对于数组的操作，Vue3也能正确追踪变化。

   const list = reactive([1, 2, 3]);function addItem() {list.push(list.length + 1);
   }
   

二、组合式API（Composition API） - setup函数

1. 计算属性（Computed Properties）
   • 计算属性基于响应式数据进行计算并缓存结果。

   import { reactive, computed } from 'vue';const state = reactive({firstName: 'John',lastName: 'Doe'
   });const fullName = computed(() => `${state.firstName} ${state.lastName}`);export default {setup() {return { state, fullName };}
   };
   

2. 生命周期钩子（Lifecycle Hooks）
   • 在setup函数中使用生命周期钩子。

   import { onMounted } from 'vue';export default {setup() {onMounted(() => {console.log('Component is mounted');});}
   };
   

三、组件通信

1. 父子组件通信 - Props和Emit
   • 父组件传递数据给子组件（Props）。
   • 子组件发送事件给父组件（Emit）。
   • 父组件：

   <template><ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
   </template><script>
   import { ref } from 'vue';
   import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },setup() {const parentMessage = ref('Hello from parent');const handleChildEvent = (data) => {console.log('Received from child:', data);};return { parentMessage, handleChildEvent };}
   };
   </script>
   

   • 子组件：

   <template><button @click="sendToParent">Send to Parent</button>
   </template><script>
   import { defineComponent, toRefs } from 'vue';export default defineComponent({props: {message: String},setup(props, { emit }) {const { message } = toRefs(props);const sendToParent = () => {emit('childEvent', 'Hello from child');};return { sendToParent, message };}
   });
   </script>
   

四、路由（Vue Router）集成（以下代码前提需要先安装配置好Vue Router）

1. 定义路由和导航
   • 在router/index.js中定义路由。

   import { createRouter, createWebHistory } from 'vue-router';
   import Home from '../views/Home.vue';
   import About from '../views/About.vue';const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
   ];const router = createRouter({history: createWebHistory(),routes
   });export default router;
   

   • 在组件中进行导航。

   <template><button @click="navigateToAbout">Go to About</button>
   </template><script>
   import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToAbout = () => {router.push('/about');};return { navigateToAbout };}
   };
   </script>
   

五、状态管理工具 - Vuex与Pinia

在Vue3中，除了组件内部的状态管理，我们经常需要处理跨组件的共享状态。这时，我们可以使用Vuex或Pinia这样的状态管理工具。

1. Vuex的使用

首先，安装Vuex：

npm install vuex@next --save

创建一个Vuex store：

// store/index.js
import { createStore } from 'vuex';export default createStore({state() {return {count: 0};},mutations: {increment(state) {state.count++;}},actions: {increment(context) {context.commit('increment');}},getters: {doubleCount(state) {return state.count * 2;}}
});

在主文件中引入并使用store：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用Vuex：

<template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template><script>
import { mapState, mapGetters, mapActions } from 'vuex';export default {computed: {...mapState(['count']),...mapGetters(['doubleCount'])},methods: {...mapActions(['increment'])}
};
</script>

2. ** Pinia的使用**

Pinia是Vue的官方状态管理库，它更加轻量且与Vue3的组合式API完美集成。

首先，安装Pinia：

npm install pinia --save

创建一个Pinia store：

// stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}},getters: {doubleCount: (state) => state.count * 2}
});

在主文件中引入并使用Pinia：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';const app = createApp(App);
app.use(createPinia());
app.mount('#app');

在组件中使用Pinia：

<template><div><p>Count: {{ counter.count }}</p><p>Double Count: {{ counter.doubleCount }}</p><button @click="counter.increment">Increment</button></div>
</template><script>
import { useCounterStore } from '../stores/counter';export default {setup() {const counter = useCounterStore();return { counter };}
};
</script>