Vue中<script setup></script>的主要语法元素和特性

<script setup>是 Vue 3 中引入的一种新的组件内脚本语法糖,它带来了更简洁、高效的组件逻辑编写方式。

以下是 <script setup> 的主要语法元素和特性:

1.导入和使用

  • 直接在 <script setup> 中导入依赖,不需要在 componentsdirectives 等选项中声明。
  • 导入的组件和指令可以直接在模板中使用。

2.响应式数据:

  • 使用 refreactive 来创建响应式的数据。
  • ref 用于基本类型,reactive 用于对象。
  • 示例:
javascript 复制代码
import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({ message: 'Hello World' })

3.计算属性:

  • 使用 computed 来定义计算属性。
  • 示例:
javascript 复制代码
import { computed } from 'vue'

const reversedMessage = computed(() => state.message.split('').reverse().join(''))

4.侦听器:

  • 使用 watchwatchEffect 来监听数据的变化。
  • 示例:
javascript 复制代码
import { watch, watchEffect } from 'vue'

watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`)
})

watchEffect(() => {
  console.log(`current count value is: ${count.value}`)
})

5.生命周期钩子:

  • 可以直接在 <script setup> 中使用生命周期钩子,如 onMounted, onUnmounted,onBeforeUpdateonUpdatedonBeforeUnmountonUnmounted 等等。
  • 示例:
javascript 复制代码
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})

onUnmounted(() => {
  console.log('Component unmounted')
})

6.Props 解构:

  • 使用defineProps编译宏来定义组件接收的属性,它接收一个对象或者基于类型的声明。
  • 在组件使用时就能接收外部传入的对应属性值了,并且在模板中可以像使用普通变量一样使用props中的属性。
  • 使用 defineProps 接收父组件传递的 props。
  • 示例:
javascript 复制代码
<template>
  <div>{{ title }}</div>
</template>

<script setup>
// 基于对象的方式定义props
const props = defineProps({
  title: String
})
// 基于类型的方式(如果使用TypeScript)
// const props = defineProps<{ title: string }>()
</script>

7.事件处理:

  • 使用defineEmits编译宏来声明组件向外触发的自定义事件。
  • 示例:
javascript 复制代码
<template>
  <button @click="emitCustomEvent">触发事件</button>
</template>

<script setup>
const emits = defineEmits(['custom-event'])
const emitCustomEvent = () => {
  emits('custom-event', '传递的数据')
}
</script>
  1. 默认导出:

不再需要 export default,因为所有顶层绑定会自动暴露给模板。

9.解构 Props 和 Emits:

  • 直接解构 propsemit 而无需担心失去响应性。
  • 示例
javascript 复制代码
const { title, isActive } = defineProps(['title', 'isActive'])
const emit = defineEmits(['update:title'])

10.访问父组件和根实例属性(有限制)

  • <script setup>中访问父组件或根实例的属性不像传统的this.$parentthis.$root那样方便,不过可以通过getCurrentInstance函数(但官方不建议过度依赖此方式用于普通场景,主要用于一些高级的、框架层面的扩展等情况)来获取组件实例相关信息。
  • 例如:
javascript 复制代码
<script setup>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
// 可以通过instance来访问一些实例相关信息,不过要谨慎使用
</script>
相关推荐
全宝24 分钟前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪1 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴1 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉1 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
海盗强2 小时前
Vue 3 常见的通信方式
javascript·vue.js·ecmascript
大熊猫今天吃什么2 小时前
【一天一坑】空数组,使用 allMatch 默认返回true
前端·数据库
!win !3 小时前
Tailwind CSS一些你需要记住的原子类
前端·tailwindcss
前端极客探险家3 小时前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
oscar9993 小时前
JavaScript与TypeScript
开发语言·javascript·typescript