当我们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. python中几种单例模式的实现

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  2. spring boot + mybatis 访问 neo4j

    之前有通过rest的风格去访问,但是每次需要访问时候将statement一并加入header中去数据库执行,方式简单.且思路清晰,但是不便于形成模板调用,固采用mybaits来集成. 1.关键pom. ...

  3. Guitar

    nuomi N3380614240045529680 N3380614240167717364 1404679948665073 装修风格: http://www.douban.com/group/t ...

  4. JavaScript--模拟百度搜索下拉li

    上效果: 主要思路: 函数indexOf() .join().innerHTML的使用,还有 用完的数组要清空 <!DOCTYPE html> <html> <head ...

  5. activemq入门demo

    创建maven工程,pom文件如下 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...

  6. mysql的执行计划概念说明

    explain中的列的说明 1. id列 id列的编号是 select 的序列号,有几个 select 就有几个id,并且id的顺序是按 select 出现的 顺序增长的. id列越大执行优先级越高, ...

  7. php后端语言的基本语法

    <?php$num = 1;//php中定义一个变量echo $num;//php中打印一个值(与console.log类似)$arr = array(1,2,3,4,5,6,7,89);//在 ...

  8. Java面向对象----多态概念,对象上下转型

    概念:同一操作作用于某一类对象,可以有不同的解释,产生不同的执行结果 多态存在的三个必要条件 需要存在继承和实现关系 同样的 方法调用而执行不同操作,运行不同的代码(重写操作) 在运行时父类或者接口的 ...

  9. POJ-3616_Milking Time

    Milking Time Time Limit: 1000MS Memory Limit: 65536K Description Bessie is such a hard-working cow. ...

  10. Java练习 SDUT-1194_余弦

    C语言实验--余弦 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入n的值,计算cos(x). Input 输入数据 ...