使用CDN引入Vue3时应用无法运行，求问题排查及替代方案

一、你的代码存在的问题及修正 #

你的代码有两个关键错误：

1. 全局引入Vue3后，createApp方法属于Vue全局对象，不能直接调用createApp，需要写成Vue.createApp。
2. Vue3中如果不用<script setup>或setup选项，需要用选项式API的data选项声明响应式数据，不能直接在组件根对象里定义变量。

修正后的完整代码：

<html>
<head>
</head>
<body>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  Vue.createApp({
    // 选项式API：用data选项声明响应式数据
    data() {
      return {
        message: "hello !"
      }
    }
  }).mount('#app')
</script>

</body>
</html>

二、替代setup/ref的实现方案 #

除了官方文档提到的setup和ref（组合式API写法），你可以使用Vue3兼容的选项式API，这也是Vue2的传统写法，在CDN场景下同样适用：

1. 基础响应式数据（data选项） #

通过data函数返回需要响应式的变量，Vue会自动将其转为响应式对象：

Vue.createApp({
  data() {
    return {
      count: 0,
      username: 'test'
    }
  }
}).mount('#app')

2. 方法定义（methods选项） #

如果需要处理交互逻辑，把方法写在methods选项里：

<div id="app">
  <p>{{ count }}</p>
  <button @click="addCount">点击加1</button>
</div>

<script>
Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addCount() {
      this.count++
    }
  }
}).mount('#app')
</script>

3. 计算属性（computed选项） #

处理需要动态计算的逻辑，用computed选项：

<div id="app">
  <p>原始值: {{ num }}</p>
  <p>翻倍后: {{ doubledNum }}</p>
</div>

<script>
Vue.createApp({
  data() {
    return {
      num: 5
    }
  },
  computed: {
    doubledNum() {
      return this.num * 2
    }
  }
}).mount('#app')
</script>

这种选项式API写法不需要用到setup和ref，完全适配CDN引入的Vue3，写法更贴近Vue2的习惯，适合快速上手。

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