<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{message}}</div>
<script>
const sayHello = {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
}
Vue.createApp(sayHello).mount('#app');
</script>





Vue.createApp(sayHello).mount('#app');

Vue3 中，Vue.createApp 用于创建一个 Vue 应用实例 
它的入参是一个组件选项对象或根组件定义

Vue.createApp(options)

options: 一个对象，用于定义根组件的配置  
这个对象可以包含 Vue 组件的常见选项，
例如 data、methods、computed、watch、setup（用于 Composition API）、template 或 render 函数等  
这个对象会被作为根组件的定义  



入参详解
options 对象可以包含以下常见属性：

1. data
类型：Function
作用：定义组件的响应式数据  

data() {
  return {
    message: 'Hello, Vue!'
  };
}


2. methods
类型：Object
作用：定义组件的方法  
methods: {
  greet() {
    alert(this.message);
  }
}


3. computed
类型：Object
作用：定义计算属性  

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}


4. watch
类型：Object
作用：监听数据的变化  

watch: {
  message(newValue, oldValue) {
    console.log('Message changed from', oldValue, 'to', newValue);
  }
}

5. template
类型：String
作用：定义组件的模板  
template: `{{ message }}`

6. render
类型：Function
作用：使用 JavaScript 直接编写渲染逻辑（通常用于更复杂的场景）  

render() {
  return Vue.h('div', this.message);
}

7. setup
类型：Function
作用：用于 Composition API，替代 data、methods 等选项  

setup() {
  const message = Vue.ref('Hello, Vue!');
  return { message };
}


8. components
类型：Object
作用：注册子组件  

components: {
  ChildComponent
}


9. props
类型：Array 或 Object
作用：定义组件接收的 props  

props: ['title']

10. emits
类型：Array 或 Object
作用：定义组件可以触发的事件  

emits: ['update']



返回值
Vue.createApp 返回一个应用实例，该实例提供了以下常用方法：

.mount(selector): 将应用挂载到指定的 DOM 元素上  
示例：.mount('#app')

.component(name, component): 注册全局组件  
示例：.component('my-component', MyComponent)

.directive(name, directive): 注册全局指令  
示例：.directive('focus', FocusDirective)

.use(plugin): 安装插件  
示例：.use(VueRouter)