VUE学习手册

VUE学习手册

环境搭建

1.首先需要在node.js的官网下载安装node环境，安装完后，windows环境打开CMD，输入node -v查看环境是否安装完毕。
2.然后执行npm -v，npm是node的一个包管理工具，查看npm是否已经安装完毕。
3.下载vscode并下载相关插件，插件地址参考https://blog.csdn.net/Joe0217/article/details/80950477
4.在CMD执行npm install --global vue-cli
5.执行vue init webpack myproject

标题命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

如何在VUE中使用less

第一步 npm安装less
npm install less less-loader --save
第二步 修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加如下代码

{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”,
},
第三步 在组件中的style 添加lang=“less”

VUE的优点

• 解耦视图与数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟DOM

MVVM设计模式的优点

1. 双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化。很好的做到数据的一致性

2. 由于控制器的功能大都移动到View上处理，大大的对控制器进行了瘦身

3. View的功能进一步强化，具有控制的部分功能，

   若想无限增强它的功能，甚至控制器的全部功能几乎都可以迁移到各个View上

（不过这样不可取，那样View干不了属于它职责范围内的事情）。

View可以像控制器一样具有自己都View-Model

4. 可以对View或ViewController的数据处理部分抽象出来一个函数处理model。

   这样它们专职页面布局和页面跳转，它们必然更一步的简化。

MVVM设计模式的缺点

1. 数据绑定也使得bug很难被调试。比如你看到页面异常了，有可能是你的View的代码有bug，也可能是你的model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。

2. 数据双向绑定不利于代码重用。客户端开发最常用的是View，但是数据双向绑定技术，让你在一个View都绑定了一个model，不同的模块model都不同。那就不能简单重用view了

3. 一个大的模块中model也会很大，虽然使用方便了也很容易保证数据的一致性，但是长期持有，不释放内存就造成话费更多的内存。

VUE生命周期

在开始VUE生命周期时，首先要创建一个实例，也就是一个new vue（）对象的过程，首先执行了init的方法，在init的过程中调用了beforecreat，实例创建完成后调用created，这个阶段完成了数据的观测，但是DOM元素还没有挂载，可以在这个阶段初始化一些数据。
created完成后，vue会去判断instance（实例）里面是否有el选项，如果没有的话会调用vm.$mount(el)，然后执行下一步，如果有的话会直接执行下一步。紧接着会判断是否有‘template’选项，如果有的话他会把template解析成一个render函数去构造虚拟DOM,在beforemount的时候，$el还只是HTML里写的节点，当到了mounted的时候渲染的内容已经挂载到了DOM节点上，但是mounted不保证所有的DOM节点都会渲染完成，$nextTick函数可以保证所有的DOM已经完全渲染。
后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。

vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有变化。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。
如果你用for循环动态的改变一个数据100次，其实他只会应用最后一次的数据变化，如果没有这种机制，DOM就会重新绘制100次，这是一个很大的开销。

Render函数

VUE使用了虚拟DOM来更新DOM节点，提高渲染性能。
虚拟DOM并不是真正意义上的DOM，而是一个JavaScript对象，在状态发生变化时，虚拟DOM会进行DIFF运算，来更新只需要被替换的DOM，而不是全部绘制。

• 虚拟DOM就是通过一种VNode类来表达的，每个DOM元素或者组件都对应一个VNode对象
• VNode分为文本节点，普通元素节点，组件节点，没有内容的注释节点，克隆节点
• Render函数通过creatElement来创建虚拟DOM