一文读懂Vue3中ref和reactive的使用?


一、Reactive?

  • reactive的参数呢一般是对象或者数组,能够将复杂的数据类型变为响应式数据
  • reactive的响应式是深层次的,底层本质就是将传入的数据转换为Proxy对象

使用reactive来定义数据

<template>
  <h2>{{obj}}</h2>
  <h2>{{obj.age}}</h2>
  <button @click="editAge">操作age</button>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    // reactive定义复杂数据类型
    const obj = reactive({
      name:'复杂数据',
      age:20
    });
    // 操作修改age
    const editAge = ()=>{
      obj.age ++
    }

    return {
      obj,
      editAge
    };
  },
};
</script>

<style>
</style>

二、Proxy和defineProperty

reactive方法内部是利用ES6的Proxy API来实现的,这里与Vue2中的defineProperty方法有本质的区别。

  • defineProperty只能单一地监听已有属性的修改或者变化,无法检测到对象属性的新增或删除,而Proxy可以轻松实现
  • defineProperty无法监听属性值是数组类型的变化,而Proxy可以轻松实现

二、ref

  • ref的参数一般是基本数据类型,也可以是对象类型
  • 如果参数是对象类型,其实底层的本质还是reactive,系统就会自动将ref转换为reactive
  • 我们如果去访问ref定义的值,那么就使用.value的属性去访问定义的数据
  • ref的底层原理同reactive一样,都是Proxy

ref的使用

<template>
  <p>{{ name }}</p>
  <h1>{{ num }}</h1>
  <button @click="editNum">修改num</button>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    // ref定义简单数据类型
    const name = ref("ref简单数据类型");
    const num = ref(0);
    // 修改数据(基本数据类型用.value)
    const editNum = () => {
      num.value ++;
    };
    return {
      name,
      num,
      editNum,
    };
  },
};
</script>

<style>
</style>

总结

  1. reactive参数一般接收对象或者数组,是深层次的响应式
  2. ref的参数一般接收简单数据类型为参数,本质上会转变为reactive的方法
  3. 在JS中我们如果去对数据进行操作,在ref定义的数据中,使用变量.value;访问reactive不需要
  4. 响应式的底层原理都是proxy
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值