Vue.js的发展史及知识简单梳理

1.学习框架可以主要解决的问题是:高效的将服务器数据渲染到客户端，将用户填写数据高效的反应到视图上。

2. 前端框架时间

   • backbone angular1.0 2010
   • React 2013
   • vue1.0 2014
   • vue2.0 2016
   • es6 2016
   • 微信小程序 2016
   • angular 2016
   • vue3.0 2019
     • 2020年第一个季度开始全面使用

3. Vue的认识

   • vue 1.0 2014
   • VUE 2.0 2016年
   • VUE属于轻量级的js框架
   • MVVM-前端开发
   • 个人开发项目
   • 作者：尤雨溪
   • 使用了VDOM（虚拟DOM）
   • 双向数据绑定：vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
   • jsx语法：JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.

4. Vue构成

   • 指令 - 操作VDOM（操作虚拟DOM）
   • 组件系统 - 项目模块化

5. Vue基础

   • 指令
     • 哪些指令？这个指令的作用 v-if v-for v-model v-bind v-on v-html v-text v-pre(跳过这个元素和它的子元素的编译过程。) v-cloak(是解决屏幕闪动的好方法。) v-else v-else-if
     • 如何自定义指令
       • 全局定义 Vue.directive()
       • 局部定义 directives 选项
     • 自定义指令的钩子函数
       • bind:只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
       • inserted: 被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
       • update:被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
       • componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
       • unbind : 只调用一次，指令月元素解绑的时候调用
   • Vue深入响应式原理
   • Vue数据请求
     • vue1.0 - vue-resource
     • Vue2.0 - axios / fetch 的区别
       -axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封 装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
       1.从浏览器中创建 XMLHttpRequest
       2.支持 Promise API
       3.客户端支持防止CSRF
       4.提供了一些并发请求的接口（重要，方便了很多的操作）
       5.从 node.js 创建 http 请求
       6.拦截请求和响应
       7.转换请求和响应数据
       8.取消请求
       9.自动转换JSON数据
       -fetch的优势主要优势就是：

6. 语法简洁，更加语义化

7. 基于标准 Promise 实现，支持 async/await

8. 同构方便，使用 isomorphic-fetch
   4.更加底层，提供的API丰富（request, response）
   5.脱离了XHR，是ES规范里新的实现方式

• Vue计算属性

  • computed
    • 有条件
    • 可以在template模板中想全局变量一样使用

• Vue侦听属性

  • watch
    • 异步数据请求

• Vue方法

  • methods
    • 事件处理程序

• 组件 - 组件是vue的扩展功能 Vue.extend()

  • 定义组件
    • 全局： Vue.component(组件名称,组件的选项)
    • 局部: components选项

• is属性 和 动态组件 - 缓存组件

  • component
  • keep-alive

• 异步组件

• 组件通信

  • 父子组件通信 props选项
  • 子父组件通信 自定义事件 $emit
  • 非父子组件同行
    • ref
    • bus事件总线
  • vue-router
  • vuex

• vue生命周期

  • 11个8个常用
    • beforeCreate 创建之前
    • created 创建 - vdom
    • beforeMount 挂载之前
    • mounted 挂载 - 数据请求 - 真实dom - 第三方库实例化
    • beforeUpdate 更新之前 - vdom生成 - 通过diff比对生成patch补丁对象
    • updated 更新 - 真实dom
    • beforeDestory 销毁之前 - 调用条件： 开关 / $destory()会删除组件，但是组件dom外壳会遗留，需要手动删除
    • destoryed 销毁

• vue-router

  • 路由使用步骤
  • 导航守卫
    • 路由鉴权
    • 路由拦截
    • 数据预载
  • 路由模式
    • hash - 传统浏览器 - hashchange事件
    • history - HTML5 - pop
    • abstrict - 服务端

• vuex

  • 做什么的
  • vuex的作用
  • vuex使用流程
  • vuex辅助工具
  • vuex数据分片使用流程

6. 前端异步处理
   • 传统
     • 回调函数
     • 事件
   • 封装
     • promise
     • async await
     • generator函数
     • 模块化