data为何以函数形式返回

在使用Vue构建组件化应用时，每个组件的data属性都是以函数形式返回的，这主要是在组件化实现的时候，每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。

Vue简单实例

在一个Vue简单实例中，也就是不使用组件化实现的时候，data可以是一个对象，因为本身也只有一个实例，就不存在多个实例共享的问题。

<!DOCTYPE html>

<html>

<head>

    <title>Vue</title>

</head>

<body>

    <div id="app">

        <div>{{msg}}</div>

    </div>

</body>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

<script type="text/javascript">

    var vm = new Vue({

        el: '#app',

        data: {

            msg: 'Vue Instance'

        }

    })

</script>

</html>

组件化实例

如果是使用Vue的组件化实例，那么data属性就必须以函数的形式返回，如果不使用函数的形式返回，可能会出现一些意料之外的情况，比如下面的例子中，按钮组件是复用的，在点击第一个按钮时本身应该只有第一个按钮+1，但是所有的按钮都跟随+1。请注意，在此处仍然是使用函数的形式返回，这是因为如果在组件化实现中如果不使用函数的形式返回Vue会直接报错，但是实现的效果是相同的，虽然是以函数的形式返回，但是返回的对象中count属性都是指向了对于counter对象的引用，本质上依旧是多个组件实例共享一个对象，实际效果与以对象的形式直接返回相同。

<!DOCTYPE html>

<html>

<head>

    <title>Vue</title>

</head>

<body>

    <div id="app">

        <button-counter></button-counter>

        <button-counter></button-counter>

        <button-counter></button-counter>

    </div>

</body>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

<script type="text/javascript">

    var counter = {

        count: 0

    }

    Vue.component('button-counter', {

      data: function(){

          return counter;

      },

      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

    })

    var vm = new Vue({

        el: '#app'

    })

</script>

</html>

所以为了规避这种现象，在组件化实现的时候，data属性必须以函数的形式返回，以便每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。

<!DOCTYPE html>

<html>

<head>

    <title>Vue</title>

</head>

<body>

    <div id="app">

        <button-counter></button-counter>

        <button-counter></button-counter>

        <button-counter></button-counter>

    </div>

</body>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

<script type="text/javascript">

    Vue.component('button-counter', {

      data: function(){

          return {

            count: 0

          }

      },

      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

    })

    var vm = new Vue({

        el: '#app'

    })

</script>

</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://segmentfault.com/a/1190000019318483

https://cn.vuejs.org/v2/guide/components.html

https://blog.csdn.net/fengjingyu168/article/details/72900624

Vue中data为何以函数形式返回的更多相关文章

  1. vue中data必须是一个函数

    前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.

  2. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  3. [教程]Delphi 中三种回调函数形式解析

    Delphi 支持三种形式的回调函数 全局函数这种方式几乎是所有的语言都支持的,类的静态函数也可以归为此类,它保存的只是一个函数的代码起始地址指针( Pointer ).在 Delphi 中声明一般为 ...

  4. vue组件中data是个函数

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

  5. Vue 组件 data为什么是函数？

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  6. Vue 组件 data为什么是函数

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  7. Vue中data重置问题

    Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...

  8. 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入

    张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...

  9. Vue中data返回对象和返回值的区别

    速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...

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

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

随机推荐

  1. [转帖]JVM性能调优工具2之jcmd详解（覆盖全网最全的jcmd命令与说明文档）

    上篇文章里<JVM常用性能调优工具详解1>我们已经探究了jps.jstat等监控工具,以及jinfo.jmap.jstack.jhat等故障排查工具,这里我单独拿出一篇文章,特别介绍jcm ...

  2. [转帖]oracle 审计日志清理

    https://www.cnblogs.com/bangchen/p/7268086.html   --进入审计日志目录: cd $ORACLE_BASE/admin/$ORACLE_SID/adum ...

  3. 【转帖】Linux查看二进制文件：一招制敌（linux二进制查看文件）

    https://www.dbs724.com/146055.html 一招制敌:学会Linux查看二进制文件 在Linux操作系统中,二进制文件是一种常见的文件类型.如果你想深入了解一个二进制文件,可 ...

  4. 申威3231_SPECJVM2008的测试结果与信创服务器对比验证

    申威3231_SPECJVM2008的测试结果与信创服务器对比验证 背景 周六找同事将在公司里的机器进行了开机. 然后验证了config.guess和config.sub 的确是可以通过复制/usr ...

  5. [转帖]ansible小结（七）常用模块

    ansible小结(七)常用模块 http://www.361way.com/ansible-modules/4415.html   在上一篇中介绍了commands部分模块,本篇承接上篇介绍下常用的 ...

  6. Nginx 系列 | （转）Nginx 上传文件：client_max_body_size 、client_body_buffer_size

    原文:http://php-note.com/article/detail/488 client_max_body_size client_max_body_size 默认 1M,表示 客户端请求服务 ...

  7. 不同信创服务器Redis7.0.5性能表现总结

    不同信创服务器Redis7.0.5性能表现总结 背景以及基础约定 随着美帝2022.10收紧EAR规定的硬件出口规定 信创事业迎来了一波新的高潮. 最近不仅仅要求国产化的硬件. 更要求国产化的OS,以 ...

  8. 【0基础学爬虫】爬虫基础之自动化工具 Pyppeteer 的使用

    大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶.逆向相关文章,为实现从易到难全方位覆盖,特设[0基础学爬 ...

  9. ABP-VNext 用户权限管理系统实战02---用户权限表的创建与迁移

    一.表实体建立 1.菜单表 [Comment("菜单表")] [Table("t_identity_menu")] public class Menu : Au ...

  10. 安装Docker填坑

    从官网下载适合win10使用的docker,但是下载后,出现了各种坑,记录一下解决方式 1.docker想要正常启动,需要做以下的准备,开启 Windows 虚拟化和 Linux 子系统(WSL2), ...