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 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
JS检测图片大小的实例
Aug 21 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
Vue从TodoList中学父子组件通信
Feb 05 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php类常量用法实例分析
2015/07/09 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
Python中实现的RC4算法
2015/02/14 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python实现AI换脸功能
2020/04/10 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
总经理助理职责
2014/02/04 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js