Vue安装介绍
前言
Vue是一个渐进式的框架:
- 渐进式意味着你可以将Vue作为你应用的其中一部分嵌入进项目,这就意味着无论该项目之前是用什么技术开发的,我们都可以对其一部分或者整理进行重构,给作者带来更丰富的开发体验。
- 当然我们可以用Vue的核心库以及其生态系统(Core+Vue+router+Vuex)开发新的项目。
Vue的特点:
- 解耦视图和数据(申明式编程好处)
- 可复用的组件
- 前端路由技术 router
- 状态管理
- 虚拟DOM
一、Vue安装
- CDN引入 (这边需要去CDN服务器下载,所以还是需要时间,建议直接下载引用)
<!-- 对于制作原型或学习,你可以这样使用最新版本。这里面包含源代码,有帮助的命令行警告,适合开发环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。当然这里面对文件进行了压缩,提高了加载速度,适合生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
-
直接用
<script>
引入 (官网直接下载源文件)
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js (删除了警告,33.30KB min+gzip)
注意:在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告! -
npm安装 (需要安装node)
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。# 最新稳定版 $ npm install vue
二、Vue的MVVM思想
MVVM(Model-View-ViewModel)是一种软件架构模式。他有助于将图形用户界面的开发与业务逻辑或后端逻辑或后端逻辑(数据模型)的开发分离开来。
1. 模型:数据模型,代表数据访问层,定义数据和业务逻辑,可以使我们固定的数据或者请求下来的数据。
2. 视图:也称之为DOM层,UI视图,用来展示各种信息。
3. 视图模型:同步View 和 Model的对象,实现了数据绑定和DOM监听。
在MVVM架构下,View和Model之间并没有直接的联系,而是通过ViewModel实现View和Model之间的绑定和通讯,View和Model之间的交互是双向的,所以无论其中一方的数据被修改,修改后的数据会同步到另外一方上。当然,这也使得视图和数据完成解耦。当然也实现了DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
Vue主要采用的是Object.defineProperty,他会将数据转为getter/setter(默认值为undefined)。使用的设计模式是观察模式。
Observer: 监听者,监听对象的所有属性,如果有最新值,就会通过Object.defineProperty的getter/setter方式告诉消息订阅者。
Compile : 解析器,用于对每个元素节点的指令进行扫描和解析,并根据指令模板替换数据,以及绑定相应的更新函数。
Watcher : 订阅者,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。
Dep : 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。
从图中可以看出,当执行 new Vue() 时,Vue 就进入了初始化阶段,一方面Vue 会遍历 data 选项中的属性,并用 Object.defineProperty 将它们转为 getter/setter,实现数据变化监听功能;另一方面,Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析,初始化视图,并订阅 Watcher 来更新视图, 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。
当数据发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到通知后对视图进行相应的更新。一个具有注脚的文本。1
缺点:对于简单的UI来说,实现MVVM的开销操作是"过度的"。对于较为庞大的应用来说,推广ViewModel变得更加困难。因为,较为庞大的应用程序中,使用数据绑定操作会增加相当大的内存消耗。
需要理解Object.defineProperty()的小伙伴,可以参考:Object.defineProperty()。
另外,需要了解双向绑定原理的小伙伴可以参考:vue的双向绑定原理及实现。
摘自https://www.cnblogs.com/goloving/p/8520030.html ↩︎