济南市城市建设集团网站,重庆建设网站哪里好,重庆网络推广网站推广,配资网站开发记录几个Vue3框架核心功能点#xff0c;例如响应式数据reactive、组合式API setup、computed、组件通信、路由导航#xff0c;状态管理vuex、pinia……等实战示例代码#xff1a;
一、响应式数据#xff08;Reactive Data#xff09; 创建响应式对象 使用reactive函数创建…记录几个Vue3框架核心功能点例如响应式数据reactive、组合式API setup、computed、组件通信、路由导航状态管理vuex、pinia……等实战示例代码
一、响应式数据Reactive Data 创建响应式对象 使用reactive函数创建一个响应式的对象。 import { reactive } from vue;const state reactive({count: 0,message: Hello Vue3
});// 在组件中使用
export default {setup() {return { state };}
};在模板中可以直接使用{{state.count}}和{{state.message}}来显示数据并且当这些数据发生变化时视图会自动更新。 响应式数组操作 对于数组的操作Vue3也能正确追踪变化。 const list reactive([1, 2, 3]);function addItem() {list.push(list.length 1);
}二、组合式APIComposition API - setup函数
计算属性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 };}
};生命周期钩子Lifecycle Hooks 在setup函数中使用生命周期钩子。 import { onMounted } from vue;export default {setup() {onMounted(() {console.log(Component is mounted);});}
};三、组件通信
父子组件通信 - Props和Emit 父组件传递数据给子组件Props。子组件发送事件给父组件Emit。父组件 templateChildComponent :messageparentMessage childEventhandleChildEvent /
/templatescript
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子组件 templatebutton clicksendToParentSend to Parent/button
/templatescript
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
定义路由和导航 在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;在组件中进行导航。 templatebutton clicknavigateToAboutGo to About/button
/templatescript
import { useRouter } from vue-router;export default {setup() {const router useRouter();const navigateToAbout () {router.push(/about);};return { navigateToAbout };}
};
/script五、状态管理工具 - Vuex与Pinia
在Vue3中除了组件内部的状态管理我们经常需要处理跨组件的共享状态。这时我们可以使用Vuex或Pinia这样的状态管理工具。
Vuex的使用
首先安装Vuex
npm install vuexnext --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
templatedivpCount: {{ count }}/ppDouble Count: {{ doubleCount }}/pbutton clickincrementIncrement/button/div
/templatescript
import { mapState, mapGetters, mapActions } from vuex;export default {computed: {...mapState([count]),...mapGetters([doubleCount])},methods: {...mapActions([increment])}
};
/script** 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
templatedivpCount: {{ counter.count }}/ppDouble Count: {{ counter.doubleCount }}/pbutton clickcounter.incrementIncrement/button/div
/templatescript
import { useCounterStore } from ../stores/counter;export default {setup() {const counter useCounterStore();return { counter };}
};
/script
