在日常操作或是项目的实际应用中，有不少朋友对于“Vue组件的date需是函数为什么，如何用代码说明”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

前言

我们需要先复习下原型链的知识，其实这个问题取决于 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 ，没有问题！

总结

现在大家对于Vue组件的date需是函数为什么，如何用代码说明的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS事件监听是什么，如何设置事件监听

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要整理了事件监听的相关问题，包括了什么是事件监听、设置事件监听的方法等等内容，下面一起来看一下，希望对大家有帮助。

• 使用JS制作图片轮播切换的具体代码是什么

  这篇文章主要为大家详细介绍了原生javascript实现图片轮播切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 如何掌握Node express路由的使用，有哪些知识

  本篇文章就来给大家介绍一些你不知道的Node express 路由使用技巧，希望对大家有所帮助！

• Angular弹出模态框怎样实现，详细方法是什么

  在项目开发过程中，因为项目的需要由时候必须要设置弹出的视图，而Angular实现的方式有哪几种呢？今天爱站技术频道小编就为大家带来了Angular弹出模态框的两种方式，一起进入下文学习吧！

• vue中常见的开发技巧你了解多少？

  这篇文章主要给大家分享的是vue中常见的开发技巧，小编觉得比较实用，对大家学习或者工作都有一定的帮助，有需要的朋友大家可以借鉴参考，接下来我们一起了解看看吧。