码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-30 23:04:37      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:div   strong   color   报错   ret   否则   模拟   col   one   

组件意在 复用 , 若为 对象, 则会相互干扰. 且 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 必须为函数 ?

标签:div   strong   color   报错   ret   否则   模拟   col   one   

原文地址:https://www.cnblogs.com/aisowe/p/11437212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!