vue3中toRefs与toRef的使用详情

最新推荐文章于 2024-03-28 18:25:28 发布

前端-小鑫

最新推荐文章于 2024-03-28 18:25:28 发布

阅读量1.7k

点赞数

分类专栏： Vue3 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_43876728/article/details/119143822

版权

Vue3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

toRefs与toRef区别：

相同点：

将结构解析出来的值具有响应式
修改数据是会影响到原始数据，所以它是引用值
都是通过：原本是proxy({ name: 'aa' }) toRefs 转换后变成{name:proxy(value:'aa')}

不同点：

toRefs接受一个参数，即一个需要响应的obj，如果接收定义的key没有则响应会失败
toRef 接受两个参数，第一个是响应的obj，第二个需要响应的key，如果自定义的key 没有则可以默认是空，继续进行响应，如果找到相应的key则根据相应的Key相应数据

toRefs 例子如下：解决将对象或者数组等解构出来的变量失去响应：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        setup(props, context) {
            const {
                reactive,
                toRefs
            } = Vue
            let content = reactive({
                name: 'aa'
            })
            const {
                name
            } = toRefs(content)
            setTimeout(() => {
                content.name = 'bb'
            }, 2000)
            return {
                name
            }
        },
        template: '<div>{{name}}</div>'
    }).mount('#root')
</script>

</html>

toRefs如果定义的name2没有则会失去响应，控制台报错例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        setup(props, context) {
            const {
                reactive,
                toRefs
            } = Vue
            let content = reactive({
                name: 'aa'
            })
             let {
                 name2
            } = toRefs(content)
            setTimeout(() => {
                name2.value = 'bb'
            }, 2000)
            return {
                name2
            }
        },
        template: '<div>{{name2}}</div>'
    }).mount('#root')
</script>

</html>

使用toRef解决解构数据中无响应key问题如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        setup(props, context) {
            const {
                reactive,
                toRef
            } = Vue
            let content = reactive({
                name: 'aa'
            })
            let name2 = toRef(content, 'name2')
            setTimeout(() => {
                name2.value = 'bb'
            }, 2000)
            return {
                name2
            }
        },
        template: '<div>{{name2}}</div>'
    }).mount('#root')
</script>

</html>

前端-小鑫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3中toRefs与toRef的使用详情

torefs 将结构解析出来的值具有响应式 toRefs原理原本是proxy({name:'aa'})toRefs转换后变成{name:proxy(value:'aa')}例子如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt...
复制链接

扫一扫