我要评论最近在搞关于前端开发的基础知识归纳，发现了不少经典知识点，那么本篇博文就来分享一个经典的知识点：Vue组件中的data属性值为什么是函数而不是对象。
首先来了解一下Vue组件的使用理念：在Vue组件使用中，组件复用是需要秉承的理念，组件创建好之初就要考虑到后期可复用性，考虑到可复用性，那么就涉及到组件中data数据是要相互独立、互不影响的，不管组件复用多少次，data数据都要被复制一遍，这样当某一处复用的组件数据发生变化的时候，其他地方的复用组件的data数据不受影响。而且由于JS的特性所致的原因，在component中，data属性值必须是以函数的形式存在，而不是对象。
再来看一下在Vue组件中data的属性值是函数，如下所示：
export default {
data() { // data是一个函数, data: function() {}的简写
return {
name: 'sanzhanggui', // 页面要初始化的数据
};
},
};
而不是Vue组件中data的属性值为对象，如下所示：
export default {
data: { // data是一个对象
name: 'sanzhanggui',
},
};
通过上述对比，可以只看出Vue组件中的data属性值是函数而不是一个对象的原因。再根据JS中的对象是引用类型的数据，当多个实例引用同一个对象的时候，只要其中一个实例对该对象进行操作的话，其他实例中的数据也会发生变化；而在Vue中更多的是组件复用思想，需要每个组件都有该组件自己的数据，这样组件之间才不会相互影响干扰。因此，Vue组件中的数据不能写成对象的形式，要写成函数的形式；组件中data写成一个函数，数据以函数返回值来定义，每次组件复用的时候就会返回一个新的data，这样每个组件都有属于该组件的专有空间，各个组件有各自的数据，这样就不会干扰其他组件的运行操作。
在Vue中，每一个.vue文件都是一个组件，可以用作一个个单独的组件来进行复用，如果组件需要复用，那么组件中的data数据就一定会被复用，但是组件复用也不是单纯的在不同界面展示相同数据，所以data的属性值设置为对象的话，其中一处相同的data数据发生改变会造成全局复用的data数据跟着改变，data的属性值设置为函数的话，通过return对返回对象的复制拷贝，新建一个新的空间地址，这样就使每个实例都有单独的对象，即使发生数据改变，也只是在当前实例自己的作用域改变，不会引起其他实例的数据改变，达到实例之间不会相互影响干扰的目的。
再举一个对比写法，如下所示：
①function Func(){
}
Func.prototype.data={
msg:"111",
};
var a1=new Func();
var a2=new Func();
a1.data.msg="222"; //------ 如果data的属性是以对象的形式定义，修改其中一个实例的属性，会引起另一个实例的属性跟着修改
console.log(a1.data.msg); //------ 输出结果为：222
console.log(a2.data.msg); //------ 输出结果为：222
②function Func(){
this.data=this.data();
}
Func.prototype.data=function(){
return{
msg:"111"
}
};
var a1=new Func();
var a2=new Func();
a1.data.msg="222"; //------如果data的属性是以函数的形式去定义，这样每个实例都有自己的作用域，在修改自己数据的时候不会干扰影响其他实例的数据
console.log(a1.data.msg); //------输出结果为：222
console.log(a2.data.msg); //------输出结果为：111
通过上述①②两个写法对比，可以直观的看到为什么组件中的data属性值要写成函数而不是对象。
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
三掌柜的微信公众号：
三掌柜的新浪微博：
本文地址：https://blog.csdn.net/CC1991_/article/details/109351397
您可能感兴趣的文章:
- vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents
- axios 处理 302 状态码的解决方法
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature
- react-native 在新版Xcode（10+）中运行出现的问题： node_modules/react-native/third-party/glog-0.3.4 , C compiler cannot create executables
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论