vue3.0语法糖及ref、reactive、toRef、toRefs的区别

vue3.0语法糖

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。

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) {// 创建变量myTitleconst 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) {// 使用了解构赋值语法创建了变量myTitleconst { myTitle } = toRefs(props)console.log(myTitle.value)}
})

五、结语

尽量不要混着用，reactive 和 ref 选一种，toRef 和 toRefs 选一种，不然代码会很乱。