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时,表示已经执行过副作用操作,后续不再执行。
相关推荐
啃火龙果的兔子41 分钟前
解决 Node.js 托管 React 静态资源的跨域问题
前端·react.js·前端框架
ttyyttemo1 小时前
Compose生命周期---Lifecycle of composables
前端
以身入局1 小时前
FragmentManager 之 addToBackStack 作用
前端·面试
sophie旭1 小时前
《深入浅出react》总结之 10.7 scheduler 异步调度原理
前端·react.js·源码
练习前端两年半1 小时前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js
大胖猫L1 小时前
深搜与广搜在 TypeScript 类型递归中的应用
前端·算法
吃饭睡觉打豆豆嘛1 小时前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
蛋仔聊测试1 小时前
基于 Playwright(python) 的前端性能测试脚本实现
前端·python
算了吧1 小时前
基于vue3和koa2打造的一款企业级应用框架(建设中)-Elpis
前端·前端框架
用户75828121830731 小时前
什么是Koa框架?
前端