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>
相关推荐
Larry_Yanan31 分钟前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿1 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊1 小时前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪2 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
吃饺子不吃馅2 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防3 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump3 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅3 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士3 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing3 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript