当我们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是个函数的更多相关文章

  1. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  2. 黑马vue---61、为什么vue组件的data要是一个函数

    黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...

  3. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  4. vue组件中data为什么必须是个函数

    <body> <div id="app"> <counter></counter> </div> <templat ...

  5. vue组件中data为什么必须是一个函数?

    因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...

  6. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  7. 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  9. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

随机推荐

  1. 微信小程序分析见解

    前两天朋友圈都快被小程序给刷爆了: 对于小程序这方面,  由于没有公测的资格.所以翻阅了许许多多的资料,来了解一下小程序: 微信小程序: 小程序是一种不需要下载安装即可使用的应用,它实现了应用&quo ...

  2. 【JZOJ4788】【NOIP2016提高A组模拟9.17】序列

    题目描述 输入 输出 样例输入 1 5 2 1 3 0 3 2 2 0 1 0 样例输出 1 数据范围 解法 考虑没有模的情况,问题就仅仅只是简单的差分问题(广告铺设): 设r[i]是第i位需要加的次 ...

  3. iOS:你App的设置做对了吗?

    http://www.cocoachina.com/ios/20151217/14707.html iOS 8及以上版本最不为人知的一个特点是与应用设置的深层链接,用户可以根据APP的需要授权启用位置 ...

  4. iOS从零开始 Code Review

    http://www.cocoachina.com/ios/20151117/14208.html 这篇帖子不是通篇介绍Code Review的方法论, 而是前大段记录了我们团队怎么从没有这个习惯到每 ...

  5. lower_bounder()和upper_bound()的函数

    lower_bound() .upper_bound()都运用于有序区间的二分查找. ForwardIter lower_bound(ForwardIter first, ForwardIter la ...

  6. 并发编程之submit和execute区别

    前言 使用线程池难免会用到submit和execute,但是submit是有坑的,此处做个记录 1.submit坑 此处随便写一个方法,进入内部查看execute和submit /** * @Auth ...

  7. postman认证使用篇(五)

    postman 认证使用篇(五) Authorization 尽管请求编辑器已经足够强大去构造各种各样的请求,但是有的时候你的请求可能是需要认证,那么就可以尝试使用下面的认证功能了(由于认证的参数信息 ...

  8. HZOJ 连连看

    考场几乎想到了正解,然而我也不知道当时在想啥,在没有证伪的情况下只是觉得无法实现就否了…… 最后打的好象是达哥说的O(4*15*n*m),复杂度不是很会证反正T成了暴力…… 题解: 对于测试点8,9, ...

  9. 【NS2】NS2在ubuntu下的安装

    Step1: 更新系统.在终端输入如下命令 sudo apt-get  update #更新源列表sudo apt-get upgrade #更新已经安装的包sudo apt-get dist-upg ...

  10. 初始化Redis密码

    在配置文件/etc/redis/redis.conf中有个参数: requirepass 这个就是配置redis访问密码的参数: 比如 requirepass test123: (需重启Redis才能 ...