【VUE3】

Vue 3 是当下最流行的前端框架之一，其主要特点是性能更好、体积更小、更易于维护。下面是 Vue 3 的一些重要知识点和代码示例：

1. 创建 Vue 实例

import { createApp } from 'vue'const app = createApp({data() {return {message: 'Hello, Vue 3!'}}
})app.mount('#app')

    2.组件

import { defineComponent } from 'vue'export default defineComponent({props: {title: {type: String,required: true}},data() {return {message: 'Hello, Vue 3!'}},methods: {handleClick() {console.log('Button clicked')}},template: `<div><h1>{{ title }}</h1><p>{{ message }}</p><button @click="handleClick">Click me</button></div>`
})

    3.生命周期钩子函数

import { onMounted, onUpdated, onUnmounted } from 'vue'export default {setup() {onMounted(() => {console.log('Component mounted')})onUpdated(() => {console.log('Component updated')})onUnmounted(() => {console.log('Component unmounted')})}
}

      4.模板引用和插槽

<template><div><h1 ref="titleRef">{{ title }}</h1><slot></slot></div>
</template><script>
export default {props: {title: {type: String,required: true}},mounted() {// 操作模板引用console.log(this.$refs.titleRef)}
}
</script>

      5.响应式数据

import { reactive } from 'vue'export default {setup() {const state = reactive({message: 'Hello, Vue 3!'})return {state}}
}

       6.生命周期函数

import { onMounted, onUpdated, onUnmounted } from 'vue'export default {setup() {onMounted(() => {console.log('Component mounted')})onUpdated(() => {console.log('Component updated')})onUnmounted(() => {console.log('Component unmounted')})}
}

       7.组件通信

// 父组件
<template><div><child :message="message" @update-message="updateMessage" /></div>
</template><script>
import Child from './Child.vue'export default {components: {Child},data() {return {message: 'Hello, Vue 3!'}},methods: {updateMessage(newMessage) {this.message = newMessage}}
}
</script>// 子组件
<template><div><p>{{ message }}</p><button @click="handleClick">Update message</button></div>
</template><script>
import { defineEmits, defineProps } from 'vue'export default {props: defineProps({message: {type: String,required: true}}),emits: defineEmits(['update-message']),methods: {handleClick() {this.$emit('update-message', 'New message')}}
}
</script>

这些是 Vue 3 的一些重要知识点和代码示例，但不仅限于此。作为一个全面的前端框架，Vue 3 还有许多其他功能和工具，可以让您编写出更好的 Web 应用程序。