vue 使用动态变量名的一些心得

 

 eval() 和 this[`${'xxxx'}`]

eval()

eval()方法传参可以是变量，也可以是字符串，还可以是字符串和变量的拼接

eg: eval("this."+this.type)

我这里 this.type 存的是 echarts 的类型，例如：BarWithBackground(柱状图)、NightingaleChart(南丁格尔玫瑰饼图)等

eval("this."+this.type) 将参数解析为: this.BarWithBackground 或者 this.NightingaleChart等

总结: eval() 方法将参数中的字符串和变量进行拼接，拼接形成的结果作为一段代码，将代码的结果返回 eval("this."+this.type)=>eval("this."+BarWithBackground )=>eval("this.BarWithBackground ")=>this.BarWithBackground

注意：eval()获得的变量为形参，不是实参。只能取值，不能赋值

this[`${'xxxx'}`]

这种语法有两种写法：

this[`${this.type}`] 和 this[`${'type'}`]

this.type 依然是存的 echarts 类型，例如：BarWithBackground(柱状图)、NightingaleChart(南丁格尔玫瑰饼图)等

1） this[`${this.type}`] 将 this.type 指向的值，BarWithBackground、NightingaleChart等，作为this的取值的对象 this[`${this.type}`]=>this[BarWithBackground]=>this.BarWithBackground

2） this[`${'type'}`] 如果加引号，type就被视为一个字符串，作为this的取值的对象 this[`${'type'}`]=>this[type]=>this.type