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仓库连接 可能网络问题打不开
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>
