<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为什么必须是个函数的更多相关文章

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

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

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

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

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

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

  4. vue组件中data是个函数

    当我们const vm = new Vue({ el : '#app',   data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...

  5. Vue组件里面data为什么必须是个函数

    在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...

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

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

  7. 15.Vue组件中的data

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

  8. vue组件中的data为什么是函数？

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

  9. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

随机推荐

  1. springboot 定时任务

    1.启动类新增注解 @EnableScheduling import org.springframework.boot.SpringApplication; import org.springfram ...

  2. ZHS16GBK的数据库导入到字符集为AL32UTF8的数据库

    字符集为ZHS16GBK的数据库导入到字符集为AL32UTF8的数据库  相信大家都对字符集有相当的了解了,废话就不多说了!直接步入正题:这里主要是测试含有 汉字的数据从ZHS16GBK的数据库导入到 ...

  3. 自定义 js 文件的集成引用

    这里的内容, 提前要知道  import comm from ‘...’  和 import {  comm }  from ‘...’ 的基础知识. 我举个案例, 当你有很多api文件的时候, 比如 ...

  4. 我的工具：Db SQL Monitor

    SQL Monitor 是一款界面简洁.绿色小巧的sql活动监视器,它能够帮助用户对 SQL Server 运行进程和Job进行实时监视,您可以查看当前执行的SQL/命令并终止. 工具下载地址:htt ...

  5. Spring项目定时任务

    最近某协会网站有个需求:显示当天访问量,很明显需要做俩步:一个是访问请求量的显示,一个需要每天00点恢复访问次数为0 所以需要做个定时任务:每天00点更新: 注解用法Spring配置: 1.在spri ...

  6. C#之Using（转）

    1.using指令. using 命名空间名字.例如: using System; 这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常 ...

  7. Linux(Ubuntu)使用日记------部署JavaWeb项目到服务器

    0.前言 本博文内容是建立在你可以通过SSH连接到远程服务器的基础上的,如果你还没有用SSH连接到远程服务器,请参考此文(腾讯云服务器): http://www.cnblogs.com/hwtblog ...

  8. 【MySQL 读书笔记】SQL 刷脏页可能造成数据库抖动

    开始今天读书笔记之前我觉得需要回顾一下当我们在更新一条数据的时候做了什么. 因为 WAL 技术的存在,所以当我们执行一条更新语句的时候是先写日志,后写磁盘的.当我们在内存中写入了 redolog 之后 ...

  9. 使用Crawler框架搭建自己的爬虫框架MyCrawler

    自己写一个爬虫框架的目的: 完美架构 在实际的数据采集编码过程中,发现代码比较乱,抓取数据,存储数据的代码混杂在一起,为了构建比较完美的数据采集框架 敏捷开发 将数据采集进行标准流程化,每个标准流程都 ...

  10. git异常操作解决办法合集

    1. git add .后发现提交错误,想撤销 git reset head 文件名-----撤销某个文件 git reset head --hard 强制撤销当前的所有操作到上次提交的版本 2. g ...