©2020-2024 ioDraw All rights reserved
<>vue 3.0 ref 和 Reactive 数据响应式，以及使用 Reactive 数据已更新但页面没有同步刷新异常
Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候，当我们对象再次赋值，我们发现数据已经修改成功，但是页⾯并没有自动渲染成最新的数据；
这时我们可以改成 ref () 或者对 reactive() 绑定的数据类型下点功夫；
<>ref()
ref() 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值
<template> <div> <button @click="changeMsg">更改数据</button> <div>{{ message
}}</div> </div> </template> <script setup lang="ts"> import {ref} from 'vue'
/** * ref() 基础用法 */ let message = ref<string | number>("测试数据") /** * 更改 ref 数据
*/ const changeMsg = () => { message.value = "更改测试数据" } </script>
<>reactive()
reactive() 主要时用来绑定一些复杂的数据类型，比如(对象、数组)
；它不可以绑定普通的数据类型，否则会报错；如果我们需要绑定普通的数据类型，建议使用上面的ref()
<template> <div> <button @click="changeObj">更改数据</button> <div> {{obj.data}}
</div> <div> {{obj.dataBoolean}} </div> <div> {{obj.dataArr}} </div> </div>
</template> <script setup lang="ts"> import {reactive} from 'vue' /** *
reactive() 基础用法 */ const obj = reactive({ data: '', dataBoolean: false,
dataArr: <number[]>[], }) /** * 更改 reactive() 数据 */ const changeObj = () => {
obj .data = '测试数据' obj .dataBoolean = true obj .dataArr = [1, 2, 3, 4, 5, 6] }
</script>