精华内容
下载资源
问答
  • 3、组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就 会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各 自的数据。而单纯的写成对象形式...
    1、data 组件都是
          Vue 的实例
    2、组件共享 data
          属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其 他
    3、组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就
          会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各 自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果.
    展开全文
  • Vue组件中的data必须是函数 最近一直在学习Vue,今天看到一个知识点,感觉有必要记录下,以免后面忘记。 每个Vue组件其实也可以看成时一个Vue实例,它也有生命周期,data,methods等。其中在Vue组件中,data必须是...

    Vue组件中的data必须是个函数

    最近一直在学习Vue,今天看到一个知识点,感觉有必要记录下,以免后面忘记。
    每个Vue组件其实也可以看成时一个Vue实例,它也有生命周期,data,methods等。其中在Vue组件中,data必须是个函数,这是因为:
    组件是可复用的,我们开发好每个组件后,希望它可以在项目中多个地方使用,但又相互不影响。如下面示例:
    my-counter这个组件,我在界面复用三次,在每次复用my-counter组件时,data其实时返回了一个新的对象,当我改变其中任何一个组件的数据时,对于其他的复用组件,是完全没有影响的。

    <div id="app">
        <my-counter></my-counter>  
        <my-counter></my-counter>
        <my-counter></my-counter>  
      </div>
      <template id="myCounter">
        <div>
          <h3>当前数值为:{{counter}}</h3>
          <button @click="increment">+</button>
          <button @click="decrement">-</button>
        </div>
      </template>
    </body>
    <script src="../vue.js"></script>
    <script>
      Vue.component('my-counter',{
        template:"#myCounter",
        data(){
          return{
            counter:0
          }
        },
        methods:{
          increment(){
            this.counter++;
          },
          decrement(){
            this.counter--;
          }
        }
      })
      const app = new Vue({
        el:"#app",
        data:{
    
        },
        methods:{
          
        }
      })
    

    运行结果
    我们将上述代码做一个调整,模拟一个data是一个对象的情况,下面代码中,data指向同一个obj对象,组件在复用的时候,每个复用组件的data都指向同一个对象,当改变其中一个父组组件的data时,其他也会发生变化。

    <div id="app">
        <my-counter></my-counter>  
        <my-counter></my-counter>
        <my-counter></my-counter>  
      </div>
      <template id="myCounter">
        <div>
          <h3>当前数值为:{{counter}}</h3>
          <button @click="increment">+</button>
          <button @click="decrement">-</button>
        </div>
      </template>
    </body>
    <script src="../vue.js"></script>
    <script>
      let obj = {
        counter:0
      }
      Vue.component('my-counter',{
        template:"#myCounter",
        data(){
          return obj
        },
        methods:{
          increment(){
            this.counter++;
          },
          decrement(){
            this.counter--;
          }
        }
      })
    

    在这里插入图片描述

    展开全文
  • data不是函数会报错,具体分析如下:1)每一个组件都是vue实例,每个实例都有可能用到data里面的数据,为了不影响其他组件,用data这个函数返回一个对象不会污染其他组件的变量 2)组件中的 data 写成一个函数,数据...

    data不是函数会报错,具体分析如下:

    1)每一个组件都是vue实例,每个实例都有可能用到data里面的数据,为了不影响其他组件,用data这个函数返回一个对象不会污染其他组件的变量

    2)组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用 一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式, 就使得所有组件实例共用了一份 data,就会造成数据之间的相互冲突

    展开全文
  • 为什么vue组件data必须函数表达? 看到这个问题可能很多人都并可以注意过这个问题,问什么在脚手架中的.vue文件中data不能用对象来表达,而是必须使用函数的形式来表达呢?大家可能也不知道为什么这么设计? ...

    为什么vue组件中data必须用函数表达?

    看到这个问题可能很多人都并可以注意过这个问题,问什么在脚手架中的.vue文件中data不能用对象来表达,而是必须使用函数的形式来表达呢?大家可能也不知道为什么这么设计?
    实际上这是很有学问的,当初框架设计的时候,都是想了很多可能会出现的问题的。

    首先,先看看官方怎么解释的:
    在这里插入图片描述
    抓住重点:每个实例可以维护一份被返回对象的独立的拷贝
    但还是有点模糊的概念,那就上个实例吧。

    function abc(){
        return {
            name:'赵云',
            age:18
        }
    }
    let obj1=abc();
    let obj2=abc();
    let obj3=abc();
    obj1.name='安琪拉';
    console.log(obj2);
    console.log(obj3);
    

    打印出来的obj2、obj3的name还是赵云,不会因为obj1的改变而改变。
    对三个不同的变量obj1,obj2,obj3进行赋值,并且都是调用同一个方法abc(),也就是说创建了三个不一样的实例,所以返回的是此方法返回的值,就被赋值给了不同的地址。 因此这三个变量的内存地址是不同的,此时改变其中一个变量的值,其他两个变量的值是不会跟随发生改变的。

    假设vue组件中的data直接是一个对象,那么它的例子应该是这样的:

    const abc={
            name:'赵云',
            age:18
        }
    let obj1=abc;
    let obj2=abc;
    let obj3=abc;
    obj1.name='安琪拉';
    console.log(obj2);
    console.log(obj3);
    

    打印出来的obj2、obj3的name是安琪拉。因为obj1、obj2、obj3指向的是同一个地址,而obj1改变了name。

    总结

    综上可知,如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

    所以说vue组件的data必须是函数。这都是因为js的特性带来的,跟vue本身设计无关。

    js本身的面向对象编程也是基于原型链和构造函数,应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。

    展开全文
  • 因为如果不是通过函数返回的,那么多个组件就会共用一份数据,就会造成数据混乱。
  • 原文链接:https://blog.csdn.net/weixin_43841308/article/details/104346074组件中的data必须是一个函数组件化的本质是:为了组件能够更好的被复用例如:多个计数器使用HTML结构:{{count}}Vue实例Vue.component('...
  • 当时只是听说函数返回有优势,但由于对象形式的方便和容易理解,我就一直用的对象形式存放在data中,直到我之后学到组件模块化开发 然后带着问题去翻阅各路大佬博客和官方文档,明白了这么做的原因,本篇博文以官方...
  • 2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回...
  • vue组件中的data函数

    2021-10-04 13:51:27
    vue 中的data函数 组件是一个单独功能模块的封装,这个模块有属于自己的HTML模板,也应该有属于自己的数据data vue组件中的数据是不能保存在 vue实例中的data中的。 明确 vue组件中的data 是一个函数 data必须是...
  • 因为vue在initData的时候 function initData(vm){ ... 因为在这里,data变量是从vm.$options.data引用来的,vm.$options.data就是你在定义这个组件时,传入的data 如果data是一个对象的话,当有多...
  • 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title<...script src="../../vue.js">...11 为什么在Vue.component({})中使用.
  • 1、声明式渲染 vue文档在声明式渲染这一节中给了我们这样的一个demo:...在这个demo中data是一个对象,通过 new Vue 创建的 Vue实例中,我们直接把data上的message属性通过模板渲染到页面上去了。 声明式渲染的demo中dat
  • vuedata必须是函数是为了保证组件的 独立性 和 可复用性。 data是一个函数组件实例化的时候会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不...
  • 就希望每个组件都有自己的data,但是由于每个复用的组件都是组件构造器的实例,它们会共享组件构造器的数据(个人理解),这时如果我们把data改为函数,利用函数形成自己的作用域,每个组件data就不会相互影响了。...
  • // 解答: // Vue组件其本质也是一个对象, 当组件被多次导入使用(引用) 时相当于对象的赋值操作, 对象赋值时都是赋值的引用而非新的对象, // 当多个引用 操作组件内部的 data 时, 由于都是使用的同一个组件的引用...
  • 是个引用数据类型,如果用单文件组件开发的时候,每个组件的数据应当是独立的,如果公用一个对象的话,在一个文件里修改数据,其他使用该组件页面也会跟着有变化,所以采用闭包的形式返回私有对象来使用(在Vue内部...
  • 这样是为了避免组件之间的数据互相影响。 同一个组件被多次复用会创建多个实例...为了保证组件的数据独立,将组件中的data写成一个函数,并且数据以函数返回值的形式定义,这样每次组件复用,都会返回一份新的data ...
  • 我们需要考虑“VUE组件data对象实例”与 “VUE的根实例”。 在源码中找答案: src\core\instance\state.js - initData() function initData (vm: Component) { let data = vm.$options.data data = vm._data =...
  • 在我们初次接触vue的时候,我们大多都是在页面中引入vue.js,然后在页面中直接创建一个Vue根实例,代码如下: <html> <body> <div id='demon'> <h1>{{msg}}</h1> </div> &
  • 1. 请说下封装 vue 组件的过程 首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。 分析需求:确定业务需求,把...2. Vue组件
  • 先看下面代码,是一个函数里面定义对象。 function abc() { return { name: 'why', age: 18 } } let obj1 = abc() let obj2 = abc() let obj3 = abc() obj1.name = 'kobe' console.log(obj1); ...
  • Vue组件中的data必须 是一个函数
  • 今天懂了一个东西,就是Vue3中创建Vue实例的时候保存数据的data为什么一定是函数,...因为每当用一次所创建的子组件,就会调用一次data函数,从而return 一个新的对象,这些对象的地址不同,所以避免了牵一发而动全身
  • 组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后...
  • 1、对象还是函数vue官方文档在声明式渲染这一节中给了我们这样的一个demo: <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ...
  • 组件是可复用的Vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后...
  • vuedata必须是函数是为了保证组件的独立性和可复用性,data是一个函数组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址...
  • data() {//data是一个函数data:function(){}的简写 return { //页面要初始化的数据 disabled: true, isArrowdown: false, submenuName: '', childName: '', sideName: '', indexData: [.
  • 发现组件是一个构造函数 验证源码js中VueComponent被调用了 发现被调用了 1. 注意这边是构造函数 2. 既然school是一个构造函数,那么就会生成一个实例对象即new Vuecomponent(option) 还传入了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 75,504
精华内容 30,201
关键字:

vue组件的data必须是函数

vue 订阅