我们都知道在vue2中是通过Object.defineProperty来实现数据的双向绑定，但是无法监听属性的添加和删除、数组索引和长度的变更等，只能通过方式set来实现。在vue3中使用了Proxy的方式来实现，解除了以上限制，同时还支持 Map、Set、WeakMap 和 WeakSet！

这里不先讲proxy的实现方式，下面主要介绍vue3在setup中对简单数据和对象的双向绑定的实现。

vue3利用ref简单数据类型的双向绑定

在 Vue 3.0 中，我们可以通过一个新的ref函数使任何响应式变量在任何地方起作用，如下所示：

<script setup>
import {ref} from 'vue'
import msg from '@/components/msg.vue'
let count = ref(0);//定义
const add=()=>{
	++count.value;
}
</script>
<template>
  <div class="home">
	<div @click="add">+1</div>
	<br/>
	<div class="count">{{count}}</div>
  </div>
</template>

可以看到，ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值。

Vue3.x ref的理解

1、ref和reactive一样，也是用来实现响应式数据的方法（下面讲解reactive）。
2、vue3提供了ref方法，可实现对简单值的监听。
3、ref底层的本质其实还是reactive ，系统会自动根据我们给的ref传入的值将它转换成 ref(xx) -> reactive({value:xx})。
4、ref注意点：在vue中使用ref的值不用通过value获取；在js中使用ref的值必须通过value获取。

vue3通过reactive返回对象的响应式副本

响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。

reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组。

例如：

<script setup>
import { reactive } from 'vue';
const state = reactive({ showBox: false });
const changeShowBox = () => {
   state.showBox = !state.showBox;
};
</script>
<template>
    <view class="index">
        <view @click="changeShowBox">{{ state.showBox ? '隐藏' : '显示' }}</view>
        <view v-if="state.showBox">内容......</view>
    </view>
</template>

注意点：在使用组合式api中你会发现，如果重新赋值是无法触发渲染的，这是由于响应式的是它的属性，而不是它自身，重赋值它自身跟重赋值它的属性是两码事。所以，想在组合式API中让数据具备响应式，必须用ref，因为ref又对Proxy包装了一层，修改ref其实是修改它的value，它的value一定是响应式的。

下例中采用了Ref语法糖。页面会显示 fly63前端  的信息：

<template>
    <ul>
      <li v-for="item in jsonData" :key="item.name">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
</template>

<script setup>
import { onMounted, ref } from "vue";
ref: jsonData = [
  {name: "fly63",age: 63,},
];
onMounted(() => {
  jsonData = [
    {name: "fly63前端",age: 100,
    },
  ];
});
</script>

ref与reactive的区别

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/10689