【vue3学习系列】组合式api中,替代setup()函数的<script setup>特性写法

文章目录

  • 前言
  • 响应式数据
    • ref
    • computed
    • watch
  • 数据传递
    • props
    • vuex
    • v-model
    • emit
  • 方法定义
  • 组件导入
  • 获取dom
  • 路由相关
  • nextTick

前言

在使用composition api的时候,setup()函数的写法写多了会感觉有些繁琐,比如每次都需要return出去,不同类型变量要分ref和reactive调用等。这里就记录一下尤大大在vue3正式版发布不到两个月后推出的script setup特性。

一些细节点这里没有记录,推荐看官方文档:响应式基础


响应式数据

ref

网上说:从3.2之后,ref的性能提升很大,且以后基本数据类型或者是复杂数据类型都用ref去做处理。

我去看了源码,复杂数据类型还是借助了reactive去做响应式处理,不过都用ref确实方便一些。

<script setup>
import { ref } from 'vue'
// 定义
const obj = ref({
	name: 'nick'
})
const str = ref('a')
// 然后就可以在模板或者js中使用了,但是在js中使用的时候要xxx.value去取值
<script>

<template>
  <div>
    {{ str }}
  </div>
</template>
  • 对于无需响应式处理的变量,也就是页面不需要更新的,就直接声明,在模板中直接使用就行。
  • 为什么

你可能感兴趣的:(#,vue3学习系列,vue.js,javascript,前端)