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.value emit('update:modelValue', event.target.value) } </script>
4.使用defineExpose暴露组件的方法和属性给父组件使用
在Vue3中，我们可以使用defineExpose来暴露组件的方法和属性给父组件使用。这样可以避免将所有方法和属性都添加到provide/inject系统中，使得代码更加简洁。
import { defineComponent, ref, defineExpose } from 'vue' import { useMessage } from './useMessage' // 自定义hooks export default defineComponent({ setup() { const message = useMessage() // 调用自定义hooks获取消息提示方法 const count = ref(0) // 定义一个响应式变量count const increment = () => { // 定义一个增加count的方法 count.value++ message('count已更新') // 调用消息提示方法显示count已更新的信息 } const reset = () => { // 定义一个重置count的方法 count.value = 0 message('count已重置') // 调用消息提示方法显示count已重置的信息 } const doubleCount = computed(() => count.value * 2) // 计算count的两倍值的属性doubleCount const expose = defineExpose({ // 暴露给父组件的方法和属性 count, increment, reset, doubleCount, }) return expose // 返回暴露给父组件的方法和属性对象 }, })
5.使用watchEffect监听响应式变量的变化并执行副作用操作
在Vue3中，我们可以使用watchEffect来监听响应式变量的变化，并在变量发生变化时执行副作用操作。这样可以避免在每个渲染周期中手动检查变量是否发生变化，从而减少不必要的性能开销。
import { watchEffect } from 'vue' import { ref } from 'vue' import { useMessage } from './useMessage' // 自定义hooks export default { setup() { const message = useMessage() // 调用自定义hooks获取消息提示方法 const count = ref(0) // 定义一个响应式变量count let isFirstRender = true // 用于判断是否是第一次渲染的标志位，默认为true，表示是第一次渲染，需要执行副作用操作；否则不执行副作用操作。当isFirstRender变为false时，表示已经执行过副作用操作，后续不再执行。
