Vue3【Set Up】语法糖 + TS快速上手

十八岁讨厌编程2023-12-03 18:40

文章目录

script setup

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

  • 更少的样板内容，更简洁的代码。
  • 能够使用纯 TypeScript 声明 props 和自定义事件。
  • 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
  • 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

基本语法

要启用该语法，需要在<script> 代码块上添加 setup attribute：

javascript 复制代码 
<script setup>
console.log('hello script setup')
</script>

里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script>只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

顶层的绑定会被暴露给模板

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用：

javascript 复制代码 
<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>

import 导入的内容也会以同样的方式暴露。这意味着我们可以在模板表达式中直接使用导入的 helper 函数，而不需要通过 methods 选项来暴露它：

javascript 复制代码 
<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>

响应式

比较常用的ref和reactive在这个语法糖中用法不变：

  • ref定义一个基本类型的响应数据
    • 操作数据： xxx.value
    • 读取数据: 不需要.value，直接：<div>{``{xxx}}</div>
  • reactive定义一个复杂类型的响应数据
    • 操作数据与读取数据：均不需要.value

这里我们还可以使用ts中的泛型来进行约束：

javascript 复制代码 
let person = reactive<Person>({
   list:[]
})


interface Ref<T> {
  value: T
}

还有toRef、toRefs等函数用法没有什么大变化

监听与计算

computed与watch的使用方法在该语法糖中也没有什么变化，但是我们需要弄清楚一个问题：在vue3中watch、computed、watchEffect使用场景有什么不同？

在vue3中，watch、computed、watchEffect都是用来监听响应式数据的变化，并执行相应的回调函数。但是它们的使用场景和区别有以下几点：

  • computed是用来计算一个派生值，它接受一个getter函数，并返回一个只读的ref对象。computed的回调函数只有在依赖的响应式数据变化时才会重新计算，否则会缓存上一次的结果。computed适合用在需要根据一些数据计算出另一个数据的场景，例如根据姓名拼接全名，或者根据购物车的商品计算总价。

  • watch是用来观察一个或多个响应式数据的变化，并执行相应的回调函数。watch接受一个响应式数据源（可以是ref、reactive、getter函数或者数组）和一个回调函数，返回一个用于停止观察的函数。watch的回调函数会在响应式数据源变化时触发，同时会传入新值和旧值作为参数。watch可以指定一些选项，例如immediate（是否立即执行回调函数）、deep（是否深度观察对象的嵌套属性）等。watch适合用在需要根据数据的变化执行一些副作用的场景，例如发送请求、操作DOM、改变其他状态等。

  • watchEffect是用来自动收集响应式数据的依赖，并执行相应的回调函数。watchEffect接受一个回调函数，返回一个用于停止观察的函数。watchEffect的回调函数会在首次执行时收集依赖，并在任何依赖变化时重新执行。watchEffect不会传入新值和旧值作为参数，也不能指定immediate或deep选项。watchEffect适合用在不需要知道具体哪个数据变化，只需要在数据变化时执行一些逻辑的场景，例如根据数据的变化更新标题、打印日志、触发自定义事件等。

使用组件

<script setup> 范围里的值也能被直接作为自定义组件的标签名使用，也就是说我们import组件之后不需要注册，可以直接使用：

javascript 复制代码 
<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

这里 MyComponent 应当被理解为像是在引用一个变量。这就有点类似于JSX了。

父子组件传参（变化较大）

父 -> 子 defineProps()

父组件直接使用v-bind在子组件的标签中传递数据：

javascript 复制代码 
<Menu :data="data"  title="我是标题"></Menu>
javascript 复制代码 
<template>
    <div class="menu">
        菜单区域 {{ title }}
        <div>{{ data }}</div>
    </div>
</template>
 
<script setup lang="ts">
defineProps<{
    title:string,
    data:number[]
}>()
</script>

设置默认值：

javascript 复制代码 
type Props = {
    title?: string,
    data?: number[]
}
withDefaults(defineProps<Props>(), {
    title: "张三",
    data: () => [1, 2, 3]
})

为什么这里的data的值，要写成函数的返回值的形式？

这里的data要通过函数的形式返回的原因是为了避免多个组件实例共享同一个数组对象，导致数据混乱和污染。

如果我们不使用函数的形式返回data的默认值，而是直接写成data: [1, 2, 3]，那么所有使用这个组件的地方都会使用同一个数组对象，如果其中一个组件实例修改了数组的内容，那么其他的组件实例也会受到影响，这会导致数据不一致和难以预测的行为。

因此，为了保证数据的独立性和安全性，我们需要使用函数的形式返回data的默认值，这样每个组件实例都会得到一个新的数组对象，而不会相互干扰。

