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>
相关推荐
不买Huracan不改名3 分钟前
安装Codex(需要用npm)
前端·npm·node.js
Dorcas_FE11 分钟前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream19 分钟前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼39 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66640 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东41 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生42 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙42 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年1 小时前
webpack和vite优化方案都有哪些
前端·webpack·node.js