vue组件中data为什么必须是个函数
<body>
<div id="app">
<counter></counter>
</div>
<template id="temp1">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script type="text/javascript">
var dataObj = {count: 0};
Vue.component('counter',{
template:'#temp1',
data(){
return dataObj
},
methods:{
increment() {
this.count++
}
}
})
var vm = new Vue({
el: "#app",
data:{},
methods: {}
})
</script>
</body>
分析如上代码：
1、首先创建一个名字为counter的组件，data函数中返回一个外部定义的对象的值，如果直接给data属性设置一个对象而不是函数，那么会在浏览器中直接报错
2、在浏览器中运行代码
每次点击+1按钮，下边的值就会加一
3、如果我们在页面上同时使用三个counter组件
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
<hr>
</div>
然后在浏览器中再次浏览
点击任意一个+1按钮，三个数同时变化。因为它们都指向了同一个对象。我们当然希望点击不同的按钮只实现当前组件内数据的变化，那么，我们在函数中返回一个对象，每次创建一个组建的时候，在内存中同时开辟一块空间给当前组件存放data，这样，就不会出现共用一个data的现象。我们只需将如上代码进行一点更改
data: function (){
//return dataObj
return{
count：0
}
},
vue组件中data为什么必须是个函数的更多相关文章
- vue组件中data为什么必须是一个函数？
因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- 怎样理解 Vue 组件中 data 必须为函数 ?
组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...
- vue组件中data是个函数
当我们const vm = new Vue({ el : '#app', data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...
- Vue组件里面data为什么必须是个函数
在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...
- 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
随机推荐
- HTML基础-------HTML标签(3)
HTML标签(3) 表格 作用:制作一个表格 属性: 标签;table>tr>td(或者th) 语义; table:一个表格 tr:一行 td:一个单元格 th:单元格的表头 captio ...
- Map根据value值进行倒序排列
public List<Map.Entry<Integer,BigDecimal>> sortByMapValue(HashMap<Integer, BigDecimal ...
- 宝塔服务器面板 部署 thinkphp5 坑
thinkphp5 在宝塔服务器上部署,出现的问题: 1. File not found. 原因: 宝塔服务器默认不支持 pathinfo 的路径访问:需要在软件 - PHP - 管理里面,安装php ...
- resnet代码分析
1. 先导入使用的包,并声明可用的网络和预训练好的模型 import torch.nn as nn import torch.utils.model_zoo as model_zoo #声明可调用的网 ...
- LoRa---她的芯片和她的几种工作模式
LoRa对应的芯片------sx1278芯片 sx1278芯片为Semtech公司推出的具有新型LoRa扩频技术的RF芯片,具有功耗低.容量大.传输距离远.抗干扰能力强的优点.我接下来在这块芯片上进 ...
- Web前端之iframe详解
iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...
- 关于使用nodejs的mysql查询时碰到的坑
今天在编写登录模块时,碰到一个隐蔽的坑,故记录一番 在使用Node.js的mysql模块的query方法时,查询语句使用了 `select password from login where name ...
- JS 设计模式八 -- 发布订阅者模式
概念 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多(一个发布,多个观察)的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 优点 1 ...
- 【刷题】牛客网看到的鹅厂ML面筋-部分问题RecSys相关
昨天下午六点半的电话面试,其实我已经有了一个不错的实习offer ,不是特别想去腾讯了,没有太怎么准备,接的电话. 整个面试15分钟,开始就是自我介绍,接着问项目,和上一段百度实习经历.问题大致如下: ...
- 【MySQL 读书笔记】RR(REPEATABLE-READ)事务隔离详解
这篇我觉得有点难度,我会更慢的更详细的分析一些 case . MySQL 的默认事务隔离级别和其他几个主流数据库隔离级别不同,他的事务隔离级别是 RR(REPEATABLE-READ) 其他的主流数据 ...