您好,登录后才能下订单哦!
本文小编为大家详细介绍“vue3中的ref与reactive如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3中的ref与reactive如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
ref
是 Vue3 中的一个函数,它可以将一个普通的变量转化为一个响应式变量。使用 ref
的时候,我们需要传入一个初始值,ref
会返回一个包含了这个初始值的对象。
使用 ref
的语法如下所示:
import { ref } from 'vue'; const count = ref(0);
在上面的代码中,我们创建了一个名为 count
的变量,它的初始值为 0。通过调用 ref
函数,我们将 count
变量转化为了一个 ref
对象。在组件中使用 count
的时候,我们需要通过 .value
来访问它的值,且ref.value =
可以修改它的值。但是当 ref
在模板中作为顶层属性被访问时,它们会被自动“解包”,所以不需要使用 .value
。:
<template> <div>{{ count }}</div> </template> ------------------ <script setup> import { ref } from 'vue'; const count = ref(0); console.log(count)//RefImpl {...} console.log(count.value)//0 //使用.value改变count count.value = 3; console.log(count.value)//3 </script>
注意:在标签中使用无需加.value
,在函数中使用必须要加.value
除此之外,ref
还可以用来监听 DOM 元素的变化:
<template> <div ref="myDiv">这是一个 DOM 元素</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myDiv = ref(null); onMounted(() => { console.log(myDiv.value.innerHTML); }); return { myDiv, }; }, }; </script>
在上面的代码中,我们创建了一个名为 myDiv
的 ref
对象,并将它赋值给了一个 div
元素。在组件的 setup
函数中,我们使用了 onMounted
钩子函数,在组件渲染完成之后,打印出了 myDiv
元素的 innerHTML
。
reactive
是 Vue3 中的另一个 API,它可以将一个普通的对象转化为一个响应式对象。与 ref
不同的是,reactive
返回的是一个响应式的对象,而不是一个包含值的对象。我们可以通过访问响应式对象的属性来获取或修改它的值。
使用 reactive 的语法如下所示:
import { reactive } from 'vue'; const state = reactive({ count: 0, });
在上面的代码中,我们创建了一个名为 state
的响应式对象,它包含了一个名为 count
的属性,初始值为 0。
在组件中使用 state
的时候,我们可以像访问普通对象的属性一样访问它的属性:
<template> <div>{{ state.count }}</div> </template>
除了访问属性之外,reactive
也可以对普通 JavaScript 对象或数组进行响应式处理,可以通过 reactive
将一个普通对象转化为响应式对象,从而实现对整个对象的响应式追踪,例如:
const obj = { a: 1, b: 2 }; const reactiveObj = reactive(obj); // 响应式追踪 reactiveObj.a = 3; console.log(obj.a); // 输出 3
reactive 还可以在嵌套对象和数组中创建响应式对象,例如:
const obj = { a: 1, b: { c: 2 }, d: [1, 2, 3] }; const reactiveObj = reactive(obj); // 响应式追踪 reactiveObj.b.c = 3; reactiveObj.d.push(4);
reactive 还支持在嵌套对象中使用 toRefs 将响应式对象的属性转换为响应式引用,方便在模板中使用。例如:
const obj = reactive({ a: 1, b: { c: 2 } }); const { b } = toRefs(obj); // 模板中使用 <template> <div>{{ b.c }}</div> </template>
总之,reactive
除了访问属性之外还能处理整个对象或数组的响应式追踪,以及支持在嵌套对象中使用 toRefs
方便在模板中使用。
ref
创建的变量可以通过.value
来获取和修改其值。例如:
import { ref } from 'vue' // 创建ref const count = ref(0) // 获取ref的值 console.log(count.value) // 输出 0 // 修改ref的值 count.value = 1 console.log(count.value) // 输出 1
reactive
创建的对象需要通过解构赋值的方式获取和修改其属性值。例如:
import { reactive } from 'vue' // 创建reactive对象 const obj = reactive({ count: 0 }) // 获取reactive对象的属性值 console.log(obj.count) // 输出 0 // 修改reactive对象的属性值 obj.count = 1 console.log(obj.count) // 输出 1
读到这里,这篇“vue3中的ref与reactive如何使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。