Vue组件为什么data必须是一个函数呢？本文案例详解
前言
我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。
function Component(){this.data = this.data}
Component.prototype.data = {name:'jack',age:22,
}复制代码
首先我们达成一个共识（没有这个共识，请补充下 js 原型链部分的知识）：
实例它们构造函数内的this内容是不一样的。Component.prototype ，这类底下的方法或者值，都是所有实例公用的。
解开疑问
基于此，我们来看看这个问题：
function Component(){}Component.prototype.data = {name:'jack',age:22,}var componentA = new Component();var componentB = new Component();componentA.data.age=55;console.log(componentA,componentB)我是08年出道的富贵论坛地图高级前端老鸟，有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家哦
此时，componentA 和 componentB data之间指向了同一个内存地址，age 都变成了 55， 导致了问题！
接下来很好解释为什么 vue 组件需要 function 了：
function Component(){this.data = this.data()
}
Component.prototype.data = function (){return {name:'jack',age:22,
}
}var componentA = new Component();var componentB = new Component();
componentA.data.age=55;console.log(componentA,componentB)复制代码
此时，componentA 和 componentB data之间相互独立, age 分别是 55 和 22 ，没有问题！
总结
自己突然对这个问题懵逼，不过事后想了想还是自己基础知识忘得太快。以前学习 js 的时候，最基础的：构造函数内和原型之间的区别都模糊了。想不到 vue 这个小问题让我温故而知新了一次。
更多相关文章
- 1. box-sizing属性解决了什么问题?2. 伪类选择器的参数 an+b的经
- 一句话次导航相关问题
- 11个SEO最常见问题解答
- Java文件上传实例并解决跨域问题
- 关于网站链接使用相对路径还是绝对路径的问题
- 定义网站相关路由内容
- 快递100账户错误详解-接口账号,业务,增值服务,票据和其他常见问
- 快递100参数错误-面单类错误(电子面单/发货单/模板)常见问题和解
- 调用快递100接口物流信息错误常见问题和解决方法