vue3实现写法
Vue 3 的基本实现写法
Vue 3 引入了 Composition API，提供了更灵活的代码组织方式。以下是 Vue 3 的基本实现写法示例。
选项式 API（Options API）
选项式 API 是 Vue 2 的延续，适合熟悉 Vue 2 的开发者。
<template>
<div>
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue 3!',
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>组合式 API（Composition API）
组合式 API 是 Vue 3 的新特性，更适合逻辑复用和复杂组件。
<template>
<div>
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const message = ref('Hello Vue 3!')
const count = ref(0)
const increment = () => {
count.value++
}
return {
message,
count,
increment
}
}
}
</script>使用 <script setup> 语法糖
<script setup> 是组合式 API 的语法糖，简化了代码。
<template>
<div>
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue 3!')
const count = ref(0)
const increment = () => {
count.value++
}
</script>Vue 3 的生命周期钩子
Vue 3 的生命周期钩子可以通过组合式 API 使用。
<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'
onMounted(() => {
console.log('Component mounted')
})
onUpdated(() => {
console.log('Component updated')
})
onUnmounted(() => {
console.log('Component unmounted')
})
</script>Vue 3 的响应式数据
Vue 3 使用 ref 和 reactive 来创建响应式数据。
<script setup>
import { ref, reactive } from 'vue'
const count = ref(0)
const state = reactive({
name: 'Vue 3',
version: '3.2.0'
})
</script>Vue 3 的计算属性
使用 computed 创建计算属性。
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
</script>Vue 3 的侦听器
使用 watch 和 watchEffect 创建侦听器。
<script setup>
import { ref, watch, watchEffect } from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`)
})
watchEffect(() => {
console.log(`Count is now ${count.value}`)
})
</script>Vue 3 的组件通信
Vue 3 提供了 props 和 emit 进行组件通信。
父组件：
<template>
<ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const parentMessage = ref('Hello from parent')
const handleUpdate = (newMessage) => {
parentMessage.value = newMessage
}
</script>子组件：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update</button>
</div>
</template>
<script setup>
const props = defineProps({
message: String
})
const emit = defineEmits(['update'])
const updateMessage = () => {
emit('update', 'Updated message from child')
}
</script>Vue 3 的路由
使用 Vue Router 4 进行路由管理。
安装 Vue Router：
npm install vue-router@4路由配置：
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在组件中使用路由：
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const goToAbout = () => {
router.push('/about')
}
</script>Vue 3 的状态管理
使用 Pinia 进行状态管理。
安装 Pinia：
npm install pinia创建 store：
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})在组件中使用 store：
<script setup>
import { useCounterStore } from './stores/counter'
const counter = useCounterStore()
</script>
<template>
<div>
<p>{{ counter.count }}</p>
<button @click="counter.increment">Increment</button>
</div>
</template>以上是 Vue 3 的基本实现写法，涵盖了选项式 API、组合式 API、生命周期、响应式数据、计算属性、侦听器、组件通信、路由和状态管理等内容。
