Vue2中给实例el范围外的元素绑定@click事件会产生什么效果

问题描述 #

现有可运行的Vue3环境，无法测试Vue2相关场景，咨询以下问题：若在Vue2实例el属性指定的挂载范围外的元素上使用@click绑定点击事件，会出现什么情况？
备选答案如下：

• a) 触发报错导致HTML页面无法展示
• b) @click仍会被浏览器识别为点击处理函数，点击时弹出alert()提示框
• c) 实例的el范围会自动扩展匹配对应选择器
• d) 相关代码不会被处理，点击事件不会触发

示例代码如下：

<div id="app">
  <button class="add" @click="click">Press</button>
</div>

<div id="otherapp">
  <button class="add" @click="click">Press</button>
</div>

<script>
var app = new Vue ({
  el: "#app",
  methods: {
    click() {
      alert("click triggered")
    }
  }
})
</script>

问题：点击id为otherapp容器内的按钮（未被实例el配置包含）时，会出现什么结果？

正确解答 #

正确答案为 d) 相关代码不会被处理，点击事件不会触发

原因说明 #

1. Vue2实例的生效范围严格限定在el指定的挂载节点及其内部子节点，实例初始化时只会扫描该范围内的DOM，解析Vue专属语法（比如@click指令、插值表达式等），挂载范围外的DOM不会被Vue处理。
2. @click是Vue自定义的指令语法，原生浏览器本身无法识别该属性，不会自动将其作为点击事件回调处理。
3. 其他选项错误原因：
   • 选项a错误：Vue不会因为范围外存在未处理的Vue语法就抛出致命报错，页面可以正常渲染
   • 选项b错误：浏览器不识别@click属性，不会触发对应的回调
   • 选项c错误：Vue实例不会自动扩展el的挂载范围，初始化完成后挂载范围就固定了

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