vue.js基础内容摘要

前端异步流程工具

1. 传统的方案
   • 回调函数
   • 事件
2. 工具的方案（5种）

    - Promise
    - gengerator函数
    - async await        
           // async函数使用了generator函数的语法糖 ， 它直接生成对象 {value: '',done:false} await 直接将value提取出来了
    - nextTick setImmidate
    - async.js 第三方的封装库

vue.js源代码

• 匿名函数 (function(){}) ()

1. 特点

* 安全性高
* 减少了函数命名冲突
* 第二个括号才是函数的真正运行， 里面可以传入实际参数
* 第一个括号确定了匿名函数的作用范围， 语法不会报错， 里面放一个没有名字的函数， 函数可以接收形式参数

2. 确定vue.js这个库的使用方法

* 直接将Vue当做全局的一个方法使用， 因为将Vue挂在了 window
* 使用了amd来定义vue.js这个库为一个模块， 这样我们才能模块化引入

3. vue.js基础语法

* 模板语法
<p>
        if:{{bool?str:num}}
</p>
* 列表渲染
        v-for = " xxx in data "
* 条件渲染
        <p v-show = " f ">
        <p v-if = " f ">
* 事件
        @eventType = eventFnName
        <button v-on:click="changeMsg">
* 事件修饰符
        v-on:eventType.modify = eventFnName
        <p @click.stop='smallHandler'></p>
* 键盘修饰符
* 自定义按键修饰符
    1. 全局修改
        Vue.config.keyCodes.自定义修饰符 = 键盘码
        使用：
        @keyup.自定义修饰符 = eventFnName
* 自定义事件(自定义事件类型)
        1. 使用new Vue() 的到的实例来定义
              vm.$on(eventName,callback)
        2. 如何触发呢？
                vm.$emit(eventName)
                this.$emit(eventName)
* 单项 双向数据绑定
        v-bind:attr = data（简写 :attr = data）
        v-model:attr=data（简写 v-model=data）

Axios 和 Fetch 数据请求

相同点：都是 Promise

---

1.axios
封装的第三方库

get：      params: {
                    a: 1,
                    b: 2
             }
post：    data: new URLSearchParams([
                    ['a', 1],
                    ['b', 3]
            ]).toString(),
                headers: {
                   'Content-Type': "application/x-www-form-urlencoded"
            }

2. fetch
   原生

get:     url:'http://127.0.0.1:8080/PHP/axiosandfetch/get.php?a=1&b=4'
          res => res.text()//数据格式化
post:     body: new URLSearchParams([ //params
                    ['a', 5],
                    ['b', 1]
            ])
            header: new Headers({
                     'Content-Type': 'application/x-www-form-urlencoded'
            })

2. 列表渲染中的key的问题

VDOM是惰性的， 它有一个原则， 这个原则叫做'就地复用'

vue深入响应式原理

1. 数据模型–》 vm中 的data选项
2. 状态管理
   什么叫做状态？什么叫做状态管理？
   我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式就叫做状态管理
3. 深入响应式原理：
   1. 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新
   2. Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生改变的时候， 就会触发， 然后wather就会触发， 告诉视图（V）进行重新渲染
   3. **** 数据必须放在data选项中才能进行深入响应式
4. 底层原理

Object.defineProperty(obj,obj.attr,descriptor)

响应式原理总结：

· 1. 什么是深入响应式原理？

    深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候， 视图就会响应的进行更新， 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的
名称解释：
    数据劫持： Object.defineProperty中的getter/setter ， 然后在执行watcher
    订阅发布：事件（自定义事件）
        订阅： 事件的声明 vm.$on
        发布： 事件的触发 vm.$emit

· 2. 非响应式情况

    在vm模型的data外定义的属性， 就是非响应式属性， 非响应式属性， 属性值更新， 视图不会更新

· 3. 非响应式属性如何变成响应式属性
思维： 将非响应式属性合并到响应式属性身上
解决： 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)

Vue.set(vm.someObj,prop,value)
this.$set(vm.someObj,prop,value)

4. 存储器：

get函数 ----起了个名字getter 设置当前对象的key的初始值
set函数 ----起了个名字setter 修改当前对象的key的值

· 5. Vue.set底层原生是什么？
分析： 将一个对象（key , value）合并另一个对象身上
解决： 对象的合并： Object.assign(目标对象， 当前对象)

Object.assign(目标对象，对象1， 对象2，对象3)

双向绑定原理（v-model）

1. 效果
   数据改 ， 视图更
   视图改， 数据更
2. 实现
   使用v-model实现
3. 缺点
   v-model默认绑定value属性， 所以v-model只能在表单使用
4. 原理
   1. 为什么数据能直接在视图显示

   v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候，
   就会触发getter,watcher就会触发， watcher通知Vue生成新的VDOM树，
   再通过render函数进行渲染,生成真实DOM

