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

前言

我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。

function Component(){
 this.data = this.data
}
Component.prototype.data = {
  name:'jack',
  age:22,
}

首先我们达成一个共识（没有这个共识，请补充下 js 原型链部分的知识）：

  • 实例它们构造函数内的this内容是不一样的。
  • Component.prototype ，这类底下的方法或者值，都是所有实例公用的。

解开疑问

基于此，我们来看看这个问题：

function Component(){

}
Component.prototype.data = {
  name:'jack',
  age:22,
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)

此时，componentA 和 componentB data之间指向了同一个内存地址，age 都变成了 55， 导致了问题！

接下来很好解释为什么 vue 组件需要 function 了：

function Component(){
 this.data = this.data()
}
Component.prototype.data = function (){
  return {
  name:'jack',
  age:22,
}
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)

此时，componentA 和 componentB data之间相互独立, age 分别是 55 和 22 ，没有问题！

总结

自己突然对这个问题懵逼，不过事后想了想还是自己基础知识忘得太快。以前学习 js 的时候，最基础的：构造函数内和原型之间的区别都模糊了。想不到 vue 这个小问题让我温故而知新了一次。

到此这篇关于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为什么是一个函数

    你知道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组件基础用法详解

    Vue组件概述 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦. 在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符

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

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

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

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

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

  • Vue组件开发初探

    注册一个组件 有两种方式可以注册一个组件,第一种是全局注册,第二种是局部注册 # 全局注册 Vue.component('my-component',{ template: '<span>Hello</span>' }) # 局部注册 var child = { template: '<span>Hello</span>' } new Vue({ // ··· components:{ my-component: child } }) 注意:组件的注册必须要

  • vue 组件使用中的一些细节点

    细节一 基础例子 运行结果: 以上大家都懂,这边就不多说,回到代码里,有时候我们需要 tbody 里面每一行是一个子组件,那我们代码可以怎么写呢?我们可以这样写,定义一个全局组件,如下: 然后我们在 body 里面可以这么调用: 运行结果: 可以看到 row 是有打印出来了,但它实际上里面没有任务内容,那我们的问题出在哪呢?回到代码我们发现我们在创建 vue 实例的时候没有指定要挂载的点,所以我们通过 el 来指定 vue 接管的 Dom ,如下: 运行结果: 感觉上没有问题,但真的是这样吗?我

  • 详解vue组件基础

    什么是组件 组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的

  • vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略

    1. 子类父类 2.Vue.extend()      //创建vue的子类 组件的语法器 Vue.extend(options) Profile().$mount('#app') // 挂在app上,并替换app 新建 initExend ==> Vue.extend 3. strat.data ==> if(!vm){子组件中data的值是一个方法function ==> mergeDataorFn()} // 数据的合并 ==> else {} //通过实例绑定的data 实

随机推荐