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 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
JS封装cavans多种滤镜组件
Feb 15 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python中requests库session对象的妙用详解
2017/10/30 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
2014年“四风”问题个人整改措施
2014/09/17 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
2014年个人委托书范本
2014/10/13 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
小学运动会前导词
2015/07/20 职场文书