2. 为什么视图修改数据就会修改

   当视图修改是， 意味着DOM的value属性值改变，就会触发setter,watcher监听机制就会执行
   watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM

虚拟DOM( VDOM ) 和 diff算法

1. 虚拟DOM( VDOM ) 是什么？

虚拟DOM( VDOM ) 是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构

2. diff算法

* diff算法是用来比较两个或是多个文件， 返回值是文件的不同点

组件

1. 组件化思维

组件化针对的是页面中的整个完整的功能模块划分 （项目的分工）

2. 组件的概念（ 一个文件 ）

组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体

优点：代码复用，便于维护
划分组件的原则：复用率高的，独立性强的

3. 组件的表现形式是标签，组件要想合法化， 必须注册

组件通信

1.哪几种(4种)

* 父子组件通信
        A: 绑定的是简单数据类型
* 子父通信
        B: 绑定复杂数据类型
        C: 父组件可以传递一个方法给子组件
        D: 通过自定义事件来实现通信
* 非父子组件通信
        E: 使用ref链来绑定组件
        F: 通过事件总线（bus）
* 多组件状态共享
        - 使用 Vue-Router
        - 使用状态管理工具 Vuex

组件生命周期

1. 组件的有哪几个阶段？
    - 初始化阶段
    - 运行中阶段
    - 销毁阶段
2. 初始化阶段有4个生命周期狗子函数
* beforeCreate
        表示组件创建前的准备工作， 为事件的订阅发布 和 生命周期的开始做初始化
        这个钩子函数中，数据拿不到， 真实DOM也拿不到
* created
        表示组件创建结束，
        这个钩子函数在项目，可以数据请求， 然后可以进行一次默认数据的修改
        因为数据请求越提前越好一些， created常用于数据的请求和数据的修改
* beforeMount
        表示组件装载前的准备工作
        这个钩子函数在项目，可以数据请求， 然后可以进行一次默认数据的修改
* mounted
        表示组件装载结束， 就是我们可以在视图中看到了
        这个钩子函数在项目，可以数据请求，DOM操作就可以进行了
        第三方库的实例化常在mounted中进行书写（DOM是不改变的）（要死的）

3. 运行中阶段

*beforeUpdate
        表示数据更新前的准备工作
*updated
        表示数据更新结束， 通过render函数渲染真实DOM
        也是进行第三方库的实例化（ DOM是改变的 ）（要活的）

4. 销毁阶段

- 用过开关销毁
        * 这个组件真实DOM也会被删除掉
- 通过调用vm.$destroy()
        * 这个组件的被删除了， 但是它的真实DOM的html结构还在
-包含两个钩子函数
        * beforeDestroy
        * destroyed
- 这两个钩子无差别
- 这两个钩子在项目中
- 做善后工作 ， 手动清除一些计时器， 和一些方法， 还有第三方实例化出来的对象
- 我们建议大家使用开关的形式来操作组件的销毁和创建

杂七杂八

• 过滤器filter定义： 对数据进行格式化的一个函数
• 自定义指令directive:

- 指令的钩子函数（一共有5个）
    - bind : 指令和元素第一次绑定的时候调用
    - inserted ： 指令绑定的元素插入父节点的时候调用
    - update ： 指令绑定的元素自身， 或是他的内容（子节点）发生改变的时候出发
    - componentUpdated ： 指令绑定的组件自身， 或是他的内容（子节点）发生改变的时候出发
    - unbind ： 指令和元素第一次解绑是调用
- 指令的钩子函数的参数
    - el 当前元素
    - binding 前端指令的所有信息
    - vNode 当前指令绑定的虚拟节点
    - oldVnode 指令绑定前的虚拟节点

• render函数定义： 表示通过createElement参数来创建Virtual Dom
• jsx

jsx=>( javascript + xml ) xml 就是一种标签化的数据格式

• 过渡 & 动画Animate

过渡指的是 用 css3 的transition来实现动画效果
动画指的是用 js来实现动画效果

• 动态组件

动态组件就是 component组件 ， 组件身上可以绑定一个is属性， 用来表示某一个组件

• is属性

我们html中有一些标签是规定它的直接子元素的 ， 比如 ul li ol li selector option table这类型标签
不能直接用常规的组件使用方式， 必须在对应直接子元素上绑定 is属性

• keep-alive组件作用

将组件的内容存在浏览器缓存中， 当我们需要重复渲染的时候， 就从浏览器缓存中去调用，这样可以减少性能消耗

• 异步组件

异步组件也是一个函数， 只不过这个函数使用Promise,函数有一个返回值

• 不常用指令

- v-text vs v-html
    - 都是用来将数据插入DOM中， 但是v-html可以解析标签类型数据
- v-cloak 解决 {{}}     语法短暂原样输出
- v-pre     原样输出
- v-once     只渲染一次