vue组件中data是个函数
当我们const vm = new Vue({
el : '#app',
data : {
msg:‘hello World’
}
})用习惯了,data是一个对象,可到了vue组件
Vue.component('cp',{
template : `<div>
<span>{{ info }}</span>
</div>`,
data (){
return {
info : 'hello Vue'
}
}
})
因为Vue.component是一个构造函数,data数据是放在Vue.component.prototype里的所以如果是个对象,并且data改变,组件复用的时候只要一个组件改了,其他组件数据全部改了,这样不行。
而函数不一样函数每次返回都是一样的数据,但是后续修改就不影响下一次复用的数据。
得寸进尺一点,来看看new Vue()里的data为什么是属性
new Vue()里的实例可以理解为根元素,在一定程度上可以理解为父元素,既然父元素的数据改变那么子元素引用父元素的那部分数据自然也要跟着变,用函数不太合适
vue组件中data是个函数的更多相关文章
- 怎样理解 Vue 组件中 data 必须为函数 ?
组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...
- 黑马vue---61、为什么vue组件的data要是一个函数
黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- vue组件中data为什么必须是个函数
<body> <div id="app"> <counter></counter> </div> <templat ...
- vue组件中data为什么必须是一个函数?
因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 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.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
随机推荐
- 阿里云发布SaaS生态战略,成就亿级营收独角兽
7月26日,在上海举办的阿里云合作伙伴峰会上,阿里云正式发布SaaS生态战略,计划用阿里云的品牌.渠道.资本.方法论.技术加持伙伴,成就亿级营收独角兽. 该生态战略计划招募10家一级SaaS合作伙伴, ...
- startActivity 流程图
- 三.BP神经网络
BP神经网络是包含多个隐含层的网络,具备处理线性不可分问题的能力.以往主要是没有适合多层神经网络的学习算法,,所以神经网络的研究一直处于低迷期. 20世纪80年代中期,Rumelhart,McClel ...
- 如何使我们的薪资15k?
以下我们来探讨一下如何才能使我们具备高薪15K的能力? 要想使自己的薪资成为15K,我首先想到的是我们的能力?编码能力?语言表达能力? 我觉得为之重要的则是我们的综合能力: 方方面面的能力.综合素质: ...
- cocos2dx3.0项目创建流程
cocos2dx3.0不是beta,新增了wp项目创建的支持 但不知道为啥非beta版本号的tools文件夹中取消了project-creator,可能有更改吧 没有这个工具还挺麻烦.就自己手动创建c ...
- js中的replace问题和textarea回车符问题
在textarea中输入回车符 在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库,当在取出此值的时候则会变成空格的形式,因此我们需要将不显 ...
- 仿Google Nexus菜单样式
在线演示 本地下载
- JavaScript中的this关键字的几种用法
JS 里的 this 在 function 内部被创建 指向调用时所在函数所绑定的对象(拗口) this 不能被赋值,但可以被 call/apply 改变 1. this 和构造函数 function ...
- php 获取客户端的ip、地理信息、浏览器信息、本地真实ip
转自:http://www.blhere.com/948.html 这是非常实用的php常用类.获取客户端的ip.地理信息.浏览器信息.本地真实ip 1234567891011121314151617 ...
- H5+ 分享到微信、朋友圈代码示例
h5+分享到微信.朋友圈代码示例 在使用分享功能的时候会莫名的分享失败,debug时发现是图片过大的问题. 图片过大时ios平台上返回错误码-8,安卓上返回错误码-3(我测试是这样) 因此如果第一次分 ...