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 相关文章推荐
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
详解Vue的options
May 15 Vue.js
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
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
使用js实现数据格式化
2014/12/03 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
校园公益广告语
2014/03/13 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
科技之星事迹材料
2014/06/02 职场文书
火锅店的活动方案
2014/08/15 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书