唯品秀前端博客
当前位置: 前端开发 > Vue3新篇章 >

Vue3 中新特性—toRaw与markRaw之间区别

作者：管理员 2022-09-10 16:57:44 分类：Vue3新篇章 阅读（2809） 0

第一次看到这两个api时候我很木讷，给我感觉并没有什么本质区别，就是让原本响应式数据变得不响应，说大白话就是数据变了视图不更新提高新能，但具体区别在哪里呢？下面来通过代码实践去感受两者区别

toRaw

ref/reactive数据类型的特点:每次修改都会被追踪, 都会更新UI界面, 但是这样其实是非常消耗性能。所以如果我们有一些操作不需要追踪, 不需要更新UI界面, 那么这个时候我们就可以通过toRaw方法拿到它的原始数据, 对原始数据进行修改，这样就不会被追踪，UI界面就不会跟着数据变, 性能也就提升了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
import {reactive, toRaw} from 'vue'
export default {
    setup() {
        const obj = {
            name: '测试',
            age:10
        }

        const state = reactive(obj)
        const raw = toRaw(state)

        console.log(obj === raw)   // true
    }
}
</script>

上述代码就证明了 toRaw 方法从 reactive 对象中获取到的是原始数据，因此我们就可以很方便的通过修改原始数据的值而不更新视图来做一

剩余50%内容付费后可查看
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(30) 打赏
标签：

上一篇：

下一篇：

相关推荐

共 0 条评论关于"Vue3 中新特性—toRaw与markRaw之间区别"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