vue3.0语法糖
1.什么是setup语法糖
起初 Vue3.0 暴露变量必须 return 出来,template中才能使用;
现在只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得。
<template>
<my-component :num="num" @click="addNum" />
</template>
<script setup>
import {
ref } from 'vue';
import MyComponent from './MyComponent .vue';
// 像在平常的setup中一样的写,但是不需要返回任何变量
const num= ref(0) //在此处定义的 num 可以直接使用
const addNum= () => {
//函数也可以直接引用,不用在return中返回
num.value++
}
</script>
//必须使用驼峰命名
2.使用setup组件自动注册
在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。示例:
<template>
<zi-hello></zi-hello>
</template>
<script setup>
import ziHello from './ziHello'
</script>
3.使用setup后新增API
因为没有了setup函数,那么props,emit怎么获取呢
setup script语法糖提供了新的API来供我们使用
3.1 defineProps
用来接收父组件传来的 props。示例:
父组件代码
<template>
<div class="die">
<h3>我是父组件</h3>
<zi-hello :name="name"></zi-hello>
</div>
</template>
<script setup>
import ziHello from './ziHello'
import {
ref} from 'vue'
let name = ref('赵小磊========')
</script>
子组件代码
<template>
<div>
我是子组件{
{
name}} // 赵小磊========
</div>
</template>
<script setup>
import {
defineProps} from 'vue'
defineProps({
name:{
type:String,
default:'我是默认值'
}
})
</script>
3.2 defineEmits
子组件向父组件事件传递。示例:
子组件
<template>
<div>
我是子组件{
{
name}}
<button @click="ziupdata">按钮</button>
</div>
</template>
<script setup>
import {
defineEmits} from 'vue'
//自定义函数,父组件可以触发
const em=defineEmits(['updata'])
const ziupdata=()=>{
em("updata",'我是子组件的值')
}
</script>
父组件
<template>
<div class="die">
<h3>我是父组件</h3>
<zi-hello @updata="updata"></zi-hello>
</div>
</template>
<script setup>
import ziHello from './ziHello'
const updata = (data) => {
console.log(data); //我是子组件的值
}
</script>
3.3 defineExpose
组件暴露出自己的属性,在父组件中可以拿到。示例:
子组件
<template>
<div>
我是子组件
</div>
</template>
<script setup>
import {
defineExpose,reactive,ref} from 'vue'
let ziage=ref(18)
let ziname=reactive({
name:'赵小磊'
})
//暴露出去的变量
defineExpose({
ziage,
ziname
})
</script>
父组件
<template>
<div class="die">
<h3 @click="isclick">我是父组件</h3>
<zi-hello ref="zihello"></zi-hello>
</div>
</template>
<script setup>
import ziHello from './ziHello'
import {
ref} from 'vue'
const zihello = ref()
const isclick = () => {
console.log('接收ref暴漏出来的值',zihello.value.ziage)
console.log('接收reactive暴漏出来的值',zihello.value.ziname.name)
}
</script>
父组件拿到的结果
原文链接:https://juejin.im/post/7036389587991658533
ref、reactive、toRef、toRefs的区别
vue3.0
里给数据添加响应式有很多api
可用,很容易弄混,下面是区分。
一、reactive
reactive
用于为对象
添加响应式状态
。
接收一个js对象作为参数,返回一个具有响应式状态的副本。
1、获取数据值的时候直接获取,不需要加.value
2、参数只能传入对象类型
import {
reactive } from 'vue'
// 响应式状态
const state = reactive({
count: 0
})
// 打印count的值
console.log(state.count)
二、ref
ref
用于为数据
添加响应式状态
。
由于reactive
只能传入对象类型
的参数,而对于基本数据类型
要添加响应式状态
就只能用ref
了,同样返回一个具有响应式状态的副本。
- 获取数据值的时候需要加.value。(对于基本数据类型,ref是自己的实现方式且性能优于reactive,而对于对象类型,ref可以理解为是通过reactive包装实现的)
- 参数可以传递任意数据类型,传递对象类型时也能保持深度响应式,所以适用性更广。
- vue 3.0 setup里定义数据时推荐优先使用ref,方便逻辑拆分和业务解耦。
import {
ref } from 'vue'
// 为基本数据类型添加响应式状态
const name = ref('Neo')
// 为复杂数据类型添加响应式状态
const state = ref({
count: 0
})
// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)
三、toRef
toRef 用于为源响应式对象上的属性新建一个ref,从而保持对其源对象属性的响应式连接。
接收两个参数:源响应式对象和属性名,返回一个ref数据。
例如使用父组件传递的props数据时,要引用props的某个属性且要保持响应式连接时就很有用。
1、获取数据值的时候需要加.value
2、toRef后的ref数据如果是复杂类型数据时,不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据
import {
defineComponent, toRef } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 创建变量myTitle
const myTitle = toRef(props, 'title')
console.log(myTitle.value)
}
})
四、toRefs
toRefs 用于将响应式对象转换为结果对象,其中结果对象的每个属性都是指向原始对象相应属性的ref。
常用于es6的解构赋值操作,因为在对一个响应式对象直接解构时解构后的数据将不再有响应式,而使用toRefs可以方便解决这一问题。
1、获取数据值的时候需要加.value
2、toRefs后的ref数据如果是复杂类型数据时,不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据
3、作用其实和 toRef 类似,只不过 toRef 是对一个个属性手动赋值,而 toRefs 是自动解构赋值。
import {
defineComponent, toRefs } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 使用了解构赋值语法创建了变量myTitle
const {
myTitle } = toRefs(props)
console.log(myTitle.value)
}
})
五、结语
尽量不要混着用,reactive 和 ref 选一种,toRef 和 toRefs 选一种,不然代码会很乱。
推荐 ref 和 toRefs 一把梭。
原文:https://blog.csdn.net/u010059669/article/details/112287552