eval 的替换，以及在 vue 中动态触发某个字符串事件

动态触发一个字符串事件，一般使用 eval，但是由于该方法权限太大，会导致安全隐患，因此极不推荐使用

代替 eval 的方法

1.处理 json

使用 JSON.parse() 代替

2.对象动态取值和赋值

例如：

var a = {
    x: 'xxxx',
    y: 'yyyy'
}
var b = 'x'
// 想要获取 a 下面的 b 的值
eval('a.' + b)
// 可以使用下面替换
a[b]

3.处理请求返回的结果，需要执行 js 的情况

使用 eval 的变种来处理

export function evil(str) {
  const fn = Function;
  return new fn('return ' + str)();
}

vue 中动态触发事件

例子：

<template>
  <div v-for="(method, methodName) in map" @click="triggerMethod(method, id)">{{methodName}}</div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        id: 1,
        map: {
          a: 'clickA',
          b: 'clickB',
        }
      }
    },
    methods: {
      triggerMethod(method, id) {
        // 下面代码等同于 eval(`this.${method}(${id})`)
        this[method](id)
      },
      clickA(id) {
        console.log('a', id)
      },
      clickB(id) {
        console.log('b', id)
      }
    }
  }
</script>

主要是通过第二种方式解决的，因为在 vue 中需要使用this这个上下文，所以不能用第三种方案

赏

谢谢关注

支付宝

微信

• 本文作者： kriss
• 本文链接： http://www.kriss.pub/2018/08/29/vue-eval/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！