setup+ref+reactive实现vue3响应式功能
setup 是用来写组合式 api ，内部的数据和方法需要通过 return 之后，模板才能使用。在之前 vue2 中，data 返回的数据，可以直接进行双向绑定使用，如果我们把 setup 中数据类型直接双向绑定，发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能？
一、ref
setup 内的自定义属性不具备响应式能力，所以引入了 ref ，ref 底层通过代理，把属性包装值包装成一个 proxy ，proxy 内部是一个对象，使得基础类型的数据具备响应式能力，使用之前必须引入。
示例1：ref 使用
<template>
<div>
<input type="text" v-model="mood">
{{mood}}
</div>
</template>
<script>
import { ref } from "vue"
export default{
setup(){
let mood = ref("此时心情好差呀！")
setTimeout(()=>{
mood.value = "心情要变的像人一样美"
},3000)
return{
mood
}
}
}
</script>
此时可以在 setup 模板内任意编辑 mood，可以保证实时响应。实例在修改 mood 的值加了 value ，是因为 ref 的工作原来：
let mood = ref("此时心情好差呀！")
修改成：let mood = proxy({value:"此时心情好差呀！"})
二、reactive
上述的 ref 让基础数据类型具备了响应式，但是如果我们换成引用类型的数据，就会失效。所以引入了 reactive。
reactive 通过底层包装，将引用类型数据包装到 proxy 内，使用原理如：
let me = reactive({
single:true,
want:"暖的像火炉的暖男"
})
// 运行结果为
let me = proxy : { single: true, want:"暖的像火炉的暖男" }
引用的时候，直接使用 me.want 就可以了。
示例2：reactive 使用
<template>
<div>
{{me.want}}
</div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
setup(){
let me = reactive({
single:true,
want:"暖的像火炉的暖男"
})
setTimeout(()=>{
me.want = "夏天容易化了"
},3000)
return{
me
}
}
}
</script>
通过 setup + ref + reactive 就可以完全实现 vue2 中 data 的响应式功能，所以 setup 完全可以替换掉 data。
三、toRefs 、toRef 应用
setup + ref + reactive 实现了数据响应式，不能使用 ES6 解构，会消除响应特性。所以需要 toRefs 解构，使用时，需要先引入。
它的工作原理为：
import { ref , reactive, toRefs } from "vue"
let me = reactive({
single:true,
want:"暖的像火炉的暖男"
})
//运行为
let me = proxy : { single: true, want:"暖的像火炉的暖男" }
const { single, want } = toRefs( me )
// 运行为
single : proxy({ value:true })
want : proxy({ value:"暖的像火炉的暖男" })
toRefs 把 single 和 want 解构成两个 proxy ，所以是响应式的。
示例3：toRefs 解构数据
<template>
<div>
{{want}}
<input type="text" v-model="want">
</div>
</template>
<script>
import { ref , reactive, toRefs } from "vue"
export default{
setup(){
let me = reactive({
single:true,
want:"暖的像火炉的暖男"
})
setTimeout(()=>{
me.want = "夏天容易化了"
},3000)
// 解构
const {single,want} = toRefs(me)
return{
single,
want
}
}
}
</script>
toRef作用：将对象某一个属性，作为引用返回。比较难理解，可以打印查看下结果更容易理解。
let me = reactive({
single:true,
want:"暖的像火炉的暖男"
})
let lv = toRef( me, 'love' )
console.log('love',love);
//打印结果
ObjectRefImpl {
__v_isRef: true
_key: "love"
_object: Proxy {single: true, want: "暖的像火炉的暖男"}
value: undefined
[[Prototype]]: Object
}
toRef 是组件之间进行传值值，对可选参数进行处理，运行时，先查看 me中是否存在 love ，如果存在时就继承 me 中的 love ，如果不存在时就创建一个 love ，然后解构赋值给变量 lv。
示例4：toRef 使用
<template>
<div>
{{want}}
<input type="text" v-model="want">
</div>
</template>
<script>
import { ref , reactive, toRefs, toRef } from "vue"
export default{
setup(){
let me = reactive({
single:true,
want:"暖的像火炉的暖男"
})
setTimeout(()=>{
me.want = "夏天容易化了"
},3000)
const {single,want } = toRefs(me)
const love = toRef(me,'love')
console.log('love',love);
return{
single,
want
}
}
}
</script>
四、总结
ref 让基础数据类型具备响应式，而 reactive 让引用类型的数据具备响应式。setup + ref + reactive 完全实现 vue2 中 data 响应式功能。
toRefs 解构 reactive 包装的数据，toRef 用于对可选参数。
以上所述是小编给大家介绍的通过setup+ref+reactive实现vue3响应式功能，希望对大家有所帮助。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Vue自定义部分页面显示导航栏,在设计导航栏的时候，考虑到登录之前不能浏览该网站，所以需要在登录页和注册页不能出现导航栏，登录后的页面才能出现导航栏，本文给大家解决这个问题，感兴趣的朋友跟随小编一起看看吧2022-10-10
这篇文章主要介绍了Vue 生命周期的过程，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
加入购物车，是一个登录后的用户 才能进行的操作，所以需要进行鉴权判断，判断用户token是否存在，这篇文章主要介绍了Vue加入购物车判断token添加登录提示,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要给大家介绍了关于如何利用Vue实现一个markdown编辑器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要介绍了vue3中的elementPlus全局组件中文转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了一些vue使用axios的小技巧,文中的示例代码讲解详细,对我们深入掌握vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了vue点击按钮动态创建与删除组件功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的方法代码
这篇文章主要给大家介绍了关于Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的相关资料,Pinia是Vue.js的官方状态管理库,轻量且功能强大,支持模块化和TypeScript,PiniaPluginPersistedState是一个插件,需要的朋友可以参考下2024-11-11
axios中post请求json和application/x-www-form-urlencoded详解
Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用,下面这篇文章主要给大家介绍了关于axios中post请求json和application/x-www-form-urlencoded的相关资料,需要的朋友可以参考下2022-10-10
最新评论