Vue组件为什么data必须是一个函数
2020-06-20 11:48
176 查看
前言
我们需要先复习下原型链的知识,其实这个问题取决于 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是函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- 为什么vue中data必须是一个函数
- Vue组件中data选项为什么必须是函数
- vue--为什么data属性必须是一个函数
- Vue 组件中的data为什么必须是函数
- 为什么Vue组件中的data是一个函数原理(详细易懂)
- Vue 组件中 data 为什么必须是函数?
- vue组件中 data 为什么是一个函数
- 为什么vue中data必须是一个函数
- Vue的学习总结自测(四)——v-model的原理,组件data为什么是一个函数,keep-alive,父组件监听子组件的生命周期
- Vue的组件中data必须是函数,其返回值是一个对象
- Vue组件data必须是函数的理解
- vue-为什么子组件中的data选项必须是函数?
- Vue 组件 data为什么是函数?
- 组件data存放及为什么必须是函数~VUE学习笔记(4)
- 解析:vue.js中组件的data数据为什么是函数?
- Vue 组件 data为什么是函数?
- Vue组件中的data必须是一个function的原因浅析
- 为什么组件data必须用函数表达,深入理解
- vue 为什么组件的data要写成返回对象的函数
- 解析:vue.js中组件的data数据为什么是函数?