Vue.js中移除必要}页面正常，保留却无法渲染的原因咨询

这事儿的核心问题出在你写的那些<----注释上——它们不是JavaScript支持的合法注释语法！

让我们拆解两种情况：

1. 保留闭合}时页面崩溃的原因 #

当你保留Vue实例的闭合}后，代码结构变成了：

new Vue({
  // ... 配置内容
}) 
<---- 移除这个必要的闭合}会导致Vue实例不完整，但页面能正常渲染！
<------ 保留该}时，Vue完全无法渲染页面！这是为什么？
;

这里的<----内容没有被包裹在//（单行注释）或者/* */（多行注释）里，会被JavaScript引擎当成可执行代码的一部分。而<是比较运算符，后面没有合法的操作数，直接触发了语法错误，导致整个JavaScript代码执行中断，Vue实例根本没机会初始化，自然页面就渲染异常了，控制台也会报语法错误。

2. 移除闭合}时页面能渲染的原因 #

当你移除那个闭合}后，代码变成了：

new Vue({
  // ... 配置内容
<---- 移除这个必要的闭合}会导致Vue实例不完整，但页面能正常渲染！
<------ 保留该}时，Vue完全无法渲染页面！这是为什么？
);

这时候虽然Vue的配置对象没有正确闭合，属于语法错误，但浏览器的JavaScript引擎有一定的容错机制，可能尝试忽略后面的非法内容，勉强初始化了Vue实例。不过这只是偶然的容错行为，这种写法本质上还是错误的，随时可能在不同浏览器或者Vue版本里失效。

把你的注释改成JavaScript合法的格式就行：

new Vue({
 el:'#punch_game',
 data:{
  health:100,
  ended:false
 },
 methods:{
  punch:function(){
   this.health-=10;
   if(this.health <=0){
    this.ended=true;
   }
  },
  restart:function(){
   this.health=100;
   this.ended=false;
  }
 }
}) 
// <---- 移除这个必要的闭合}会导致Vue实例不完整，但页面能正常渲染！
// <------ 保留该}时，Vue完全无法渲染页面！这是为什么？
;

这样既保留了你的注释内容，又不会触发语法错误，Vue实例就能正常初始化和渲染页面了。

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