Vue3框架焦点功能点响应式数据reactive、组合式API setup、computed、组件 ...

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

• 创建响应式对象
  
  
  
  • 利用reactive函数创建一个响应式的对象。
    
  1. import { reactive } from 'vue';
  3. const state = reactive({
  4.   count: 0,
  5.   message: 'Hello Vue3'
  6. });
  8. // 在组件中使用
  9. export default {
  10.   setup() {
  11.     return { state };
  12.   }
  13. };

  复制代码
    
  
  
  
  • 在模板中可以直接利用{{state.count}}和{{state.message}}来显示数据，并且当这些数据发生变化时，视图会自动更新。
    
  
  
• 响应式数组操作
  
  
  
  • 对于数组的操作，Vue3也能正确追踪变化。
    
  1. const list = reactive([1, 2, 3]);
  3. function addItem() {
  4.   list.push(list.length + 1);
  5. }

  复制代码
  
  

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

• 盘算属性（Computed Properties）
  
  
  
  • 盘算属性基于响应式数据进行盘算并缓存结果。
    
  1. import { reactive, computed } from 'vue';
  3. const state = reactive({
  4.   firstName: 'John',
  5.   lastName: 'Doe'
  6. });
  8. const fullName = computed(() => `${state.firstName} ${state.lastName}`);
  10. export default {
  11.   setup() {
  12.     return { state, fullName };
  13.   }
  14. };

  复制代码
  
  
• 生命周期钩子（Lifecycle Hooks）
  
  
  
  • 在setup函数中利用生命周期钩子。
    
  1. import { onMounted } from 'vue';
  3. export default {
  4.   setup() {
  5.     onMounted(() => {
  6.       console.log('Component is mounted');
  7.     });
  8.   }
  9. };

  复制代码
  
  

三、组件通信

• 父子组件通信 - Props和Emit
  
  
  
  • 父组件传递数据给子组件（Props）。
    
  • 子组件发送事件给父组件（Emit）。
    
  • 父组件：
    
  1. <template>
  2.   <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
  3. </template>
  5. <script>
  6. import { ref } from 'vue';
  7. import ChildComponent from './ChildComponent.vue';
  9. export default {
  10.   components: { ChildComponent },
  11.   setup() {
  12.     const parentMessage = ref('Hello from parent');
  13.     const handleChildEvent = (data) => {
  14.       console.log('Received from child:', data);
  15.     };
  16.     return { parentMessage, handleChildEvent };
  17.   }
  18. };
  19. </script>

  复制代码
    
  
  
  
  • 子组件：
    
  1. <template>
  2.   <button @click="sendToParent">Send to Parent</button>
  3. </template>
  5. <script>
  6. import { defineComponent, toRefs } from 'vue';
  8. export default defineComponent({
  9.   props: {
  10.     message: String
  11.   },
  12.   setup(props, { emit }) {
  13.     const { message } = toRefs(props);
  14.     const sendToParent = () => {
  15.       emit('childEvent', 'Hello from child');
  16.     };
  17.     return { sendToParent, message };
  18.   }
  19. });
  20. </script>

  复制代码
  
  

四、路由（Vue Router）集成（以下代码条件必要先安装设置好Vue Router）

• 定义路由和导航
  
  
  
  • 在router/index.js中定义路由。
    
  1. import { createRouter, createWebHistory } from 'vue-router';
  2. import Home from '../views/Home.vue';
  3. import About from '../views/About.vue';
  5. const routes = [
  6.   { path: '/', component: Home },
  7.   { path: '/about', component: About }
  8. ];
  10. const router = createRouter({
  11.   history: createWebHistory(),
  12.   routes
  13. });
  15. export default router;

  复制代码
    
  
  
  
  • 在组件中进行导航。
    
  1. <template>
  2.   <button @click="navigateToAbout">Go to About</button>
  3. </template>
  5. <script>
  6. import { useRouter } from 'vue-router';
  8. export default {
  9.   setup() {
  10.     const router = useRouter();
  11.     const navigateToAbout = () => {
  12.       router.push('/about');
  13.     };
  14.     return { navigateToAbout };
  15.   }
  16. };
  17. </script>

  复制代码
  
  

五、状态管理工具 - Vuex与Pinia
在Vue3中，除了组件内部的状态管理，我们经常必要处理跨组件的共享状态。这时，我们可以利用Vuex或Pinia如许的状态管理工具。

• Vuex的利用
  

首先，安装Vuex：

1. npm install vuex@next --save

复制代码

创建一个Vuex store：

1. // store/index.js
2. import { createStore } from 'vuex';
4. export default createStore({
5.   state() {
6.     return {
7.       count: 0
8.     };
9.   },
10.   mutations: {
11.     increment(state) {
12.       state.count++;
13.     }
14.   },
15.   actions: {
16.     increment(context) {
17.       context.commit('increment');
18.     }
19.   },
20.   getters: {
21.     doubleCount(state) {
22.       return state.count * 2;
23.     }
24.   }
25. });

复制代码

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

1. // main.js
2. import { createApp } from 'vue';
3. import App from './App.vue';
4. import store from './store';
6. const app = createApp(App);
7. app.use(store);
8. app.mount('#app');

复制代码

在组件中利用Vuex：

1. <template>
2.   <div>
3.     <p>Count: {{ count }}</p>
4.     <p>Double Count: {{ doubleCount }}</p>
5.     <button @click="increment">Increment</button>
6.   </div>
7. </template>
9. <script>
10. import { mapState, mapGetters, mapActions } from 'vuex';
12. export default {
13.   computed: {
14.     ...mapState(['count']),
15.     ...mapGetters(['doubleCount'])
16.   },
17.   methods: {
18.     ...mapActions(['increment'])
19.   }
20. };
21. </script>

复制代码

• ** Pinia的利用**
  

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

1. npm install pinia --save

复制代码

创建一个Pinia store：

1. // stores/counter.js
2. import { defineStore } from 'pinia';
4. export const useCounterStore = defineStore('counter', {
5.   state: () => ({
6.     count: 0
7.   }),
8.   actions: {
9.     increment() {
10.       this.count++;
11.     }
12.   },
13.   getters: {
14.     doubleCount: (state) => state.count * 2
15.   }
16. });

复制代码

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

1. // main.js
2. import { createApp } from 'vue';
3. import App from './App.vue';
4. import { createPinia } from 'pinia';
6. const app = createApp(App);
7. app.use(createPinia());
8. app.mount('#app');

复制代码

在组件中利用Pinia：

1. <template>
2.   <div>
3.     <p>Count: {{ counter.count }}</p>
4.     <p>Double Count: {{ counter.doubleCount }}</p>
5.     <button @click="counter.increment">Increment</button>
6.   </div>
7. </template>
9. <script>
10. import { useCounterStore } from '../stores/counter';
12. export default {
13.   setup() {
14.     const counter = useCounterStore();
15.     return { counter };
16.   }
17. };
18. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。