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>
相关推荐
大叔_爱编程6 分钟前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
洁洁!10 分钟前
数据采集助力AI大模型训练
前端·人工智能·easyui
MaCa .BaKa15 分钟前
25-智慧旅游系统(协同算法)三端
java·javascript·vue.js·spring boot·tomcat·maven·旅游
MiyueFE19 分钟前
bpmn-js 源码篇9:Moddle - 对象格式的标准化定义库
前端·javascript
excel25 分钟前
webpack 核心编译器 七 节
前端
Debug 熊猫32 分钟前
【Java基础】10章、单例模式、final关键字的使用技巧和使用细节、单例模式-懒汉式、单例模式-饿汉式【3】
java·javascript·后端·单例模式
一只月月鸟呀32 分钟前
HTML中数字和字母不换行显示
前端·html·css3
天下代码客1 小时前
【八股】介绍Promise(ES6引入)
前端·ecmascript·es6
lb29171 小时前
CSS 3D变换,transform:translateZ()
前端·css·3d
啊阿狸不会拉杆1 小时前
第二十二章:Python-NLTK库:自然语言处理
前端·python·自然语言处理