Vue3进阶5个小知识点 附带源码

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时，表示已经执行过副作用操作，后续不再执行。