1.1 简单认识Vue
1.1.1首先,Vue是一款MVVM框架。
所谓MVVM,即Model-View-ViewModel,即模型-视图-视图模型模式。
MVVM是MVC的变种,Model和View与MVC模式一致,ViewModel(视图模型层)作为View和Model沟通的桥梁,封装了界面展示和操作的属性和接口等,可以将Model数据的变化实时反映到View上,又可以监听View的变化,在需要的时候更新数据。
● View(视图层):在前端开发中通常来说是DOM层,是用户看得到的界面。
● Model(模型层):也称数据层,是来自服务器请求或固定的一些死数据。
● ViewModel(视图模型层):实现了数据绑定(Data Bindings),可以在Model层数据发生变化时将变化反映到View上。用户与View进行交互时,ViewModel层又可以通过监听DOM事件的变化,将监听到的变化反映给Model。
1.1.2其次,Vue采用虚拟DOM技术解决浏览器的渲染性能问题。
传统开发模式上,JS操作DOM时,浏览器会马上从构建DOM树开始从头到尾执行一遍流程,DOM有多少次变化就直接执行多少次流程。
采用虚拟DOM技术时,当虚拟节点准备映射到视图的时候,会先和上一次的虚拟DOM节点树进行比较,最后只渲染不同的部分到视图中,无须改动其他的节点状态。
1.1.3再次,Vue是一个响应式框架。
响应式,是指当数据改变后,Vue会通知使用该数据的代码,从而改变所有使用到该数据的数据,进而使关联对应数据的视图自动更新。
1.1.4另外,Vue 3.x的组合式API解决功能分散、难以维护的问题。
Vue 3支持采用选项式API,通过props、data、methods等相关配置来组织功能逻辑,当组件内容越来越多,使用选项式API的弊端就会非常明显,因为所有配置都在选项中,相同的功能模块分散混合在一个文件里面,其可读性就会降低,并且难以维护。
Vue 3新增了组合式API语法,可以将不同的功能分开管理,将同一个功能点的内容从选项式配置中抽离出来放到一起,最后通过setup方法统一调用。
1.1.5最后,Vue是一个轻量级的渐进式框架。
Vue的核心层只关注视图,其他功能可以根据需要逐步引入,所以Vue的核心文件是非常小的,它是一个轻量级的框架。
渐进式,便是说开发者可以逐步地使用Vue的功能。
1.2搭建Vue 3.x开发环境
1.321 在不安装Vue的情况下引入Vue
Vue是一个轻量级的JavaScript框架,它的文件很小,所以可以在页面中通过<script>标签直接引入,可以引入CDN地址提供的文件,也可以从CDN下载文件到本地,然后通过<script>标签引入。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>