[Vue][:class]Vue动态绑定class错误分析

问题

我使用 :class 动态绑定样式表，出现以上问题

看代码

它的父级我在 Vue 应用里已经绑定了

并且 data 中包含 activeWho 属性

但是它依然报错，说是这个属性没有定义

但是代码能正常工作

可是强迫症看着难受

思考

经过试验以及思考

我终于明白是什么问题了

我们在body后边引用vue写好的js代码，它才会工作

并且在代码里边没有直接操作document的地方

而是使用 new 关键字创建对象

所以一切的document操作在创建vue时进行

此时vue进行分析dom节点

当它分析到 barCurrent: barInfo.activeWho 时

由于创建对象还未完成，自然无法访问这个应用变量

当我删掉 barInfo. 时，代码能正常工作，且不报错

此时解析直接到创建过程中寻找activeWho属性

自然能找到

而不能加对象名，是因为创建时对象并未完全创建，无法访问对象

所以会报错说找不到这个属性的定义

能正常工作是因为当脚本运行完毕后，对象已创建

所以能访问到属性

结论

所以在vue应用绑定的dom里

不要直接使用创建的应用名

但是在下一个应用中，则能使用应用名访问data属性

其实这个原理和js的基础语法息息相关

就像积木一样

单个积木虽然形状简单

但是有不同形状的积木却能创造无限形状