iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >你知道vue data为什么是一个函数
  • 208
分享到

你知道vue data为什么是一个函数

2024-04-02 19:04:59 208人浏览 独家记忆
摘要

官网解释:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象

官网解释:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。我看到这个问题的时候是我面试的时候一个面试官问我的,当时懵了,从来没有想过为什么,只知道代码需要这么写。最近有空再来了解一下这部分的原理内容。有两个我比较喜欢回答  

1.是为了在重复创建实例的时候避免共享同一数据造成的数据污染  

2.写函数的原因是为了保证这个对象是独立的,如果可以保证对象是惟一的,也可以不写函数直接写对象。

其实归根结底就是为了避免数据污染。

我们想要解决这个问题就不得不说原型链和this。

相关知识可以自行去了解。在原型链中对象共享公共的属性和方法。

person1和person2是Person的引用,所以当person2改变数据是实际上更改的是Person的的数据。既然Person的数据改变了,所以Person的引用person1也会被改变


function Person(){
 }
 Person.prototype.datas={
   a:"c",
   f:'h'
 }
 var person1 = new Person()
 var person2 = new Person()
 person2.datas.a="wewew"
 console.log(person2)
 console.log(person1)

我之前一直有一个疑问既然person1和person2都是Person的引用为什么放在对象里面会造成数据污染但是放在方法里就不会造成数据污染了呢?首先要知道一句话:this的指向在函数定义的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁,实际上this指向调用它的对象。又有一个疑问了,明明指向的是同一个方法为什么会有不一样的呢?难道克隆了一个?答案:定义在构造函数内部的方法,会在它的每一个实例上都克隆这个方法;定义在构造函数的prototype属性上的方法会让它的所有示例都共享这个方法,但是不会在每个实例的内部重新定义这个方法引用:https://www.jb51.net/article/199830.htm


function Person(){
    this.datas = this.sayHello()//this指向调用它的对象
  }
  Person.prototype.sayHello = function () {
      return{
        d:1,
        b:2
      }
    };
  var person1 = new Person()
  var person2 = new Person()
  person2.datas.d="wewew"
  console.log(person1)
  console.log(person2)

  具体例子如下 

1.正常状态 当使用data函数的时候没有造成数据污染


<em id="__mceDel">ButtonTest.Vue<br><template>
  <div>
    <div>{{ count }}</div>
    <button @click="onAdd">增加</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    onAdd() {
      this.count++;
    },
  },
};
</script><br></em>

Home.vue
<template>
  <div class="home">
    <button-test></button-test>
    <button-test></button-test>
  </div>
</template>
 
<script>
import ButtonTest from "@/components/ButtonTest.vue";
export default {
  name: "Home",
  components: {
    ButtonTest,
  },
};
</script>

  

2.若data直接定义成一个对象则会报错

3.定义一个外部对象的形式,结果点击一个按钮,两个数据同时增加,造成数据污染

到此这篇关于vue data为什么是一个函数?的文章就介绍到这了,更多相关vue data 函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 你知道vue data为什么是一个函数

