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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
微信小程序实现分页加载效果
Nov 19 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
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python中异常捕获方法详解
2017/03/03 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
社区节水倡议书
2015/04/29 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
水浒传读书笔记
2015/06/25 职场文书