亲宝软件园·资讯

展开

Vue3 ref和reactive使用

北海的大鱼 人气:0

前言

今天给大家讲一下在vue3中ref和reactive的使用方法,以及他们的使用区别在哪里,下面通过一个简单的计数器的例子来给大家进行说明

ref—计数器案例

ref 主要用于基本类型的响应,看如下代码:

import { ref } from 'vue' // 导入ref
interface DataProps {
  count: number;
  double: number;
  increase: () => void
}
export default {
  name: 'App',
  setup() {
    const count = ref(0)
    const double = computed(() => {
      return count.value*2
    })
    const increase = () => {
      count.value++
    }
    
    return {
      count,
      double,
      increase
    }
  }
}

在setup方法通过ref实现响应式对象,最后要在return中进行返回。

我们发现几个变量都分散在各处,那么有没有什么办法可以将他们包裹在对象里呢?那就来看看下面的reactive

reactive—计数器案例

reactive:主要用于引用类型的响应。里面属性拿出来单独使用,可能会丧失响应性

代码如下(示例):

import { reactive, toRefs } from 'vue'
interface DataProps {
  count: number;
  double: number;
  increase: () => void
}
export default {
  name: 'App',
  setup() {
    const data: DataProps = reactive({
      count: 0,
      increase: () => { data.count++ },
      double: computed(() => data.count * 2)
    })
    const refData = toRefs(data)
    refData.double
    return {
      ...refData
    }
  }
}

定义一个data对象,在里面定义参数

在return中我们需要让变量保持响应式,那么就需要使用toRefs,就可以将普通的类型变为ref响应式类型

PS:在return里面使用…refData(前面加三点),那么在使用的时候就可以直接使用变量名,例如:< h1> {{count}} < /h1>

区别

通过上面的例子,大家应该对ref和reactive有了一些了解,下面通过标准的 js 来进行类比,帮助大家更好的理解区别:

类似使用ref

先定义x,y为0,当使用函数时,再更新x和y的值

let x = 0
let y = 0

function updataNumber() {
    x = 2
    y = 3 
}

类似使用 reactive

在pos中有两个key都为0,在函数中更新两个值pos.x = 2.

x,y必须和对象在一起才能引用,如果像第三种const { x } = pos,先取出来,再进行更新,x还是旧的值,并且会丧失响应式

const pos = {
    x: 0,
    y: 0,
}

function updata    Object() {
    pos.x = 2
    pos.y = 3 
}

const { x } = pos
pos.x = 3

附:ref和reative的使用心得

一般来说,vue定义响应式变量有两种写法:

1)写法1:reative声明所有变量,最后return的时候一起toRefs

一种是把reative当做vue2的data,所有变量用reative一次性生成,最后一起toRefs(这个注意不要漏)。优点是赋值不用写.value

 <template>
  <h2>name: {{state.name}}</h2>
  <h2>age: {{state.age}}</h2>
  <h2>wife: {{state.wife}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>
 
<script>
/* 
reactive: 
    作用: 定义多个数据的响应式
    const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
    响应式转换是“深层的”:会影响对象内部所有嵌套的属性
    内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
*/
import {
  reactive,toRefs
} from 'vue'
export default {
  setup () {
    /* 
    定义响应式数据对象
    */
    const state = reactive({
      name: 'tom',
      age: 25,
      wife: {
        name: 'marry',
        age: 22
      },
    })
    console.log(state, state.wife)
 
    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }
 
    return {
      ...toRefs(state)
    }
  }
}
</script>

2)写法2:从头到尾都用ref声明变量,赋值的时候要注意加.value

第二种,从头到尾都用ref,除了赋值时要.value很麻烦,其他倒没什么。

<template>
  <h2>{{count}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>
 
<script>
import {
  ref
} from 'vue'
export default {
 
  setup () {
 
    // 定义响应式数据 ref对象
    const count = ref(1)
    console.log(count)
 
    // 更新响应式数据的函数
    function update () {
      // alert('update')
      count.value = count.value + 1
    }
 
    return {
      count,
      update
    }
  }
}
</script>

总结

通过例子和js原生例子类比给大家讲了ref和reactive的使用及区别。在实际项目中,大家还是需要根据自己平时的编程习惯来选择对应的方法。

加载全部内容

相关教程
猜你喜欢
用户评论