目录实例和组件中 data 的区别?组件中 data 定义对象和函数区别?如果采用函数的写法?总结扩展Vue 组件data用箭头函数行不行?组件中 data 定义
实际上在实例中的 data
是可以写成对象的形式也可以写成函数的形式。 只有在组件中 data
必须写成函数的形式。
<script>
export default {
data: {},
};
</script>
如果我们在组件中将 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
值。
可以使用箭头函数,但是需要注意 this
指向。如果使用箭头函数,data
函数中的 this
不会指向 vue
实例,如果需要访问 vue
实例,可以通过 data
函数的参数来实现。
data: vm => ({ a: vm.myProp })
作者:
data
的区别?实际上在实例中的 data
是可以写成对象的形式也可以写成函数的形式。 只有在组件中 data
必须写成函数的形式。
<script>
export default {
data: {},
};
</script>
复制代码
如果我们在组件中将 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
值。
可以使用箭头函数,但是需要注意 this
指向。如果使用箭头函数,data
函数中的 this
不会指向 vue
实例,如果需要访问 vue
实例,可以通过 data
函数的参数来实现。
data: vm => ({ a: vm.myProp })
到此这篇关于vue中为什么在组件内部data是一个函数而不是一个对象?的文章就介绍到这了,更多相关vue中data为什么是函数而不是对象内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue中为什么在组件内部data是一个函数而不是一个对象
本文链接: https://www.lsjlt.com/news/211213.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0