怎样理解 Vue 组件中 data 必须为函数 ?

Posted aisowe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样理解 Vue 组件中 data 必须为函数 ?相关的知识,希望对你有一定的参考价值。

组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下

 

对象

// 模拟创建组件
var Component= function() 

// 模拟使用对象作data
Component.prototype.data =  a: 1 

// 模拟使用组件
var component1 = new Component()
var component2 = new Component()

// 发现 data 共用, 相互影响
component1.data.a = 2
component2.data.a   // 2

 

函数

// 模拟创建组件
var Component= function() ;

// 模拟使用函数作data
Component.prototype.data = function()  return  a: 1  ;

// 模拟使用组件
var component1 = new Component()
var component2 = new Component()

// 两者互不影响
component1.data.a = 2
component2.data.a // 1

 

以上是关于怎样理解 Vue 组件中 data 必须为函数 ?的主要内容,如果未能解决你的问题,请参考以下文章

Vue 组件中data的类型为什么必须是函数

为什么vue组件中data必须是一个函数?

vue组件中为什么data必须是一个函数

vue组件中为什么data必须是一个函数

Vue组件 为什么data必须是函数

深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数