3.1　创建应用程序实例

在一个使用Vue.js框架的页面应用程序中，最终都会创建一个应用程序的实例对象并挂载到指定DOM上。这个实例将提供应用程序上下文，应用程序实例装载的整个组件树将共享相同上下文。

在Vue.js 3.x中，应用程序的实例创建语法规则如下：

    Vue.createAPP(App)

应用程序的实例充当了MVVM模式中的ViewModel。createAPP()是一个全局API，它接受一个根组件选项对象作为参数，该对象可以包含数据、方法、组件生命周期钩子等，然后返回应用程序实例本身。Vue.js 3.x引入createAPP()是为了解决Vue.js 2.x全局配置代理的一些问题。

创建了应用程序的实例后，可以调用实例的mount()方法，制定一个DOM元素，在该DOM元素上装载应用程序的根组件，这样这个DOM元素中的所有数据变化都会被Vue框架所监控，从而实现数据的双向绑定。

    Vue.createAPP(App).mount('#app')

【例3.1】创建应用程序实例（源代码\ch03\3.1.html）。

    <div id="app">
        <!—简单的文本插值-->
        <h2>{{ message }}</h2>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
        const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                     message:'天接云涛连晓雾,星河欲转千帆舞。'
               }
            }
            //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在组件选项对象中会有一个data()函数，Vue在创建组件实例时会调用该函数。data()函数返回一个数据对象，Vue会将这个对象包装到它的响应式系统中，即转化为一个代理对象，此代理使Vue能够在访问或修改属性时，执行依赖项跟踪和改进通知，从而自动渲染DOM。数据对象的每一个属性都会被视为一个依赖项。

在谷歌浏览器中运行程序3.1.html，结果如图3-1所示。