vue3 setup 实用知识点与相关项目实践问题解决

一、 vue3 <script setup> 写法

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

<script setup>就是vue3新出的一个语法糖，使用方法就是在书写script标签的时候在其后面加上一个setup修饰。， 因为这种写法比较简洁，推荐使用这种写法

1.ref, reactive, toRef, toRefs 的区别

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

1.1 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>

1.2 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具有响应

1.3 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

1.4 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

1.5 总结

• 通过带有ref相关的方法处理后的数据 都需要通过.value获取
• 推荐使用 ref 与 toRefs 方式处理数据
  说明下为什么不用reactive
  通常来讲，reactive 适用于复杂的数据类型，如数组，对象。但发觉 使用时，不如ref的方便
  1.需要通过toRefs来解构赋值，数据才具有响应性
  2.和ref获取值不一样，导致需要区分是否要.value

2.Props使用

• 注意：Props的值无法直接修改，要通过emit("update:xxx",val)进行修改

<template>

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

</template>

<script setup lang="ts">
import {
   
    ref} from 'vue'
// defineProps 不需要引入
const props =  defineProps({
   
   
  msg:{
   
   
    type: String,
    default:''
  }
})

console.log(props.msg)

</script>

3.Emits

<script setup lang="ts">
//defineEmits  无需引入
const emit = defineEmits(['add'])

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

</script>