当我们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安装numpy、scipy

    python2.7开发环境,若为python3.4的环境则下载对应的软件 系统为64为windows环境,显然不同于32的环境,更繁琐,所谓的网友教程也不尽人意. 安装numpy 下载地址:http: ...

  2. 【插拔式】分页+bootstrap4(开源)

    1:分页源码 class Pagination(object): def __init__(self, PagerCount,Pages, perPageItemNum, maxPageNum): # ...

  3. Directx11教程(59) tessellation学习(1)

    原文:Directx11教程(59) tessellation学习(1)       在D3D11管线中,新增加了3个stage, Hull shader, Tessellator, Domain s ...

  4. oracle管理索引

    索引是用于加速数据存取的数据对象,合理的使用索引可以大大降低I/O次数,从而提高数据访问性能.索引有很多种我们主要介绍常用的几种: 为什么添加了索引或,会加快查询速度呢? n  单列索引 单列索引是基 ...

  5. 比较全面的一个PHP缓存类解析

    转自:http://www.blhere.com/1164.html 一.引论 PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站 ...

  6. JavaScript--时间日期格式化封装

    这是一个正常的封装: 其他非正常的请按照以下语句自由搭配 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. mysql设置text字段为not null,并且没有默认值,插入报错:doesn't have a default value

    一.问题描述 在往数据库写入数据的时候,报错: '字段名' doesn't have a default value 本来这个错误是经常见到的,无非就是字段没有设置默认值造成的.奇怪的是,我这边报错的 ...

  8. 字符串分割+二维数组 Day15练习

    package com.sxt.arrays.test; import java.util.Arrays; /* 1,2,3,4!5,6,7!8,9!12,456,90!32 * 将此字符串以叹号为分 ...

  9. jsp中几注释的区别

    1).JSP页面中的HTML注释 SP页面中的HTML注释使用“<!—”和“-->”创建,它的具体形式如下所示: <!-- 注释内容 --> 当它出现在JSP页面时,微蘑菇将不 ...

  10. Datagrid添加右键菜单 标签: 三层EasyUI 2015-08-14 19:57 1029人阅读 评论(22)

    最近的一个项目前台使用的EasyUI,每个界面都有DataGrid控件,按照我们的想法,应该做出来的效果是单击选中,双击可编辑,当然右键也应该出现这些菜单按钮,想的挺好,那么该如何实现呢?一开始不知道 ...