Vue组件中的data必须是一个function的原因浅析


Posted in Javascript onSeptember 03, 2018

组件可以有自己的data,并且data必须是一个function。

在下面这个例子中,data 返回了一个在外部定义的对象。并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例。

Vue组件中的data必须是一个function的原因浅析

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" rel="external nofollow" >
  <style type="text/css">
 #app{
  margin:20px;
 }
  </style>
 </head>
<body>
 <div id='app'>
  <counter></counter>
  <counter></counter>
  <counter></counter>
 </div>
 <template id="tmp1">
  <div>
   <input type="button" value="+1" @click="increment">
   <h1>{{count}}</h1>
  </div>
 </template>
</body>
<script src="../lib/vue.js"></script>
<script>
 var dataObj = {count:0}
 //这是一个计数器组件,每当点击按钮,让data中的count值加1
 Vue.component('counter',{
  template:'#tmp1',
  data:function(){
   return dataObj
  },
  methods:{
   increment(){
    this.count++
   }
  }
 })
 var vm = new Vue({
  el:'#app',
 })
</script>
</html>

而当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的。

Vue.component('counter',{
  template:'#tmp1',
  data:function(){
   return {count:0}
  },
  methods:{
   increment(){
    this.count++
   }
  }
 })

Vue组件中的data必须是一个function的原因浅析

  补充:下面看下vue组件中data必须是一个函数的原因

  vue组件中data值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响。

上面解释了data不能为对象的原因,这里我们简单说下data为函数的原因。data为函数,通过return 返回对象的拷贝,致使每个实例都有自己独立的对象,实例之间可以互不影响的改变data属性值。

data为函数的示例:

data:function(){
  return {
      k1: 'v1',
      k2: 'v2',
    ...
  }
}

总结

以上所述是小编给大家介绍的Vue组件中的data必须是一个function的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
实现高性能javascript的注意事项
May 27 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
ES6中let 和 const 的新特性
Sep 03 #Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 #Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 #Javascript
前后端如何实现登录token拦截校验详解
Sep 03 #Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 #Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 #Javascript
解决vue.js this.$router.push无效的问题
Sep 03 #Javascript
You might like
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php笔记之:AOP的应用
2013/04/24 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP实现微信对账单处理
2018/10/01 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python在指定目录下查找gif文件的方法
2015/05/04 Python
python 重定向获取真实url的方法
2018/05/11 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
大学信息公开实施方案
2014/03/09 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
学雷锋日活动总结
2015/02/06 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS