这篇“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 => ({ 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 })