vue中为什么在组件内部data是一个函数而不是一个对象
实例和组件中 data 的区别？
实际上在实例中的 data 是可以写成对象的形式也可以写成函数的形式。 只有在组件中 data 必须写成函数的形式。
<script>
export default {
data: {},
};
</script>如果我们在组件中将 data 写成函数的形式，控制台就会报错。
组件中 data 定义对象和函数区别？
当我们定义好一个组件的时候，vue 最终都会通过 vue.extend() 构建成组件实例，这里我们采用构造函数的形式模拟。
<script>
// 模仿构造函数，定义data属性采用对象的形式
function Component() {}
Component.prototype.data = {
count: 1,
};
// 创建两个组件实例
const componentA = new Component();
const componentB = new Component();
// 当修改其中一个组件的中的data值的时候，另一个组件的data值会一起改变
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>分析： 产生上面的原因是两个组件实例共享同一内存地址，当修改 componentA 的时候，componentB 会同步发生改变。
如果采用函数的写法？
<script>
// 模仿构造函数，定义data属性采用函数的形式
function Component() {
this.data = this.data();
}
Component.prototype.data = function () {
return {
count: 1,
};
};
// 创建两个组件实例
const componentA = new Component();
const componentB = new Component();
// 当修改其中一个组件的中的data值的时候，另一个组件的data值不会一起改变
componentA.data.count = 2;
console.log(componentB.data.count); // 1
</script>分析：这是由于，函数返回的对象地址并不相同，这样每个组件中 data 都是独立的，这样修改其中一个组件不会影响其他组件中的 data 值。
总结
- 在根组件中 data 可以是函数或者对象，不会造成数据污染。
- 在组件中 data 必须是函数的写法，这样返回的组件实例中 data 都是独立的对象，不会发生数据污染。
扩展
vue 组件data用箭头函数行不行？
可以使用箭头函数，但是需要注意 this 指向。如果使用箭头函数，data 函数中的 this 不会指向 vue 实例，如果需要访问 vue 实例，可以通过 data 函数的参数来实现。
data: vm => ({ a: vm.myProp })作者：
实例和组件中 data 的区别？
实际上在实例中的 data 是可以写成对象的形式也可以写成函数的形式。 只有在组件中 data 必须写成函数的形式。
<script>
export default {
data: {},
};
</script>
复制代码如果我们在组件中将 data 写成函数的形式，控制台就会报错。
组件中 data 定义对象和函数区别？
当我们定义好一个组件的时候，vue 最终都会通过 vue.extend() 构建成组件实例，这里我们采用构造函数的形式模拟。
<script>
// 模仿构造函数，定义data属性采用对象的形式
function Component() {}
Component.prototype.data = {
count: 1,
};
// 创建两个组件实例
const componentA = new Component();
const componentB = new Component();
// 当修改其中一个组件的中的data值的时候，另一个组件的data值会一起改变
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>
复制代码分析： 产生上面的原因是两个组件实例共享同一内存地址，当修改 componentA 的时候，componentB 会同步发生改变。
如果采用函数的写法？
<script>
// 模仿构造函数，定义data属性采用函数的形式
function Component() {
this.data = this.data();
}
Component.prototype.data = function () {
return {
count: 1,
};
};
// 创建两个组件实例
const componentA = new Component();
const componentB = new Component();
// 当修改其中一个组件的中的data值的时候，另一个组件的data值不会一起改变
componentA.data.count = 2;
console.log(componentB.data.count); // 1
</script>
复制代码分析：这是由于，函数返回的对象地址并不相同，这样每个组件中 data 都是独立的，这样修改其中一个组件不会影响其他组件中的 data 值。
总结
- 在根组件中 data 可以是函数或者对象，不会造成数据污染。
- 在组件中 data 必须是函数的写法，这样返回的组件实例中 data 都是独立的对象，不会发生数据污染。
扩展
vue 组件data用箭头函数行不行？
可以使用箭头函数，但是需要注意 this 指向。如果使用箭头函数，data 函数中的 this 不会指向 vue 实例，如果需要访问 vue 实例，可以通过 data 函数的参数来实现。
data: vm => ({ a: vm.myProp })到此这篇关于vue中为什么在组件内部data是一个函数而不是一个对象？的文章就介绍到这了,更多相关vue中data为什么是函数而不是对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue3接口数据赋值对象,渲染报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了浅谈vue中$bus的使用和涉及到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,下面这篇文章主要给大家介绍了关于vue自定义封装指令以及实际使用的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了使用vue的transition完成滑动过渡的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了如何使用vue自定义指令构建拖放插件，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了el-table 表格分页序号问题小结,本文通过实例代码图文效果展示给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了vue弹窗里面使用echarts不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
Vue中的mount中有两个函数,第一个函数执行完后给data中的userInfo赋值,但是第二个函数获取userInfo时是空值,这种情况可能是因为第二个函数在获取 userInfo 时发生在第一个函数执行完之前,所以本文给大家介绍了Vue中的函数同步执行导致的数据获取失败问题处理办法2024-08-08
这篇文章主要介绍了Vue.js实现拖放效果的实例的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
Vue+axios+WebApi+NPOI导出Excel文件实例方法
在本篇文章里小编给大家整理关于Vue+axios+WebApi+NPOI导出Excel文件的知识点以及实例代码，需要的朋友们参考下。2019-06-06
最新评论