vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue中data为什么是函数而不是对象

vue中为什么在组件内部data是一个函数而不是一个对象

作者：Mh

这篇文章主要介绍了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 值。

总结

扩展

vue 组件data用箭头函数行不行？

可以使用箭头函数，但是需要注意 this 指向。如果使用箭头函数，data 函数中的 this 不会指向 vue 实例，如果需要访问 vue 实例，可以通过 data 函数的参数来实现。

data: vm =&gt; ({ a: vm.myProp })

作者：

实例和组件中 data 的区别？

实际上在实例中的 data 是可以写成对象的形式也可以写成函数的形式。 只有在组件中 data 必须写成函数的形式。

&lt;script&gt;
export default {
  data: {}, 
};
&lt;/script&gt;
复制代码

如果我们在组件中将 data 写成函数的形式，控制台就会报错。

image.png

组件中 data 定义对象和函数区别？

当我们定义好一个组件的时候，vue 最终都会通过 vue.extend() 构建成组件实例，这里我们采用构造函数的形式模拟。

&lt;script&gt;
// 模仿构造函数，定义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
&lt;/script&gt;
复制代码

分析： 产生上面的原因是两个组件实例共享同一内存地址，当修改 componentA 的时候，componentB 会同步发生改变。

如果采用函数的写法？

&lt;script&gt;
// 模仿构造函数，定义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
&lt;/script&gt;
复制代码

分析：这是由于，函数返回的对象地址并不相同，这样每个组件中 data 都是独立的，这样修改其中一个组件不会影响其他组件中的 data 值。

总结

扩展

vue 组件data用箭头函数行不行？

可以使用箭头函数，但是需要注意 this 指向。如果使用箭头函数，data 函数中的 this 不会指向 vue 实例，如果需要访问 vue 实例，可以通过 data 函数的参数来实现。

data: vm =&gt; ({ a: vm.myProp })

到此这篇关于vue中为什么在组件内部data是一个函数而不是一个对象？的文章就介绍到这了,更多相关vue中data为什么是函数而不是对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文