Vue组件中的data为什么必须是函数

xunfengZ

于 2020-11-16 11:33:08 发布

阅读量177

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/xunfengZ/article/details/109717723

版权

Vue组件数据污染复用函数式数据数据副本

关键词由优快云通过智能技术生成

vue 专栏收录该内容

5 篇文章

订阅专栏

本文揭示了Vue组件中使用普通对象与函数作为data的区别，强调了函数返回对象副本的重要性，并通过模拟代码演示了如何避免数据污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上结论：
组件是一个个可复用的vue实例。
若data是一个普通对象，在组件多次复用时，会共用data，造成数据污染；
若data是一个函数，每个组件实例用的是返回对象的一个独立的拷贝（数据副本），互不干扰，避免了数据污染

模拟代码如下：

//函数返回的是不同的对象，每次调用都开辟新的内存空间
function a(){
    return {
        name:'xx',
        age:22
    }
}
let comp1=a();
let comp2=a();
console.log(comp1===comp2);  //false

//函数返回的是一个对象的引用，指向一个固定的内存空间
const obj={
    name:'xx',
    age:22
}
function b(){
    return obj
}
let comp1=b()
let comp2=b()
console.log(comp1===comp2);  //true