Object.assign对象属性监听问题

最新推荐文章于 2022-09-15 15:16:06 发布

不玩了把钱还我

最新推荐文章于 2022-09-15 15:16:06 发布

阅读量339

点赞数

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

本文链接：https://blog.csdn.net/judicator0301/article/details/120265307

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文探讨了如何使用Vue.js中的Object.assign和JSON.parse(JSON.stringify)进行对象复制，以及它们在监听属性变化上的区别。通过实例展示了在修改对象时，不同方法导致的不同效果。

摘要由CSDN通过智能技术生成

<template>
  <div>
      <span>{{obj.name}}</span>
      <span>{{obj.innerObj.name}}</span>
      <el-button @click="handleAdd">添加</el-button>
      <el-button @click="handleModify">修改</el-button>
  </div>
</template>

<script>
const obj = {
  name: '张三',
  innerObj: {
    name: '李四'
  }
}
export default {
  name: "SupplierInfo",
  data(){
    return{
      obj: {}
    }
  },
  created() {
    this.handleAdd()
  },
  methods:{
    handleAdd(){
     //this.obj =  Object.assign({},obj)
      this.obj = JSON.parse(JSON.stringify(obj))
    },
    handleModify(){
      obj.name = '张四'
      obj.innerObj.name = '王五'
    }
  }
}
</script>

<style scoped>

</style>