Vue组件为什么data必须是一个函数


Posted in Javascript onJune 11, 2020

前言

我们需要先复习下原型链的知识,其实这个问题取决于 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)

此时,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 这个小问题让我温故而知新了一次。

到此这篇关于Vue组件为什么data必须是一个函数的文章就介绍到这了,更多相关Vue组件data是函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
jQuery的ready方法详解
Nov 27 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
jQuery手风琴的简单制作
May 12 jQuery
Node.js pipe实现源码解析
Aug 12 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
vue实现简单的日历效果
Sep 24 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
Vue实现点击箭头上下移动效果
Jun 11 #Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 #Javascript
详解vue 组件
Jun 11 #Javascript
vue实现员工信息录入功能
Jun 11 #Javascript
JavaScript Event Loop相关原理解析
Jun 10 #Javascript
vue Element左侧无限级菜单实现
Jun 10 #Javascript
详解用js代码触发dom事件的实现方案
Jun 10 #Javascript
You might like
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
用js来解决ajax读取页面乱码
2010/11/28 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
期中考试后的反思
2014/02/08 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
公司周年庆典致辞
2015/07/30 职场文书
2016年寒假生活小结
2015/10/10 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Python词云的正确实现方法实例
2021/05/08 Python
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
python自动化测试之Selenium详解
2022/03/13 Python
Go语言测试库testify使用学习
2022/07/23 Golang