vue3 中 ref 和reactive 的区别

2021-10-02 13:58:29 阅读：152 来源： 互联网

标签：const 定义 data reactive state vue3 ref

reactive

<template>
	<div @click="handleFun">{{state.data}}</div>
</template>


<script setup>
import {reactive} from 'vue';
const state = reactive({
	data : 1
})

const handleFun = ()=>{
	state.data = 2
}
</script>

ref

<template>
	<div @click="handleFun">{{state.data}}</div>
</template>


<script setup>
import {ref} from 'vue';
const state = ref({
	data : 1
})

const handleFun = ()=>{
	state.data.value = 2
}
</script>

Distinction

使用上的区别

ref：修改值的时候必须加上.value。
reactive：不能改变对象本身，但可以改变内部count的值。

如何选择

reactive和ref都是用来定义响应式数据的
reactive更推荐去定义复杂的数据类型
ref更推荐定义基本类型
ref和reactive本质我们可以简单的理解为ref是对reactive的二次包装
使用ref定义基本数据类型，ref也可以定义数组和对象。

实际上都能用，而且ref也可以去定义简单的对象和数组，也是具有响应式的，不过官方文档中有提到如果将对象分配为 ref 值，则可以通过 reactive 方法使该对象具有高度的响应式。

标签：const,定义,data,reactive,state,vue3,ref
来源： https://blog.csdn.net/weixin_45774972/article/details/120585227

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 中 ref 和reactive 的区别

reactive

ref

Distinction