![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
上QQ阅读APP看书,第一时间看更新
4.1 创建应用程序实例
在一个使用Vue.js框架的页面应用程序中,最终都会创建一个应用程序的实例对象并挂载到指定DOM上。这个实例将提供应用程序上下文,应用程序实例装载的整个组件树将共享相同上下文。
在Vue 3.0中,应用程序的实例创建语法规则如下:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P52_165333.jpg?sign=1739182530-pLELU5cpx7Fd58JeEkSRdS1Zrkx4sDjQ-0-cbac3252d0cc23df6188ebb31a55a99a)
应用程序的实例充当了MVVM模式中的ViewModel。createAPP()是一个全局API,它接受一个根组件选项对象作为参数,该对象可以包含数据、方法、组件生命周期钩子等,然后返回应用程序实例本身。Vue 3.0引入createAPP()是为了解决Vue 2.x全局配置代理的一些问题。
创建了应用程序的实例后,可以调用实例的mount()方法,制定一个DOM元素,在该DOM元素上装载应用程序的根组件,这样这个DOM元素中的所有数据变化都会被Vue框架所监控,从而实现数据的双向绑定。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P52_165334.jpg?sign=1739182530-MZaAg4RO6EP7UjOFVhDUopa0tyH1lOKB-0-1669f88d7cd807c86c66b0a6e4ce65b2)
【例4.1】创建应用程序实例(源代码\ch04\4.1.html)。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P52_165335.jpg?sign=1739182530-9RsQdrSskHrMd8tuLnU6xTYZb1wD45GJ-0-7edc3ca6e8b79cc8449be7de91a9784b)
在组件选项对象中会有一个data()函数,Vue在创建组件实例时会调用该函数。data()函数返回一个数据对象,Vue会将这个对象包装到它的响应式系统中,即转化为一个代理对象,此代理使Vue能够在访问或修改属性时执行依赖项跟踪和改进通知,从而自动渲染DOM。数据对象的每一个属性都会被视为一个依赖项。
注意
这里创建Vue实例后赋值给了变量vm,在实际开发中并不要求一定要将Vue实例赋值给某个变量。
在浏览器中运行程序4.1.html,结果如图4-1所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P53_13788.jpg?sign=1739182530-mPoiIS5vflM3LltIoQhPBOm87XxEWZ3j-0-1efd49b81f545526db6d34ffa16eec90)
图4-1 创建应用程序实例