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 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
JS常见算法详解
Feb 28 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
angular select 默认值设置方法
Jun 23 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
javascript event 事件解析
2011/01/31 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python FFT合成波形的实例
2019/12/04 Python
基于python 凸包问题的解决
2020/04/16 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
政法学院毕业生求职信
2014/02/28 职场文书
平安建设实施方案
2014/03/19 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
大学生暑假实习总结
2015/07/13 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby