vue3 <script setup> 写法

vue3支持三种写法

Option Api （与vue2写法相同）
Composition API （setup()函数写法）
<script setup> （Composition API 的语法糖）

这里主要讲下<script setup>的一些写法，因为这种写法比较简洁，推荐使用这种写法

ref, reactive, toRef, toRefs 的区别

ref 可以把基本数据类型数据，转成响应式对象
ref 返回的对象，重新赋值成对象也是响应式的

ref
用于为数据添加响应式的状态，它的本质就是将基本数据或对象通过 new Proxy 创建成为一个响应式的对象，所以通过它创建的基本数据其实是个对象它的值就放在了该对象的value属性中

//可以理解为这样
const a = 1
// a = 1
const a = ref(1)
//a = {
//value:1
//}

所有通过ref创建的数据需要通过xxx.value取它的值
通过ref创建一个响应式对象其实它的内部还是通过reactive对该对象进行处理所以声明响应式对象推荐使用ref统一声明

<script setup>
import { ref } from 'vue'
const a = ref(1)
console.log(a.value) // 1
<script>

reactive
reactive主要为对象添加响应式对象，接收一个对象作为参数，可以用于为表单等数据做统一响应式处理

取值时不需要加.value
reactive 返回的对象，重新赋值丢失响应式
reactive 返回的对象不可以解构

const form = reactive({
  name:'aa',
  age:20
})

console.log(from.name) // aa

const {name,age} = form //通过解构 此时name,age会丢失响应 要想让它具有响应式 需要通过toRefs处理
const {name,age} = toRefs(form) //此时name,age具有响应

toRefs
toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。
常用于es6的解构赋值操作。
主要解决对一个响应式对象直接解构时解构后的数据将不再有响应式

const props = defineProps({
  msg:{
    type:String,
    default:''
  },
  info:{
    type:String,
    default:''
  }
})
const {msg,info} = toRefs(props) //msg,与info就具有响应式了 指针指向props下面对应的属性值
msg.value
info.value

toRef
toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。
接收两个参数：源响应式对象和属性名，返回一个ref数据。
例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

const props = defineProps({
  msg:{
    type:String,
    default:'aa'
  },
  info:{
    type:String,
    default:''
  }
})
const msg = toRef(props,'msg') 
msg.value //aa

总结

通过带有ref相关的方法处理后的数据都需要通过.value获取
推荐使用 ref 与 toRefs 方式处理数据

Props使用

<template>

<h1>{{ msg }}</h1>
<h1>{{ props.msg }}</h1>

</template>

<script setup lang="ts">
import { ref,defineProps } from 'vue'

const props =  defineProps({
  msg:{
    type: String,
    default:''
  }
})

console.log(props.msg)

</script>

Emits使用

<script setup lang="ts">
import { defineEmits } from 'vue'

const emit = defineEmits(['add'])

const add = () => {
  emit('add')
}

</script>

defineProps,defineEmits,defineExpose,withDefaults 为全局的可以不import 直接使用

eslint配置 .eslintrc.js 中配置则不会对此进行引入校验

module.exports = {
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}

script-setup用法
该连接为github仓库连接可能网络问题打不开

script-setup用法一个中文博客

store使用

<script lang="ts" setup>
  import { useStore } from 'vuex'
  const store = useStore()
  console.log(store.state.xxx)
</script>

router使用

<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  const router= useRouter ()
  console.log(router.currentRoute.value)
</script>

computed使用

<script lang="ts" setup>
  import { computed } from 'vue'
  const name= computed (() => { 
    return 'xxx'
  })
</script>