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

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

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了,同样返回一个具有响应式状态的副本。

  1. 获取数据值的时候需要加.value。(对于基本数据类型,ref是自己的实现方式且性能优于reactive,而对于对象类型,ref可以理解为是通过reactive包装实现的)
  2. 参数可以传递任意数据类型,传递对象类型时也能保持深度响应式,所以适用性更广。
  3. 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

目录
相关文章
|
24天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
104 60
|
3月前
|
JavaScript
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
190 65
|
1月前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
2月前
|
API
vue3知识点:reactive对比ref
vue3知识点:reactive对比ref
32 3
|
2月前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
38 2
|
2月前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
34 1
|
2月前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
114 6
|
2月前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
31 2
|
3月前
|
JavaScript
Vue3基础(二)___reactive
本文介绍了Vue 3中使用`reactive`函数创建响应式对象的方法,并通过示例代码展示了如何在组件的模板中使用这些响应式数据以及如何通过方法修改它们。文章还比较了`ref`和`reactive`两种创建响应式数据的方式,说明了`ref`底层实际上是`reactive`,并且`ref(0)`相当于`reactive({value:0})`。
27 1
Vue3基础(二)___reactive
|
3月前
|
JSON JavaScript API
Vue3基础(一)___ref
本文介绍了Vue 3中的`ref`函数的使用方法,解释了在Vue 3的组合式API中如何通过`ref`创建响应式数据,并在模板中使用这些数据。文章通过示例代码展示了如何声明响应式数据、如何在方法中修改这些数据,以及如何将响应式数据和方法返回以在模板中使用。
32 1
Vue3基础(一)___ref