ref,reactive toRaw
创始人
2024-05-22 13:40:44
0

ref()

在vue3.0引入了composition API , setup函数是其核心函数

在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI

例如:使用ref函数定义一个变量count

import { ref } from 'vue';

function useChangeCount() {

let count = ref(0);

function change_count() {

count.value += 1;

}

return { count, change_count }

}

export default useChangeCount;

然后在组件中引入该模块:import useChangeCount from "./composition_tiny_js/count"

并且在组件的setup中使用,并通过return的形式将外界需要用到的变量和函数暴露出去

setup() {

let { count, change_count } = useChangeCount();

return { count, change_count };

}

这样上面暴露的count变量,change_count方法就可以在外界使用了

需要注意的是:

  1. 在setup中定义的变量或方法,都必须通过return {xxx,xxx}暴露出去,外界才能使用

  1. ref函数仅能监听基本类型的变化,不能监听复杂类型的变化(比如对象、数组 [ 详见reactive() ])

reactive()

reactive创建响应式对象,将数据变成响应式数据,当数据发生变化时UI也会自动更新。

reactive的用法与ref的用法相似,不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组。

setup() {

const form = reactive({

oldPassword: '',

newPassword: '',

...

})

return {

form

}

},

ref 和 reactive 定义响应式数据的区别

  1. ref允许我们创建一个任意类型的响应式的ref对象,在使用时需要带上.value

  1. 模板中使用ref对象时,假如ref位于顶层,就不需要使用value,它会自动解包

  1. 但如果ref对象是作为一个属性声明于对象之中,在模板中进行运算时仍然要使用.value

  1. 通常使用reactive()来创建一个响应式的对象或数组,这样的对象或数组状态都是默认深层响应式的,无论嵌套多深,都能跟踪到。

  1. 但他也有局限性,就是只对 对象类型有效,对基本数据类型无效

  1. 并且假如用一个新对象替换了原来的旧对象,那么原来的旧对象会失去响应性

两者区别:

1、ref多用来定义基本数据类型(也可以定义对象,内部会自动通过reactive转为代理对象),而 reactive只能用来定义对象数组类型

2、ref操作数据需要.value,reactive操作数据不需要.value

3、ref通过Object.defineProperty()的get和set来实现响应式, reactive通过Proxy来实现响应式,并通过Reflect操作源对象内部的数据

toRaw()

reactive存值

let obj = { name: "aa", age: 18 };

let state = reactive(obj);

console.log(obl === state) false

state 和 obj的关系

state 和 obj是引用关系,state的本质是一个Proxy对象,在这个Proxy对象中引用了obj

toRaw()获取值

  • 如果想通过toRaw拿到ref类型的原始数据(创建时传入的那个数据)

  • 必须明确的告诉toRaw方法,要获取的是.value的值

  • 因为经过Vue处理之后,.value中保存的才是当初创建时传入的那个原始数据

isRef,isReactive

  • isRef: 检查一个值是否为一个 ref 对象

  • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

  • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

  • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

// isRef: 检查一个值是否为一个 ref 对象

console.log(isRef(ref({}))); // true

// isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

console.log(isReactive(reactive({}))); // true

// isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

console.log(isReadonly(readonly({}))); // true

// isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

console.log(isProxy(readonly({}))); // true

console.log(isProxy(reactive({}))); // true

相关内容

热门资讯

华大基因公司整体质押比例30.... 截止2025年7月5日,华大基因整体质押股份为1.27亿股,整体质押占总股本之比为30.26%,累计...
今生有你剧情介绍分集 今生有你剧情介绍分集 《今生有你》电视剧是由刘俊杰执导,钟汉良、李小冉领衔主演,王阳、田蕾希、范诗然...
孙颖莎赢了!中国队取得WTT美... 本文来自微信公众号“大象新闻”北京时间7月7日,2025年WTT美国大满贯正赛开启。孙颖莎3∶2战胜...
昆虫记大自然维持平衡的规则有哪... 昆虫记大自然维持平衡的规则有哪些?主要就是我们要爱护环境,然后动物和植物相互平衡,这样的话才是比较规...
赶慈善大集 品幸福滋味 激发社区活力、提升居民幸福感、带动辖区经济发展,实现商户利益和居民福利“双提升”。近年来,长春市慈善...
河南综合金融服务助“三夏”生产 转自:中国银行保险报网□王伟浩 孟姝“三夏”是粮食生产关键时节,是保障国家粮食安全的核心一环。近期,...
求尚雯婕和厉娜的全面档案 求尚雯婕和厉娜的全面档案还有包括她们两的真正博客,因为我去找的时候,觉得太难了,有太多厉娜和太多尚雯...
破解博物馆预约难|世界一流博物... 逛博物馆在当下已经成为一种生活方式,暑期家庭游、亲子游、研学游更令“博物馆热”持续升温。在国内,已出...
广西博白县英桥镇文黎村刘姓是哪... 广西博白县英桥镇文黎村刘姓是哪个堂的人?双庙街位于英桥镇以北7公里处的文黎村,博廉二级公路穿街而过。...
消暑有“凉”策 转自:三秦都市报7月2日,市民在西安鲸鱼沟竹海风景区内划船游玩。7月3日,市民在西咸新区沣东新城西安...