VUE基础知识总结

一、简介

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、VUE的优缺点

优点：

1. 组件化开发，提升效率，方便复用，便于协同开发
2. 单页面路由
3. 双向数据绑定
4. 易于结合其他的第三方库
5. 丰富的api方法
6. 轻量高效,虚拟DOM
7. MVVM，数据驱动视图
8. 轻量级的框架
9. 渐进式

缺点：

1. 缺少高阶教程和文档
2. 生态环境不如angular和react
3. 社区不大
4. 不支持ES5的浏览器无法使用，如ie8
5. vue的响应系统无法检测属性的添加和删除，以及某些数组的修改
6. 报错不明显，适合单人开发或者中小型项目
7. 不利于SEO优化

三、数据驱动

在vue中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新，而vue只需要改变数据，剩下的vue帮你做。

四、MVVM

 

M:model模型,在vue中指数据

V:view视图, 用户在屏幕上看到的结构、布局和外观（UI）

VM:ViewModel 视图模型,监听视图或者模型的变化,更改模型或视图   

运行原理:

    当view变化,VM监听后更改model

    当model变化,VM监听后更改view

五、什么是diff算法？

分成三部分tree diff、 component diff、 element diff,分别去对比新旧(虚拟)dom树,DOM树中的组件,组件中的元素

tree diff

新旧两个DOM树，逐层对比的过程，就是tree diff

当整个DOM树逐层对比完毕，则能找到要被更新的元素

component diff

在进行tree diff的时候,会对每一层的组件进行对比,如果新旧组件的类型相同,会进行element diff对比,如果不同,直接移除组件更新新组件

element diff

    在进行component diff对比时如果两个组件的类型相同,会对其内部的元素进行对比