子 -> 父 defineEmits()

具体过程：

  • 在子组件中，使用defineEmits函数来定义一个分发器（emitter），它接受一个字符串数组或者一个对象作为参数，用来指定要分发的事件名称和类型。
  • 在子组件中，使用emit方法来触发指定的事件，并传递相应的数据。emit方法的第一个参数是事件名称，后面的参数是要传递的数据。
  • 在父组件中，使用@或者v-on指令来监听子组件发射的事件，并定义一个回调函数来处理接收到的数据。回调函数的参数是子组件传递的数据。

父组件：

javascript 复制代码 
<template>
    <div class="layout">
        <Menu @on-click="getList"></Menu>
    </div>
</template>
 
<script setup lang="ts">
import { reactive } from 'vue';
 
const getList = (list: number[]) => {
    console.log(list,'父组件接受子组件');
}
</script>

我们在子组件中去触发这个事件：

javascript 复制代码 
<template>
    <div class="menu">
        <button @click="clickTap">派发给父组件</button>
    </div>
</template>
 
<script setup lang="ts">
import { reactive } from 'vue'
 
const emit = defineEmits(['on-click'])
 
//如果用了ts可以这样两种方式
// const emit = defineEmits<{
//     (e: "on-click", name: string): void
// }>()
const clickTap = () => {
    emit('on-click', '123')
}
 
</script>

在vue3.3中对这个语法进行了加强：

javascript 复制代码 
const emit = defineEmits<{
    'on-click':[name:string]
}>()

子组件暴露给父组件内部属性 defineExpose()

首先在子组件中定义要暴露的属性：

javascript 复制代码 
const list = reactive<number[]>([4, 5, 6])
 
defineExpose({
    list
})

然后我们在父组件中通过ref来读：

javascript 复制代码 
 <Menu ref="refMenu"></Menu>
//这样获取是有代码提示的
<script setup lang="ts">
import MenuCom from '../xxxxxxx.vue'
//注意这儿的typeof里面放的是组件名字(MenuCom)不是ref的名字 ref的名字对应开头的变量名(refMenu)
const refMenu = ref<InstanceType<typeof MenuCom>>()
console.log(refMenu.value.list                                      )
</script>

defineOptions() 【很少用】

vue3中的defineOptions()是一个用于在

实际使用中一般来定义name

使用defineOptions()的一个例子是：

javascript 复制代码 
<script setup lang="ts">
import { defineOptions } from 'vue'

// 使用defineOptions()来定义Options API的选项
defineOptions({
  name: 'MyComponent', // 组件的名称
  data() { // 组件的数据
    return {
      count: 0
    }
  },
  methods: { // 组件的方法
    increment() {
      this.count++
    }
  },
  computed: { // 组件的计算属性
    doubleCount() {
      return this.count * 2
    }
  },
  watch: { // 组件的侦听器
    count(newValue, oldValue) {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    }
  },
  mounted() { // 组件的生命周期钩子
    console.log('component mounted')
  }
})
</script>

<template>
  <div>
    <p>count: {{ count }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

这样，我们就可以在<script setup>中使用Options API的选项，而不需要使用export default的方式。

Ref属性

使用选项式 API，引用将被注册在组件的 this.$refs 对象里：

html 复制代码 
<!-- 存储为 this.$refs.p -->
<p ref="p">hello</p>

使用组合式 API，引用将存储在与名字匹配的 ref 里：

html 复制代码 
<script setup>
import { ref } from 'vue'

const p = ref()
</script>

<template>
  <p ref="p">hello</p>
</template>

注意：ref不需要使用单行绑定

如果用于普通 DOM 元素，引用将是元素本身；如果用于子组件，引用将是子组件的实例。

或者 ref 可以接收一个函数值，用于对存储引用位置的完全控制：

html 复制代码 
<ChildComponent :ref="(el) => child = el" />

关于 ref 注册时机的重要说明：因为 ref 本身是作为渲染函数的结果来创建的，必须等待组件挂载后才能对它进行访问。

this.$refs 也是非响应式的，因此你不应该尝试在模板中使用它来进行数据绑定。

相关推荐
cs_dn_Jie28 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站（JAVA毕业设计）
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo3 小时前
react jsx基本语法，脚手架，父子传参，refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v3 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家4 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙4 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器，日期选择器
前端·javascript·vue.js
小远yyds5 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06【经验分享】Ubuntu22.04安装微信(linux官方版)07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）09RAG 实践- Ollama+RagFlow 部署本地知识库10你还在傻傻的打开页面输用户名和密码？来我教你实现自动化