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来安装, ...
随机推荐
- 吴军武志红万维刚薛兆丰何帆曾鸣李笑来罗永浩等得到APP专栏作者的书3
整理了一下最近两三年内看过的得到APP专栏与课程作者的得到精选文集和他们写过的书共本.新增吴军1本,武志红1本. 其中:武志红3本,熊太行1本,薛兆丰2本,吴军4本,何帆3本,曾鸣2本,万维刚1本,李 ...
- Codeception 实战
Codeception 测试 Php 代码 一.一句话概述 使用 cc 进行单元测试,保证现有代码质量,为以后维护与重构提供支撑. 二.目标 安装配置 cc 编写测试代码,简化开发与最大化稳定性和可维 ...
- Linux新手随手笔记1.1
ifconfig 查询网卡信息 分别是网卡名称,物理IP地址,MAC地址,RX收到数据包大小,TX发送数据包大小 # uname # uname -a 查看内核版本号 # hostname 查看主 ...
- 如何使用ASP.NET Core、EF Core、ABP(ASP.NET Boilerplate)创建分层的Web应用程序（第一部分）
本文是为了学习ABP的使用,是翻译ABP官方文档的一篇实战教程,我暂时是优先翻译自己感兴趣或者比较想学习的部分,后续有时间希望能将ABP系列翻译出来,除了自己能学习外,有可能的话希望帮助一些英文阅读能 ...
- iOS截屏并修改截图然后分享的功能实现
一. 实现的效果类似微博的截图分享 不仅截图分享的时候还进行图片的修改,增加自己的二维码 二.实现方式 苹果在ios7之后提供了一个新的通知类型:UIApplicationUserDidTakeScr ...
- java中String的final类原因
public final class String implements java.io.Serializable, Comparable<String>, CharSequence { ...
- lower_bound( )和upper_bound( )的基本用法
lower_bound( begin,end,num):从数组的begin位置到end-1位置二分查找第一个大于或等于num的数字,找到返回该数字的地址,不存在则返回end.通过返回的地址减去起始地址 ...
- Python类和对象
目录 类与对象 其他方法 继承 经典类和新式类 派生 组合 接口.归一化设计与抽象类 继承实现的原理 子类中调用父类的方法 指名道姓 super()方法 多态与多态性 封装 单下划线开头 双下划线开头 ...
- Java规则之条件语句中做空判断时使用||和&&常犯的错误
错误代码示例: public String bar(String string) { //error 1 if (string!=null || !string.equals("" ...
- linux查看目录下各个文件大小的命令
linux查看目录下各个文件大小的命令 由于需要经常查看各个文件的具体大小 ,所以这里记一下. 命令如下: du -h --max-depth=1