1.在Vue3中，可以使用<script setup>标签来简化组件的编写。在这个标签中，我们可以将数据、方法和其他属性直接放在setup()函数内部，而不需要使用data、methods等选项。这样可以让代码更加简洁和易于阅读。

<template><div>{{ count }}</div>
</template><script setup>
import { ref } from 'vue'const count = ref(0)
</script>

2.使用Composition API
Vue3引入了一种新的API，称为Composition API，它允许我们更好地组织和重用逻辑。Composition API是基于函数的，我们可以创建一些可复用的函数，然后在组件中使用这些函数。这使得代码更加模块化和易于维护。

import { ref, computed } from 'vue'export default {setup() {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return {count,doubleCount,increment,}},
}

3.使用v-model与@update:modelValue结合实现双向绑定
在Vue3中，我们可以使用v-model指令来实现双向绑定。但是，我们需要结合@update:modelValue事件来实现双向绑定。当输入框的值发生变化时，我们需要触发这个事件，并将新的值传递给父组件。

<!-- 子组件 -->
<template><input type="text" :value="modelValue" @input="updateModelValue" />
</template><script setup>
import { defineProps, defineEmits } from 'vue'
import { ref } from 'vue'const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])
const inputValue = ref(props.modelValue)function updateModelValue(event) {inputValue.value = event.target.valueemit('update:modelValue', event.target.value)
}
</script>

4.使用defineExpose暴露组件的方法和属性给父组件使用
在Vue3中，我们可以使用defineExpose来暴露组件的方法和属性给父组件使用。这样可以避免将所有方法和属性都添加到provide/inject系统中，使得代码更加简洁。

import { defineComponent, ref, defineExpose } from 'vue'
import { useMessage } from './useMessage' // 自定义hooksexport default defineComponent({setup() {const message = useMessage() // 调用自定义hooks获取消息提示方法const count = ref(0) // 定义一个响应式变量countconst increment = () => { // 定义一个增加count的方法count.value++message('count已更新') // 调用消息提示方法显示count已更新的信息}const reset = () => { // 定义一个重置count的方法count.value = 0message('count已重置') // 调用消息提示方法显示count已重置的信息}const doubleCount = computed(() => count.value * 2) // 计算count的两倍值的属性doubleCountconst expose = defineExpose({ // 暴露给父组件的方法和属性count,increment,reset,doubleCount,})return expose // 返回暴露给父组件的方法和属性对象},
})

5.使用watchEffect监听响应式变量的变化并执行副作用操作
在Vue3中，我们可以使用watchEffect来监听响应式变量的变化，并在变量发生变化时执行副作用操作。这样可以避免在每个渲染周期中手动检查变量是否发生变化，从而减少不必要的性能开销。

import { watchEffect } from 'vue'
import { ref } from 'vue'
import { useMessage } from './useMessage' // 自定义hooksexport default {setup() {const message = useMessage() // 调用自定义hooks获取消息提示方法const count = ref(0) // 定义一个响应式变量countlet isFirstRender = true // 用于判断是否是第一次渲染的标志位，默认为true，表示是第一次渲染，需要执行副作用操作；否则不执行副作用操作。当isFirstRender变为false时，表示已经执行过副作用操作，后续不再执行。