Vue的深浅拷贝

深拷贝和浅拷贝是在JavaScript中常见的概念,Vue中也涉及到了深浅拷贝的问题。深拷贝和浅拷贝主要是针对对象和数组进行操作的,涉及到引用类型的数据。

浅拷贝:是指将原始对象的属性值复制到新对象中,如果属性值是基本类型(Number、String、Boolean、undefined、null、Symbol),那么直接复制其值;如果属性值是引用类型(Array、Object、Function),则复制其引用地址。这意味着如果原始对象的属性值是引用类型,那么新对象和原始对象的该属性值指向同一个内存地址,修改其中一个对象的该属性值会影响另一个对象的该属性值。
深拷贝:是指将原始对象的所有属性值都复制到新对象中,包括引用类型的属性值。这意味着无论原始对象的属性值是基本类型还是引用类型,新对象都会开辟新的内存地址存储该属性值,修改其中一个对象的属性值不会影响另一个对象的属性值。
简单的Vue组件代码,演示了深拷贝和浅拷贝的原理和场景:
javascript 复制代码
<template>
  <div>
    <p>Original Data: {{ originalData }}</p>
    <p>Shallow Copied Data: {{ shallowCopiedData }}</p>
    <p>Deep Copied Data: {{ deepCopiedData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalData: {
        name: 'John',
        age: 25,
        hobbies: ['reading', 'music']
      },
      shallowCopiedData: {},
      deepCopiedData: {}
    };
  },
  created() {
    // 浅拷贝
    this.shallowCopiedData = Object.assign({}, this.originalData);
    
    // 深拷贝
    this.deepCopiedData = JSON.parse(JSON.stringify(this.originalData));
    
    // 修改原始数据
    this.originalData.name = 'Tom';
    this.originalData.hobbies.push('sports');
  }
};
</script>
总结:通过这个例子,我们可以看到浅拷贝和深拷贝的区别。浅拷贝后的shallowCopiedData的hobbies属性值会受到原始数据的影响,而深拷贝后的deepCopiedData的hobbies属性值不受原始数据的影响。因此,在Vue中,当需要对数据进行操作时,通常会选择使用深拷贝来确保数据的独立性。
相关推荐
知识分享小能手2 分钟前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言20 分钟前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen44 分钟前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友1 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手2 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿2 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜052 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau3 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123453 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js