美文网首页
Vue3中ref与reactive的赋值

Vue3中ref与reactive的赋值

作者: 蓝蓝红同学 | 来源:发表于2022-11-28 11:12 被阅读0次

vue3新增的ref与reactive可以为数据提供响应式,二者使用时都需提前引入

ref

ref用于定义基础数据类型
ref定义后,需用.value来对数据进行操作

import { ref } from 'vue'
let msg1 = ref('')
let msg2 = ref('初始值')  // 设定初始值
let msg3 = ref<string>('初始值') // ts指定类型
console.log(msg.value) // '初始值'  获取msg的值需要使用.value

reactive

reactive用于定义复杂数据类型

import { reactive } from 'vue'
let obj1 = reactive({})
let obj2 = reactive({name:'初始值'})  // 设定初始值
let obj3 = reactive<object>({}) // ts指定类型
console.log(obj3) // {name:'初始值'} 打印一个proxy

关于reactive失去响应式的解决方案

  1. reactive内部定义属性,将响应式对象作为属性值
import { reactive } from 'vue'
let data = reactive({ obj: {},arr:[]})
data.obj = {name:123}
data.arr = [1,2]
  1. 使用ref来定义复杂数据类型
    ref也可用于定义复杂数据类型,其本质上内部也调用了reactive
import { ref } from 'vue'
let obj = ref({})
let arr = ref([])
obj.value = {name:123}
arr.value = [1,2]

相关文章

网友评论

      本文标题:Vue3中ref与reactive的赋值

      本文链接:https://www.haomeiwen.com/subject/lerkfdtx.html