为何VueJS中不同CDN对应的代码结构差异巨大？

核心问题：Vue版本差异 #

你遇到的问题本质是Vue 3和Vue 2的API完全不兼容：

• unpkg链接https://unpkg.com/vue@3/dist/vue.global.js指向的是Vue 3全局构建包，对应的API是Vue.createApp()创建应用实例，再通过mount()方法挂载到DOM；且data必须是返回对象的函数。
• jsdelivr链接https://cdn.jsdelivr.net/npm/vue/dist/vue.js默认指向Vue 2的构建包，对应的API是直接new Vue()实例化，通过el选项指定挂载目标；根实例的data可以直接是对象（组件中data仍需是函数）。

解决代码兼容问题 #

如果想统一使用Vue 3，只需把jsdelivr的CDN链接替换为Vue 3版本：

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

替换后，你之前用unpkg的Vue 3代码就能正常运行。

学习版本选择建议 #

• 优先学Vue 3：它是Vue当前的主力版本，拥有Composition API、更优的性能、更好的TypeScript支持等新特性，官方也在持续维护更新，生态工具（如Vue Router 4、Pinia）都基于Vue 3开发。
• 若你看的书籍是基于Vue 2的，可以结合Vue官方迁移指南，把书中的Vue 2写法对应转换为Vue 3的写法，避免混淆。

两种版本的示例代码 #

Vue 3（unpkg/兼容的jsdelivr链接）

<!DOCTYPE html>
<html>
  <head>
    <title>Vue 3</title>
  </head>
  <body>
    <div id="app">
      {{ propertyName }}
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    let app=Vue.createApp({
      data: function(){
        return {
          propertyName: 'Hello from Getting to Know Vue.js!'
        }
      }
    })
    app.mount('#app')
  </script>
  </body>
</html>

Vue 2（原jsdelivr链接）

<!DOCTYPE html>
<html>
  <head>
    <title>Vue 3</title>
  </head>
  <body>
    <div id="app">
      {{ propertyName }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        propertyName: 'Hello from Getting to Know Vue.js!'
      }
    });
  </script>
  </body>
</html>

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