vue的一个简单分享

vue大致内容结构
模块	要点
vue	渐进式框架、MVVM的设计模型双向数据绑定（vue2.0 & vue3.0）（单向数据流，单向数据绑定）虚拟dom 事件指令（v-if、v-for、v-show）计算属性computed & watch 单页面 & 多页面
组件	组件通信的几种方式注册模式
路由	注册模式使用（hash 跟history 的模式）
vuex	单一状态树四个模块 this.$store的注册及使用

官网用一句话来概括了vue 是个什么样的框架

“vue是一个渐进式框架”

关于渐进式这三个字，我可是查的的太久啦！

1、来详细解释下就是，一开始我们在开发h5页面的时候，内容少的情况下，会把一个页面的内容都写在一个html文件内。

2、但是当内容变的非常多的时候，要是还写在一个文件内，就会显得内容非常的杂乱，臃肿，所以这个时候会把内容进行拆分，在vue里就是拆分成不同的组件，例如一个title、一个input输入框、一个列表等等，根据功能模块进行拆分。

3、那么要是在开发单页面的时候，涉及到页面内容的替换，这时候就会需要用到我们的路由（vue-router），来实现页面内容的更替。

4、在第二步中，咱们使用组件的时候，要是有组件之间的数据共享，会避免不了组件传值的关系，父子之间的通信官网有介绍，那么兄弟组件的通信，其实也是通过共同的父级来进行通信的，那么要是当需要共享的数据变多，组件关系变得复杂，通信无疑就变得非常麻烦，因此就可以引入vuex来帮我们来管理数据（vuex一般在大型项目中使用，在小型项目用也没啥必要哈哈哈哈）

下面再来展开描述。。。

首先来说下vue的一些基本的内容

一、使用来MVVM的设计模式

1、MVC

MVC分为:Model(模型),View(视图),Controller(控制器)。Controller是Model和View的协调者，基本都是单向联系使用了MVVM的设计模式

vue的一个简单分享

2、MVVM

model - view - viewmodel，View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示,通过数据来显示视图层，View和Model不直接联系

vue的一个简单分享

二、双向数据绑定

双向数据绑定（自动更新其实就是数据逻辑层跟视图层实现了数据绑定）

实现方法：数据劫持结合发布者-订阅者模式
vue2.0 核心方法：Object.defineProperty
- 通过Object.defineProperty()来实现数据劫持的，内部有两个属性：get/set。get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数。
- 实现步骤：
  - 实现监听器：observe；用来劫持并监听所有属性，如果有变动的，就通知订阅者
    - Observer是一个数据监听器，其实现核心方法就是Object.defineProperty( )。
  - 实现订阅者：Watcher；收到属性的变化通知并执行相应的函数，从而更新视图
  - 实现解析器：compile；对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数
  - 图解：Dep就是一个中间管理器；当订阅者有很多个，需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理
vue3.0 核心：proxy
- 针对2.0版本：defineProperty的缺陷是只能监听一个属性，所以要监听一个对象里面的所有属性的画，就需要做一个递归处理
- 消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制：无法监听属性的添加和删除、数组索引和长度的变更，并可以支持 Map、Set、WeakMap 和 WeakSet
单向数据绑定
- 只有UI控件才存在双向数据绑定，非UI控件只有单向
  - 单向：普通的渲染数据 v-bind：{{ }}
  - 双向：像表单的view层更改直接同步到model层 v-model
- 单双向绑定，指的是View层跟Model层之间的映射关系
单向数据流
- 单向数据流跟单双向的数据绑定，其实是两回事
- 前面有解释过单双向绑定，单向数据流则是，组件之间的通信要求
- 父级与子级的通信，规定父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，否则导致应用的数据流向难以理解

三、虚拟DOM

真实的DOM及其解析过程
2. 浏览器渲染引擎大概分成五步：
  
  1、创建DOM数，用html解析器解析html元素
  
  2、生成样式表，用css解析器，分析css文件
  
  3、构建render树（渲染树），attachment
  
  4、渲染树布局（position、margin、float等）
  
  5、绘制渲染树（color、background等）
3. 执行dom缺点：每次操作dom的时候，浏览器都会从构建dom树开始从头到位执行一遍流程，浪费计算机性能
虚拟dom的出现：为了解决浏览器的性能问题而被设计出来的
1. 虚拟dom其实就是一个虚拟对象
2. 更新dom的时候，不会立即去操作dom，而是将变化都保存到一个JS对象中（虚拟dom），然后再一次性的attach到dom树上
3. 优势：操作js对象速度要快得多
比较两棵虚拟dom的差异-diff算法

对比出差异之后，才会应用到真正的dom树

四、计算属性、事件监听

计算属性 computed
- 计算属性是由data中的已知值，得到的一个新的值，不在data内部
- 是依赖于某个或者某些属性值，只有当依赖的数据发生变化时，才会发生变化
- 具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据
- computed擅长处理的场景：一个数据受多个数据影响
数据监听 watch
- 监听某个数据的变化，支持深度监听，可以接受2个参数（newValue, oldValue）,即变化的最新值和上一次变化的旧值
- 会生成一个watcher对象，在监视的属性每次变动时都会触发回调，可以执行异步操作
- watch擅长处理的场景：一个数据影响多个数据

五、单页面 / 多页面

抽象派解释……&&%*

单页面：简单理解，只有一个html
多页面：就是有多个html
对比优缺点：单页面首次加载损耗大，多页面首次加载快，但是页面之间切换可能卡壳

接下来就说下组件了-_-

组件这里有一个需要注意的地方，“单向数据流”，前面有介绍过了，对比单向数据传递，应该能区分开了吧～～～～～

组件这边值得探讨的，大概就是组件之间的通信哈哈哈哈，别的呢（注册啊、插槽啊balabala 太多了，感兴趣的同志可以自己查一下了）

我们常用的prop/$emit ，这个都知道了，列举一下，大概就是以下几种通信方式：

（下面的代码图，当时学习的时候就给）

Prop（常用）/ $emit (组件封装用的较多)
- 父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信
- 父组件向子组件传值
- 子组件向父组件传值
  - $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数
  - 其实，我认为，这只是在子组件触发了一个改变父级参数的指令，然后在父级对对应的参数进行操作，这也符合单向数据流的特点
$children / $parent
- 通过$parent和$children就可以访问组件的实例，代表可以访问此组件的所有方法和data
- 使用：
  - 边界情况
    
    如在#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined
    
    在最底层的子组件拿$children是个空数组。
    
    得到$parent和$children的值不一样，$children的值是数组，而$parent是个对象
vuex
provide & inject （高阶组件/组件库用的较多）
localStorage/sessionStorage
- 通过window.localStorage.getItem(key)获取数据
- 通过window.localStorage.setItem(key,value)存储数据
- 使用时要注意数据格式的转换
  - JSON.parse() /JSON.stringify()
- 缺点是数据和状态比较混乱,不太容易维护
- localStorage /sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题