vue3中使ref变量失去响应式-(深拷贝)

张小伟i

已于 2024-05-29 00:15:48 修改

阅读量551

点赞数 3

文章标签： javascript 前端 vue.js

于 2024-05-28 23:29:51 首次发布

本文链接：https://blog.csdn.net/zhw_1219/article/details/139280434

版权

1.使用JSON.parse(JSON.stringify(val))深拷贝
优点:简单地数据类型可以使用
缺点:不可以复制特殊类型如:new Date(),undefined,函数,正则等

const test = reactive({
  a: 123
})
const test1 = JSON.parse(JSON.stringify(test))
test.a = 456
test1.a = 789
console.log(test)//{a:456}
console.log(test1)//{a: 789}

2. 使用Lodash第三方工具库:可以复制特殊类型数据(推荐)https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue

安装

pnpm i --save lodash

引用

import {cloneDeep} from 'lodash'
const test = reactive<any>({
  a: new Date()
})

const test1 = cloneDeep(test)
console.log(test)//{a:Tue May 28 2024 23:38:41 GMT+0800 (中国标准时间)}
console.log(test1)//{a: Tue May 28 2024 23:38:41 GMT+0800 (中国标准时间)}