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

时间：2022-09-17 09:45:17
    <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、在浏览器中运行代码

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

每次点击+1按钮，下边的值就会加一

3、如果我们在页面上同时使用三个counter组件

<div id="app">

    <counter></counter>

    <hr>

    <counter></counter>

    <hr>

    <counter></counter>

    <hr>

 </div>

然后在浏览器中再次浏览

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

点击任意一个+1按钮，三个数同时变化。因为它们都指向了同一个对象。我们当然希望点击不同的按钮只实现当前组件内数据的变化，那么，我们在函数中返回一个对象，每次创建一个组建的时候，在内存中同时开辟一块空间给当前组件存放data，这样，就不会出现共用一个data的现象。我们只需将如上代码进行一点更改

data: function (){

    //return dataObj

    return{

        count：0

    }

},

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

vue组件中data为什么必须是个函数的更多相关文章

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

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

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

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

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

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 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&period;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. 与其争论java和&period;net的差别，还不如多想点用编程技术挣钱的方式

    年前和最近,我发现在博客园和其它地方,有不少争论java和.net哪个好的文章,其实这是种好现象.虽然到了架构层面,技术是通用的,但兼听则明,而且技多不压身,多种挣钱的方式总不会错. 本人最近主攻Ja ...

  2. kali渗透windowsXP过程

    文章来源i春秋 这只是一个演示我自己搭建的环境,但是成功率非常高的,对方可以是其系统,首先我开启kali在打开kali终端输入nmap –sP 192.168.1.1/24 这里的ip是我的网关地址你 ...

  3. Dockerfile 常用指令

    下面列出了 Dockerfile 中最常用的指令,完整列表和说明可参看官方文档. FROM指定 base 镜像. MAINTAINER设置镜像的作者,可以是任意字符串. COPY将文件从 build ...

  4. 中断、轮询、事件驱动、消息驱动、数据流驱动&lpar;Flow-Driven&rpar;？

    轮询.事件驱动.消息驱动.流式驱动 ---数据流驱动 Unidirectional Architecture? 中断.事件.消息这样一种机制来实现更好的在多任务系统里运行... 阻塞,非阻塞同步,异步 ...

  5. TextView子类的常用属性

    TextView常见的子类包括EditText,Button,CheckBox, RadioButton等. 1.EditText EditText继承自TextView,因此TextView所有属性 ...

  6. LeetCode &lpar;236&rpar;&colon;Lowest Common Ancestor of a Binary Search Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  7. 弱网测试弱网测试—Network-Emulator-Toolkit

    原文:https://blog.csdn.net/no1mwb/article/details/53638681

  8. iOS&sol;Swift Tips 1

    1.重写hitTest方法,干预iOS事件传递过程 如下所示,view上有一个button,button一半的frame在父类view bounds之外, 按照iOS系统默认的处理逻辑, 如果点击按钮 ...

  9. Tkinter 计算器

    from tkinter import * master = Tk() frame = Frame(master) frame.pack(padx=10,pady=10) v1 = StringVar ...

  10. Linux gcc编译器

    GNU CC(通常称为GCC)是GNU项目的编译器,他能够编译C.C++语言编写的程序. 使用gcc,程序员可以对编译过程有更多控制,编译过程分为3个阶段. --预处理 --汇编 --链接 程序员可以 ...

相关文章