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 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
jquery实现图片切换代码
Oct 13 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 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
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python求离散序列导数的示例
2019/07/10 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python super()函数使用及多重继承
2020/05/06 Python
python字符串的index和find的区别详解
2020/06/20 Python
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
局域网定义和特性
2016/01/23 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
师说教学反思
2014/02/07 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
JavaScript流程控制(循环)
2021/12/06 Javascript
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers