你知道vue 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 函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 解析vue data不可以使用箭头函数问题

    首先需要明确,a() {}和 b: () => {}是不同的 let obj = { a() {}, // 相当于 a:function() {}, b: () => {} } 1 VUE.js 源码解析 注意此处只设计核心代码 这段代码也是UMD实现原理,本文这里不是重点,有兴趣的可以自行探究. (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined'

  • Vue组件为什么data必须是一个函数

    前言 我们需要先复习下原型链的知识,其实这个问题取决于 js ,而并非是 vue . function Component(){ this.data = this.data } Component.prototype.data = { name:'jack', age:22, } 首先我们达成一个共识(没有这个共识,请补充下 js 原型链部分的知识): 实例它们构造函数内的this内容是不一样的. Component.prototype ,这类底下的方法或者值,都是所有实例公用的. 解开疑问 基

  • 详解Vue的组件中data选项为什么必须是函数

    官方解释 data 必须是函数 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用.只有一个例外:data 必须是函数.实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) 那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数.但理解这种规则为何存在也是很有益处的,

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

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

  • Vue组件中的data必须是一个function的原因浅析

    组件可以有自己的data,并且data必须是一个function. 在下面这个例子中,data 返回了一个在外部定义的对象.并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="

  • Vue的data为啥只能是函数原理详解

    目录 前言 1.Vue3中的data 2.vue中的data 3.证明data是函数以及原理实现 4.如果data必须是一个对象呢? 前言 在学习vue的时候vue2只有在组件中严格要求data必须是一个函数,而在普通vue实例中,data可以是一个对象,但是在vue3出现后data必须一个函数,当时看着官方文档说的是好像是对象的引用问题,但是内部原理却不是很了解,今天通过一个简单的例子来说明为啥data必须是一个函数 参考(vue2data描述) 参考: (vue3data描述) 1.Vue3

  • 用Go+Vue.js快速搭建一个Web应用(初级demo)

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开发环境: 2. 安装node.js以及npm环境: Gin的使用: 为了快速搭建后端应用,采用了Gin作为Web框架.Gin是用Golang实现的一种Web框架,api非常友好,且拥有出色的路由性能和详细的错误提示,如果你想快速开发一个高性能的生产环境,Gin是一个不错的选择. 下载和安装Gin:

  • Vue自定义指令封装节流函数的方法示例

    节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv

  • 说说Vue.js中的functional函数化组件的使用

    Vue.js 组件提供了一个 functional  开关,设置为 true 后,就可以让组件变为无状态.无实例的函数化组件.因为只是函数,所以渲染的开销相对来说,较小. 函数化的组件中的 Render 函数,提供了第二个参数 context 作为上下文,data.props.slots.children 以及 parent 都可以通过 context 来访问. 1 示例 这里,我们用  functional 函数化组件来实现一个智能组件. html: <div id="app"

  • Vue data的数据响应式到底是如何实现的

    研究过程 一般形式 data:{ n:0 } :以这样的方式存储数据,vue能够监听其变化吗?显然是不能的. 使用Obj.defineProperty let data1 = {} Object.defineProperty(data1, 'n', { value: 0 }) 为什么要使用defineProperty呢?这不是把一般形式复杂化了吗? 引出主角getter setter. 如果我们想对数据监听进行处理呢?(假设修改的数据必须>=0) let data2 = {} data2._n

  • vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip

    看看效果叭 解压的文件 上传的文件格式 测试1|||测试1的文字 测试2|||测试2的文字 测试3|||测试3的文字 测试4|||测试4的文字 测试5|||测试5的文字 实现的逻辑如下 上传文件 解析txt 发送内容至百度语音合成 生成文件夹放置本次合成的mp3文件,并压缩成zip 发送zip的地址给前端 使用了 element-ui 的 el-upload 组件 <el-upload v-loading="loading" class="upload-demo&quo

随机推荐