本文链接: https://www.lsjlt.com/news/156977.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 你知道vue data为什么是一个函数
    官网解释:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象...
    99+
    2024-04-02
  • vue组件中data为什么是一个函数
    这篇文章给大家分享的是有关vue组件中data为什么是一个函数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。组件中 data 为什么是一个函数?为什么组件中的 data 必须是一...
    99+
    2024-04-02
  • vue中的data为什么是函数
    小编给大家分享一下vue中的data为什么是函数,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!vue 中的data 为什么是函数...
    99+
    2024-04-02
  • vue中为什么在组件内部data是一个函数而不是一个对象
    目录实例和组件中 data 的区别?组件中 data 定义对象和函数区别?如果采用函数的写法?总结扩展vue 组件data用箭头函数行不行?组件中 data 定义...
    99+
    2023-05-17
    vue中data为什么是函数而不是对象 vue中data是函数而不是对象
  • vue中data为什么必须是函数
    这是因为JavaScript的特性所导致,跟vue本身设计无关,js本身的面向对象编程也是基于原型链和构造函数,而在原型链上添加一般都是一个函数方法并不是添加一个对象,因此在component中,data必须以函数的形式存在,不可以是对象。...
    99+
    2024-04-02
  • vue组件中data为什么是函数
    这篇文章主要介绍“vue组件中data为什么是函数”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue组件中data为什么是函数”文章能帮助大家解决问题。原因:防止多个组件实例对象之间共用一个dat...
    99+
    2023-07-04
  • vue中定义的data为什么是函数
    目录一、new Vue场景二、组件场景总结高频面试题:vue中的data为啥是函数? 答案是:是不是一定是函数,得看场景。并且,也无需担心什么时候该将data写为函数还是对象,因为v...
    99+
    2024-04-02
  • 一文带你简单理解Vue的data为何只能是函数
    目录前言1.Vue3中的data2.vue中的data3.证明data是函数以及原理实现4.如果data必须是一个对象呢?总结前言 在学习vue的时候vue2只有在组件中严格要求da...
    99+
    2022-11-13
    vue data 函数 vue data是函数
  • vue组件中data为啥是函数
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。一、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象,也可以是一个函数const app = new Vue({ el:"#...
    99+
    2023-05-14
    vue3 Vue
  • Java为什么占用四个字节你知道吗
    目录简单了解计算机为什么要采用二进制表示信息:二进制位分析那么为什么int就占了4个字节呢?问:所有的int都是占四个字节吗?总结简单了解计算机为什么要采用二进制表示信息: 因为计算...
    99+
    2024-04-02
  • ASP函数框架path:你需要知道的一切。
    在ASP(Active Server Pages)中,函数框架path是一个非常重要的概念。它用于指定应用程序的根目录,从而帮助开发人员在编写ASP代码时更加方便地访问文件和文件夹。 本文将详细介绍ASP函数框架path的概念、作用和用法...
    99+
    2023-10-19
    函数 框架 path
  • 你真的知道什么是arguments吗
    是的,arguments 是一个特殊的 JavaScript 对象,它包含了函数被调用时传递给函数的所有参数。它类似于一个数组,可以...
    99+
    2023-09-21
    arguments
  • JS 数组sort方法的升序为什么是a-b你知道吗
    简单使用 sort 方法的时候,是按位排序的,比如: var arr = [1, 22, 15, 32, 4, 5] arr.sort()//[1,15,22,32,...
    99+
    2024-04-02
  • C/C++的各种字符串函数你知道几个
    目录一、strrchr参数 返回值示例输出二、atoi参数 返回值示例输出三、strcat参数 返回值示例输出四、strstr参数返回值示例输出五、st...
    99+
    2024-04-02
  • JVM:你知道为什么对象一定在堆中分配吗
    目录JVM运行时数据区域:逃逸分析技术存在的问题:逃逸分析JVM参数设置:总结JVM运行时数据区域: JVM运行时的数据区域可以分为:虚拟机栈、本地方法栈、方法区、程序计数器、堆。一...
    99+
    2024-04-02
  • 这三个好用的python函数你不能不知道!
    目录一、前言二、map()三、filter()四、reduce()一、前言 我想介绍这些功能的主要原因是它们可以帮助您避免编写循环。在某些情况下,循环运行可能会很昂贵,除此之外,这些...
    99+
    2024-04-02
  • 你知道吗?Java 函数和 Linux Shell 可以一起用!
    Java 是一种广泛应用于企业级应用程序开发的编程语言。而 Linux Shell 则是 Linux 操作系统中的命令行解释器。这两种技术在不同的场景下都有着广泛的应用。但是,下面,我们来一起探索一下这个有趣的主题。 Java 函数 在 ...
    99+
    2023-08-10
    函数 linux shell
  • 作为一个Java工程师,你应该要知道SPI机制
    什么是 SPISPI是Service Provider Interface的简称,是JDK默认提供的一种将接口和实现类进行分离的机制。这种机制能将接口和实现进行解耦,大大提升系统的可扩展性。SPI机制约定:当一个Jar包需要提供一个接口的实...
    99+
    2023-06-02
  • JavaScript的原型是什么你知道吗
    目录先看三个对象一、构造函数(对象): 二、实例对象三、原型对象:再看三个属性:一、prototype:二、__proto__三、constructor属性原型链总结:先看...
    99+
    2024-04-02
  • Java的springcloud Sentinel是什么你知道吗
    目录Sentinel 是什么?概述Sentinel 的历史:历史Sentinel 分为两个部分:两部分基本概念及作用基本概念:主要作用:Sleuth概述zipkin分布式监控客户端基...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作