«

vue在组件内部data是一个函数而不是一个对象的原因是什么

时间:2024-5-24 15:38     作者:韩俊     分类: Javascript


这篇“vue在组件内部data是一个函数而不是一个对象的原因是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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 =&gt; ({ a: vm.myProp })

作者:

实例和组件中

data
的区别?

实际上在实例中的

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

&lt;script&gt;
export default {
  data: {}, 
};
&lt;/script&gt;

如果我们在组件中将

data
写成函数的形式,控制台就会报错。

组件中 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
值。

总结

    在根组件中 data 可以是函数或者对象,不会造成数据污染。

    在组件中 data 必须是函数的写法,这样返回的组件实例中 data 都是独立的对象,不会发生数据污染。

扩展

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

可以使用箭头函数,但是需要注意

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

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

标签: javascript vue

热门推荐