uni-app 引入外部js文件数据 重新赋值后，改变data数据之后，原始的数据也会跟着变

uni-app 引入外部js文件数据 重新赋值后，改变data数据之后，原始的数据也会跟着变

开发环境 版本号 项目创建方式
Windows 2017.8 HBuilderX

产品分类：uniapp/H5

浏览器平台： Chrome

浏览器版本： 版本 96.0.4664.110（正式版本） （64 位）

示例代码：

```js const a = { list: [ {a:'1'}, {b:'2'}, ], }; export default { a, }; ``` 
import list from './test'  
    export default {  
        data() {  
            return {  
                a:[],  
            }  
        },  
        onLoad() {  
            console.log(list)  
            this.a = list.a  
        },  
        methods: {  
            tab(){  
                this.a.list.push({c:'3'})  
                console.log(this.a.list) //打印数组个数为3  
                console.log(list.a.list) //打印数组个数为3 原始为2   
            },  
        }  
    }

操作步骤：

```js const a = { list: [ {a:'1'}, {b:'2'}, ], }; export default { a, }; ``` 
import list from './test'  
    export default {  
        data() {  
            return {  
                a:[],  
            }  
        },  
        onLoad() {  
            console.log(list)  
            this.a = list.a  
        },  
        methods: {  
            tab(){  
                this.a.list.push({c:'3'})  
                console.log(this.a.list) //打印数组个数为3  
                console.log(list.a.list) //打印数组个数为3 原始为2  预期为2  
            },  
        }  
    }

更多关于uni-app 引入外部js文件数据 重新赋值后，改变data数据之后，原始的数据也会跟着变的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

建议

更多关于uni-app 引入外部js文件数据 重新赋值后，改变data数据之后，原始的数据也会跟着变的实战教程也可以访问 https://www.itying.com/category-93-b0.html


替你百度

这是JavaScript对象引用传递的典型问题，不是uni-app特有的。

在你的代码中：

this.a = list.a

这里只是将list.a的引用赋值给了this.a，两者指向同一个内存地址的对象。

当你执行this.a.list.push({c:'3'})时，实际上是在修改同一个数组对象，所以list.a.list也会同步变化。

解决方案：

  1. 深拷贝赋值（推荐）：
import list from './test'
export default {
    data() {
        return {
            a: [],
        }
    },
    onLoad() {
        // 使用JSON方法深拷贝
        this.a = JSON.parse(JSON.stringify(list.a))
        
        // 或者使用扩展运算符（浅拷贝，对嵌套对象无效）
        // this.a = {...list.a}
    },
    methods: {
        tab() {
            this.a.list.push({c:'3'})
            console.log(this.a.list) // 3
            console.log(list.a.list) // 2，保持不变
        },
    }
}
  1. 在data中直接初始化：
export default {
    data() {
        return {
            a: {
                list: [
                    {a:'1'},
                    {b:'2'},
                ],
            },
        }
    },
    // ...其他代码
}
  1. 使用Vue.set或this.$set（如果需要响应式更新）：
import list from './test'
export default {
    data() {
        return {
            a: {},
        }
    },
    onLoad() {
        // 创建新的响应式对象
        this.$set(this, 'a', JSON.parse(JSON.stringify(list.a)))
    },
}
回到顶部