Vue集成ECharts时mounted钩子写法错误导致编译失败，求助

嘿，我一眼就看到问题出在哪了——你的mounted生命周期钩子的语法写错啦！

错误原因 #

Vue的生命周期钩子（比如mounted、created这类）要求是一个函数，但你写成了包含this.init()的对象{this.init()}。JavaScript里this是保留字，不能作为对象的键名，这就是编译器报错“this is a reserved word”的直接原因。

修正步骤 #

1. 修复mounted的语法
   把错误的写法：

mounted: {this.init()},

改成函数形式（两种写法都可以）：

// ES6简写形式
mounted() {
  this.init()
},
// 或者传统函数写法
mounted: function() {
  this.init()
},

2. 修正变量拼写错误
   你在init方法里写了this.charts.setOption(this.option)，这里多了个s，应该是this.chart.setOption(this.option)，否则会触发“未定义charts”的错误。

3. 补充必要的Props定义
   你的组件用到了this.height、this.width、this.id、this.option这些变量，但没有声明它们。这些应该作为组件的Props来接收父组件传递的值，否则运行时会报错。

完整修正后的代码 #

<script>
export default {
  name: 'Charts',
  // 补充Props定义，确保能接收外部传入的属性
  props: {
    id: {
      type: String,
      required: true
    },
    height: {
      type: String,
      default: '400px'
    },
    width: {
      type: String,
      default: '100%'
    },
    option: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      chart: ''
    }
  },
  computed: {
    style () {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  // 修正后的mounted钩子
  mounted() {
    this.init()
  },
  methods: {
    init () {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      // 修正chart变量的拼写错误
      this.chart.setOption(this.option)
    }
  }
}
</script>

这样修改后，重新执行npm run dev应该就能正常编译了。记得在父组件使用这个Chart组件时，要传递id和option这些必填属性哦！

内容的提问来源于stack exchange，提问作者Sun Chuanneng