再简单复习一下，generator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

function step1 (success) {
  setTimeout(() => {
    console.log('step1');
    success();
  }, 1000);
}

function step2 (success) {
  setTimeout(() => {
    console.log('step2');
    success();
  }, 1000);
}

function step3 (success) {
  setTimeout(() => {
    console.log('step3');
    success();
  }, 1000);
}

function* main () {
  // generator 配合yield和next来实现异步编程，
  // yield让函数等待上一个执行完后再执行，next（）让执行指针跳到下下一个

  yield step1;
  yield step2;
  yield step3;
}

function run (fn) {
  /**
   * 在fn，也就是main这个generator函数执行完后，会返回一个generator
   * .next后会返回下一个yield等待执行的信息，一个对象{done: false value: ƒ step1()}
   * 那么我们通过，这个对象中的done来判断，这个generator是否执行完成（false表示后面还有一不代码要执行）
   */
let gen=fn()
  function next (){
    let result = gen.next();
    console.log(result)
    if (result.done) return
    result.value(next);
  }
  next();
}
run (main)

setState( Object | fn, callback )

2. 在一个流程中（render3完成，页面dom得到更新，叫一个数据更新流程）多次setState，会合并为一个setState来调用，合并机制非常好，但是会出现问题

3.利用第一个参数函数形式解决

1
2
3
4
5
6

先前的state
this.setState(（prevState）=> {
return { }
})
等同||
this.setState(（prevState）=> ({}))

4.列表渲染
key的重要性，是给到react内部去优化性能
key在兄弟节点中是必须的

4.1. 虚拟dom的比对叫做 diff算法

1. 不同的根节点的树，就不需要比较了，直接以新的替换

   特性：

   1. 同级比较
      1.1 同级元素类型变了，那么就不再比较子元素，直接将老的树销毁，生成新的树替换
      1.2 同级元素相同，这时再递归比较子元素
   2. 子元素比较

      react中支持key属性，当子元素拥有key是，react使用key来匹配原有数上的子元素以及最新树上的子元素，使用key来匹配，使得效率变得更高

# react实现

虚拟dom就是一段，jsx语法对象

1.受控组件
需要使用state数据去控制这个form元素

2.非受控组件
不需要使用state数据去控制的表单元素

非受控组件input的默认值，用defaultValue={this.state.value}

chexkoutbox 用defaultChecked

# 生命周期

三大阶段
1.挂载

• constructor（）在组件实例化的时候触发

   不能在里面setState1. 调用父类的z构造函数super（props）  2. 初始化数据 this.state = {}   3.绑定this指向

• render（）渲染

   默认进来一次，后续如果有更新会再次触发使用setState要小心

• componentDidMount()

  组件挂载完成 1. 获取异步数据 2. 获取dom元素    

• componentWillMount()即将过期， 不要使用

• static getDerivedStateFromProps ( props,state) 能够根据props数来设置state数据

  1. 默认render之前调用一次2. 后续数据有变化，重新render之前又会调用3. 不能使用 this.setState4. 需要 return {} | null 如果是

  2.更新

  • static getDerivedStateFromProps

  • shouldComponentUpdate （nextProps， nextState）
    这个组件是否是应该进行渲染？ 做性能优化
    一般不去用他，推荐使用 PureComponent
    如果使用了它，就不能再使用PureConponent
    ！ 需要返回中，布尔值，如果返回true -> 更新生命周期函数往下执行，false -> 不更新生命周期不往下执行

  • render

    • getSnapshotBeforeUpdate(prevProps, prevState)

    真实DOM渲染完成的前一刻触发
    此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

    • componentDidUpdate(prevProps, prevState, snapshot)

    snapshot 是 getSnapshotBeforeUpdate 返回的值

    1. 不能随意的去使用网络请求和setState。 除非加上了判断条件

  3.销毁
  conmponentWillUnmounted

组件之间通信

1. 父 -> 子 props

2. 子-> 父 传递方法给子组件

3. 兄-> 弟 3.1.状态提升

   3.2.使用第三方的中央事件管理器 （pubsub）3.3.context

   Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

   let MyContest = React.createContext()创建一个context对象

   MyContext.Provider 组件  供应商MyContext.Consumer 组件  消费者， 开始结束标签内需要使用一个**函数**来return jsx，而这个函数接收一个参数，参数就是供应商的value数据 一.使用以上三步骤

   ​ 二.在消费者组件使用 static ContextType = MyContext

   this.context接收数据

   ​ 3.4.自己写一个bus

4.react官方提供的状态管理器 flux
第三方： Redux javascript的状态管理器，跟Vuex很相似
> 单一数据源，整个应用的state被存储在一颗object tree中
1. 在redux的流程中任何时刻state，都不会发生变化，不能直接改变
2. state的改变不是改变原来的state，是生成了一个新的state替换旧的state，
3. Reducers不能改变state，生成一个新的state 去return（纯函数的概念）
纯函数：任何时候都不会修改参数，有相同的入参，一定会产生相同的出参（每次传入相同的参数，都会出现相同的返回值）

react组件标签之间的内容不会自动渲染出来，会在props中传入children

ref的三种使用手法

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素

1. ref=”myUL” this.refs.myUL
2. ref={(target)=>{this.myUL = target}} this.myUL
3. 构造函数中定义 this.myUL = React.createRef()
   ref={this.myUL} 在元素标签上设置
   this.myUL.current 获取元素

   在组件标签内写内容，利用改组件的{this.props.children}来实现相vue中solt功能

1.React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据

2.在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

react 2013.5开源 （轻量级视图层库 、虚拟dom）

对与虚拟dom，简单说就是，在render时 return出来的那段jsx，是一个js对象，称之为虚拟dom，
它没有直接渲染到web页面上，react 通过diff算法对现象产生的虚拟dom和之前的比较，比较出最小的dom改变，然后去渲染web页面
vue 2015

react 使用

• cdn 链接的方式
• 自己搭建 webpack 的环境
• 使用一些官方或第三方的脚手架

cdn 链接的方式

1
2

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

• react react核心内容
• react-dom react用来渲染真实dom的一个库

自己搭建 webapck 环境

1. npm init -y
   2. npm install –save-dev webpack webpack-cli webpack-dev-server
   3. npm install –save react react-dom
   4. npm install –save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
   5. 写 webpack 配置文件
   6. 写 babel 配置文件
   7. src 文件夹 放源代码
   8. public 文件夹 放静态资源文件

使用脚手架 create-react-app

1. npm install -g create-react-app
   2. create-react-app

或者

1. npx create-react-app

ReactDOM.render();

一个ract项目只会调用一次
两个参数，
1.要渲染在页面上的内容(react元素 | html | 虚拟dom)
2.要渲染在页面上的某个位置（挂载点）

jsx 语法

• 单个根元素
• 单标签一定要闭合
• img 必须要加alt属性
• 标签都是小写字母，组件首字母大写
• class ->className
• for ->htmlFor

• jsx注: 使用js的注释{/* */}

  jsx 的插值表达式：使用单个花括号，来作为表达式

  只能是简单的单个表达式，不能是语句也不能是条件或循环语句
  如果需要使用条件，可采用三元运算符

实现v-html 需要使用 dangerouslySetInnerHTML 这个属性，dangerouslySetInnerHTML 这个属性需要接受一个对象的value

1
2
3
4
5
6
7
8
9

let str = '<h1>hello react</h1>';
ReactDOM.render(
<div dangerouslySetInnerHTML={{ __html: str }}></div>
,documnet.getElementById('app'))
// 最后显示的就是div包着h1标签

{{ __html: 插值html }}

{ '' } | {false} | {null} | {underfined}这种情况可以实现，v-if

react中没有指令系统

组件 & props

• react 中没有全局组件的概念，你需要使用哪个组件，就必须引入进来使用

一 . 组件定义

1. 函数式组件
2. 类组建

二. 函数组件的定义

1. 定义一个函数，然后return出来一段jsx语法
   ，这段jsx语法就是这个组件的模板内容
2. PS ：函数名就是组件名，首字母大写

   1	const Hello =() => { return <h1></h1>}

三. 类定义的组件

1. 定义一个类，类名就是组件名（首字母大写）
2. 这个类需要继承，React.Component 这个基础组件
3. 类中必须要有render函数，render函数return出来一段jsx语法，这段jsx语法就是这个组件的模板内容

   1 2 3

   class World extends React.Component { render () { return <p></p>}} `

PS:组件更多注意事项

1. 组件模板内容，如果需要换行去写，就是用（）包裹起来

2. 没有用React，为什么要引入：

3. jsxc是一个语法糖
4. 由于转换后的代码中使用了React ,使用React就必须要引入

组件的props属性

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

1
2
3

function sum(a, b) {
return a + b;
}

• 调用组件的时候，在标签上写的属性，属性名就是一个prop
• 1. props是个集合，prop是个具体的某个一个
• 2. Vue中使用props首先要在组件中定义props选项，而react不用

1. 函数组件，所有prop会做为参数传递

   1	const Hello = ({name,age}) => {}

2. 类组件
   所有prop会在this.props身上

   1 2	class World extends React.Component { render () { return <p></p>}}

props默认值

例如有一个World组件，那么默认的props就是，World.defaultProps = {
name: ‘李四’
}

react 元素

一. 什么叫做react元素，最基本的一个单元，任何标签都可以 看成一个react元素

虚拟DOM元素 | JSX代码中的任意标签 | 通过React.createElement 创建出来的js对象
二. 如何区分React元素 与React组件
组件就是一系列React元素的组成

三. 什么是元素变量
定义一个变量，变量值是一个React元素
const div =

hello

state

数据绑定的两种方式
1.props
2.state 私有

一. 什么叫有状态组件， 什么叫无状态组件
组建有没有状态，主要看这个组件有没有state
一般类组件就可以称为有状态组件，函数组件叫做无状态组件

二. 组件要有变化，两种方式

1. 组件接收到的props有了变化
2. 组件自身的state有变化
   三. 组件的state或props有变化，组件就会更新，更新的效果其实就是类组件的render函数重新执行，函数组件重新调用了
   PS:
   1. 如果要让组件有state, 首先要确保这个组件是类组件。
   2. 要在 构造函数中定义 状态的初始值。
   3. 写了 构造函数的话，就必须在构造函数的第一行调用父类的构造函数 super()

      1 2 3 4 5 6 7 8 9 10

      class Clock extends React.Component { // 让这个组件有自身的状态数据（state），通过 构造函数 constructor(props) { super(props); // 调用父类的构造函数 // 通过 this.state 给组件赋初始的state值, 不能setState this.state = { date: new Date() } } }

React.Fragment组件，效果像vue中template

1

import React, {Frigment, Component} from 'react'

this 绑定的四种方法

父 -> 子 prop
子 -> 父

• 1. 调用子组件的时候，传递一个自己的方法下去，这个方法里面有修改自己state的功能更
• 2. 子组件通过 this.props.propName() {/是一个方法名/}

• 一、事件处理函数需要主动修改 this 指向，

1. 为什么不能使用 apply 与 call 呢。
   apply 与 call 会立即执行，而 bind 是返回一个新的函数

*2. 处理在 jsx 上面直接 bind 的方式，我们还有以下几种修改this指向的方式

• 1. jsx bind （不推荐）
• 2. 箭头函数 （不推荐）
• 3. 统一都在 构造函数中 去做 this 绑定 (推荐)
• 4. 使用 实验性的 public class fields 语法 (推荐) func = () => {}

     react 性能优化

虽然react的defer算法可以根据虚拟dom的改变只渲染改变了的元素，但是父组件变了，子组件就会重新render，

在性能优化时能不渲染就不渲染，那么就要使用PureComponent基础组件

遵循原则：

1. 不使用bind绑定this，因为bind返回的是新的方法
2. 不使用箭头函数函数

统一在constructor中绑定this
使用 实验性的 public class fields 语法 （就是方法这么定义 fn1 = () => {}）
!!! 不遵循该规则，机会破坏React.PureComponent的性能优化

1
2

<Son age={this.state.age} fn = {this.fn1.bind(this)}/>
<Son age={this.state.age} fn = {()=>{console.log(123) }}/>

React.PureCompoent 会在组件内容，比较数据是否有更新，如果有就render。如果没有就不会 render

例如在父组件state的某个属性值变了，而子组件并没有依赖这个属性，那么要让子组件，不再次render ，那么就让子组件 class Son extends React.PureComponent {}

解决方案

• 1.使用音乐平台自己的插件
• 2.结合 MetingJS 使用 APlayer
• 3.使用 hexo-tag-aplayer
• 花里胡哨，一通乱搞法

使用音乐平台自己的插件

这里就以网易云做例子，登录网易云网页版
- 生成单曲的那种直接点进一首歌，可以在音乐封面下，看见生成外链的蓝色字，点击进入看提示操作

1
2
3
4
5
6
7
8
9
10

<iframe
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width=330
height=86
src="//music.163.com/outchain/player?type=2&id=420400344&auto=1&height=66">
</iframe>

• 生成歌单：进入我的主页->点击你想生成外链歌单的歌单->在歌单播放次数边上，有外链入口

  1 2 3 4 5 6 7 8 9

  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=220 src="//music.163.com/outchain/player?type=0&id=2845370038&auto=1&height=430"> </iframe>

结合 MetingJS 使用 APlayer

APlayer 目前广泛使用的 HTML5 音乐播放器，MetingJS 用于解析歌曲链接
另外还有一个dplayer用来插入视频

MetingJS
Aplayer
在文章中应用

新建 /layout/_widget/aplayer.ejs
在文章头部，添加 aplayer: true
然而不是所有的文章你都会去加音乐，所以在 /_partial/head.ejs 加上这段代码

1
2
3
4
5

```ejs
    <% if (page.aplayer === true) { %>
     <%- partial('_widget/aplayer') %>
 <% } %>
```

然后就是插入这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div
 class="aplayer"
 data-fixed="true"
 data-id="490697747"
 data-server="netease"
 data-type="playlist"
 data-order="random"
 data-autoplay="true"
 data-mutex="true"
 data-loop="all"
 data-list-folded="false"
 data-volume="0.7"
 fixed="true"
 data-listmaxheight="240px"
 data-theme="#FF4081">
</div>
<!--这个id就是网页中打开的音乐id，在网址后面-->

我是在ejs文件全局引入

1 2 3 4 5

> <link href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet"> > <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script> > <!-- Import meting.js --> > <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script> >

参数	是否必须	默认值	描述&可选值
data-id	是		单曲ID / 歌单ID / 专辑ID / 搜索关键词
data-server	是		音乐平台：netease,tencent,kugou,xiami,baidu
data-type	是		音乐类型：song,playlist,album,search,artist
data-autoplay	否	false	是否自动播放，移动端浏览器不支持该选项
data-mutex	否	true	播放时是否暂停其他APlayer对象
data-listmaxheight	否	340px	播放列表最高高度
data-preload	否	auto	音乐预加载模式：none, metadata, auto
data-theme	否	#2980b9	主题色
data-mini	否	false	是否开启迷你模式
data-loop	否	all	循环方式：all, one, none
data-order	否	list	播放顺序：list, random
data-lrc	否	false
data-list-folded	否	false	歌单列表初始时是否折叠
data-volume	否	0.7	用户未自定义前的默认初始化音量
1 2 > >

配置参照这个官方表

使用 hexo-tag-aplayer

在文章中使用：
hexo-tag-aplayer

1
2
3
4
5
6
7

     npm install --save hexo-tag-aplayer
     //在站点的_config.yml中配置
      aplayer:
        meting: true
     //使用
     {% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
{% meting "25718007" "netease" "song" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

[^这里说一句，meting和aplayer标签不可以同时使用]

[^更多官方配置请上官网查看]

花里胡哨，一通乱搞法

1. 当然，我把meting文件，aplayer文件，引入的是全局的，就是在主题的layou.ejs中引入
2. 然后在那里加

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <div class="aplayer" data-fixed="true" data-id="490697747" data-server="netease" data-type="playlist" data-order="random" data-autoplay="true" data-mutex="true" data-loop="all" data-list-folded="false" data-volume="0.7" fixed="true" data-listmaxheight="240px" data-theme="#FF4081"> </div>这段代码

然后，你以为能出来吗，不是的！我这么胡搞，他可能听话吗，
3.试验后发现，只要在一篇文章中加入meting标签或者是aplayer标签就可以出现了

待更新…

devServer.proxy

• Type: string | Object

  如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

  devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

  1 2 3 4 5

  module.exports = { devServer: { proxy: 'http://localhost:4000' } }

  这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

  如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  module.exports = { devServer: { proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } } } }

首先在js中数据类型分为两种，基础数据类型和引用数据类型
JavaScript原始类型:Undefined、Null、Boolean、Number、String、Symbol
JavaScript引用类型:Object

1.浅克隆

浅克隆之所以叫浅克隆，是因为对象只会被克隆最外面一层，至于对象内的对象还是通过引用指向同一块内存

2.个人理解：深拷贝，为解决对象（引用类型），复制时新旧对象使用同一块内存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

//基本类型的复制，传的是值，
var obj={a:1,b:2,c:3,d:{e:5}};

// var obj1=obj;
// obj.a=2;
// console.log(obj==obj1);




//浅拷贝

// function qian(obj){
//      var newobj={};
//      for( k in obj){
//           newobj[k]=obj[k];
//      }
//      return newobj;
// }
// var obj1=qian(obj);
// obj1.d.e=6;
// console.log(obj);



//深拷贝
function deep(obj){
     var newobj={};
     for( k in obj){
     //对遍历到的元素，进行类型判断
         if(typeof obj[k]=="object"){
         //对object类型的原素再次遍历判断
         newobj[k]=deep(obj[k]);
         }else{
         //基本类型直接拷贝
         newobj[k]=obj[k];
         }
     }
     return newobj;
}
var obj1=deep(obj);
obj1.d.e=6;
console.log(obj1==obj);//false






// jquery 有提供一个$.extend可以用来做 Deep Copy。
        var $ = require('jquery');
        var obj1 = {
            a: 1,
            b: { f: { g: 1 } },
            c: [1, 2, 3]
        };
        var obj2 = $.extend(true, {}, obj1);
        console.log(obj1.b.f === obj2.b.f);
        // false
        
 // 函数库lodash，有提供_.cloneDeep用来做 Deep Copy。
        var _ = require('lodash');
        var obj1 = {
            a: 1,
            b: { f: { g: 1 } },
            c: [1, 2, 3]
        };
        var obj2 = _.cloneDeep(obj1);
        console.log(obj1.b.f === obj2.b.f);
        // false

下面的文字，鉴于掘金

当然也有传闻中的，序列/反序列（JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列化成JSON字符串,这两个方法结合起来就能产生一个便捷的深克隆.）
要想实现一个靠谱的深克隆方法,上一节提到的序列/反序列是不可能的

它存在这些坑
1.他无法实现对函数 、RegExp等特殊对象的克隆
2.会抛弃对象的constructor,所有的构造函数会指向Object
3.对象有循环引用,会报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 构造函数
function person(pname) {
  this.name = pname;
}

const Messi = new person('Messi');

// 函数
function say() {
  console.log('hi');
};

const oldObj = {
  a: say,
  b: new Array(1),
  c: new RegExp('ab+c', 'i'),
  d: Messi
};

const newObj = JSON.parse(JSON.stringify(oldObj));

// 无法复制函数
console.log(newObj.a, oldObj.a); // undefined [Function: say]
// 稀疏数组复制错误
console.log(newObj.b[0], oldObj.b[0]); // null undefined
// 无法复制正则对象
console.log(newObj.c, oldObj.c); // {} /ab+c/i
// 构造函数指向错误
console.log(newObj.d.constructor, oldObj.d.constructor); // [Function: Object] [Function: person]

1
2
3
4
5
6

const oldObj = {};

oldObj.a = oldObj;

const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.a, oldObj.a); // TypeError: Converting circular structure to JSON

如果，第一段代码都无法看懂，那推荐看更高深的解读
掘金大佬：寻找海蓝96 https://juejin.im/post/5abb55ee6fb9a028e33b7e0a

vuex ? 状态管理器

Fulx 架构就像眼睛： 您自会知道什么时候用它

• 核心 store(仓库)
  • state ： 状态 （类似组件中的data）
  • getters ：对 state的派生，可以理解为store的 *计算属性 *
  • mutations ：修改state的唯一操作就是提交mutation
  • actions ： 类似于mutation ；主要用来处理异步操作
  • modules ： 对仓库分割成模块
• 辅助函数， 组件从仓库那东西的时候，使用辅助函数更方便
  • mapState（） ： state的辅助函数
  • mapGetters（）：getters的辅助函数
  • mapMutations（） ：mutations的辅助函数
  • mapActions（） ：actions的辅助函数

什么时候需要使用 vuex

1. 当你不知道该不该用的时候，那就是不该用。（你自会知道什么时候需要用到它）

2. 组件之间通信很复杂的情况下

3. 项目中使用了路由，并且路由页面组件中需要通信的时候，

4. 项目写着写着头发一大把掉的时候。

vuex的操作流程

1. 先要有仓库，将我们项目中组件上需要共享的数据放置到我们 仓库中 state 的位置。

2. 组件要使用 仓库 中 state 的数据，就从仓库里面拿出来用。

3. 要修改仓库中 state 的数据，

   1. commit(提交) mutation

   2. dispath(派发) action -> commit mutation

4. 然后仓库中 state 数据发生变化，组件就会得到更新

![流程][‘images/a.jpg’]

vuex 的使用

1. 安装 vuex npm install --save vuex

2. 项目中 src/store/index.js 文件中创建仓库的实例对象

3. 要 main.js new Vue 的地方配置一个 store 的选项。选项的值就是 2 中 仓库实例对象

如何将仓库中的数据拿到组件中去使用

this.$store 就是仓库的实例对象(就像使用了vue-router，会在vue实例上会挂载$router $route)

1. 直接使用 this.$store 的方式在组件 template 模板中使用 （不推荐）

组件中使用 计算属性 去拿 仓库的数据

1
2
3
4
5
6
7
8
9
10

​    computed: {  title () { return this.$store.state.title }  }
//也可以是
import { mapState  } from ‘vuex’
computed: mapState（['title']）
//
computed:
mapState ({  pageTitle: state => state.title 
//pageTitle (state) { return satte.title}
})

3. 借助 vuex 提供的辅助函数 mapState

mapState([]) - 组件的computed 的 key 必须要跟仓库中 state 里面某个key 相同

mapState({}) - 组件的computed 的 key 可以自定义。

4. 将 mapState 与 组件自身的 computed 结合 （推荐）

1
2
3
4
5
6
7
8
9
10
11
12

computed: {

  ...mapState(['title']),

  firstName () {

​    return this.name.split('')[0]

  }

},

如何修改仓库中的数据

1. 先需要在仓库中定义我们的mutation

2. 在组件中提交这个mutaion

   1. this.$store.commit(‘mutaion的名字’, 要传递的参数)

   2. this.$store.commit({

​ type: mutaion的名字,

​ 其余的参数

})

3. mapMutations 辅助函数

mutation不允许异步代码的

如何写异步代码在仓库中 actions

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

1. 每一个action里面都可以写异步代码，但是action并不能修改state中的数据，真正修改数据的还是 mutaction

2. 在组件中如何派发这个action

   1. this.$store.dispatch(‘action的名字’)

   2. mapActions 辅助函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

6.6

组件复用问题

路由懒加载

在你具体去哪个路由的时候，再加载对应组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('../views/Index/index.vue'),
      children: [
        {
          path: 'home',
          component: () => import('../views/Index/home.vue')
        },
        {
          path: 'about',
          component: () => import('../views/Index/about.vue')
        },
        {
          path: 'center',
          component: () => import('../views/Index/center.vue')
        },
        {
          path: '',
          redirect: '/home'
        }
      ]
    }]
    })

前端路由 vue-router

根据不同的请求地址，能够让页面上某个组件进行切换显示

1.安装vue-router npm i vue-router -D
2.项目中选择某个位置放入一个坑，router-view这个组件
3.项目中配置路由规则 ，最后要暴露出去路由器的实例对象
4.在main.js中也就是new vue的地方需要将第三步中暴露出来的 router 实例对象配置 根组件的 router 选项

router-view 路由组件要显示的地方

router-link 这是使用了路由之后，提供给我们的一个全局组件，他就是一个 a 标签，能帮我们实现路由的切换

props：-to ke
-active-class 能够让我们修改高两类的名字

router-link 与 a标签的区别：
1. 默认情况下，a标签的链接需要写 # 而router-link不需要
2. router-link 可以帮助我们实现高亮的效果
页面渲染后被点击的标签会带有一个class类名

1

<a href="#/home" class="router-link-exact-active router-link-active">点我切换显示home</a>

在组件中里利用router-link-active这个类，来实现高亮效果

动态路由匹配

动态路径参数以冒号开头
当我们使用上路由后，会在Vue的原型上挂载 两个属性

• $routev 当前匹配的路由对象信息
• $router 路由器的实例对象

1
2
3
4
5

{
    // 通过 ：来指定后面的id是动态路由参数
    path: '/detail/:id',
    component: Detail
 }

当匹配到一个路由时，参数值会被设置到 this.$route.params,可以在每个组件内使用(zai template中可以省略this)
this.$route.query可以拿到地址后面的参数，问号后面的参数不影响路由匹配

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const routes = [
  {
    path: '/home',
    component: Home,
    children: [//通过children 来写子集
      {
        path: 'page1',
        component: page1
      },
      {
        path: 'page2',
        component: page2
      }
    ]
  }]
  //子集路由地址前不用加斜杠/

编程式导航

如何用 js 代码来控制路由的跳转
$router.push() 跳转页面，新增一个历史记录
$router.back() 后退
$router.forward
$router.go() 根据参数来看是前进还是后退
$router.replace() 重定向，跳转页面，不加历史记录

router-link 上也可以加 replace等

命名路由

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

1
2
3
4
5
6
7
8
9

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

1

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

1

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

1
2
3

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

1
2
3
4
5
6
7
8
9
10
11
12

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,//default会将Foo组件渲染在没有命名的视图里
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向与别名

• 重定向

  1 2 3 4 5 6

  const router = new VueRouter({ routes: [ { path: '/page1', component: page1}, { path: '*', redirect: '/home' }//在路由规则中，地址在这条规则之前都没匹配上，那么这条规则就将地址重定向到/home页面 ] })

• 别名 alias

  1 2 3 4 5

  const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] })

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：

• 布尔模式

• 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  const User = { props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] })

就是在组件路由上配置props选项为true，这个就是布尔模式，如果 props 被设置为 true，route.params 将会被设置为组件属性，在组件中通过props：[,]来接收相应的参数，就可以在组件标签上使用该参数，不会受到url地址的约束

• 对象模式

• 如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

  1 2 3 4 5 6

  const router = new VueRouter({ routes: [ { path: '/promotion/from-newsletter', component: Promotion, props: { abc: 123 } } ] }) //

• 函数模式

• 你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

  1 2 3 4 5 6

  const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q id: route.params.id}) } ] })

URL /search?q=vue 会将 {query: ‘vue’} 作为属性传递给 SearchUser 组件。

HTML5 History 模式

vue路由的两种模式

• hash（默认）在url上存在#号

• history

  要修改当前路由模式可以在 实例化 路由器对象的时候设置 mode 选项

  1 2 3 4

  new VueRouter({ mode: 'history', router })

• 这两种模式的区别

1.从外观上说，hash模式会在url地址上面有一个#号，而history没有，
更像url地址

2. 从原理上来说，hash模式是通过 window.onHashChange 这个事件来处理的，
   而history模式 是基于html5中history 新增的一些api， historty.pushState()\history.replaceState() \window.onpopstate 来实现的
3. history 模式需要后台的配合

window.onpopstate ：监听浏览器前进后退按钮，能触发这个事件
新属性使用：

你上家公司使用的是什么模式？

vue导航守卫 ( 路由拦截 )

主要分三大块

• 全局

  • 全局前置 beforeEach
  • router.beforeEach((to,from,next) =>{})
  • 全局解析守卫 beforeResolve
  • 全局后置守卫 beforeEach
  • router.beforeEach((to,from）=>{})

• 路由独享

  • beforeEnter 进入当前路由时

• 组件级别的

  • beforeRouteEnter (to, from, next) {} 进入当前组件时
  • beforeRouteUpdate (to, from, next) {} 进入当前组件时
  • beforeRouteLeave (to, from, next) {} 退出当前组件时

导航守卫的钩子函数

在路由发生变化的时候会主动触发的一些函数

作用场景

1. beforeEach 与 afterEach 能实现页面进度条的效果
2. 登录拦截
   1. 先排除 组件级别
   2. afterEach 排除
   3. 正常情况下，如果是后台管理系统的话，因为处理登录与注册页面之外其他的都需要做登录的拦截，那么就可以再 全局前置 里面去做。如果项目中只有那么一个到两个需要做拦截的页面，那么就可以再他们自己的路由独享里面去做。

计算属性（computed）和侦听（watch）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!-- //计算属性 -->
<div id="app">
<p @click='deal("你好")'>{{fullName}}</p>

<!-- //wacth侦听 -->
<p>{{trans}}</p>
 </div>
</body>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      msg:"计算属性与watch侦听的学习",
      firstName:'anni',
      lastName:'veter',
      trans:''
    },
    methods:{
      deal(str){
        this.fullName=str;
      }
    },
    computed:{
      fullName:{
        get(){
          return this.firstName+" "+this.lastName;
        },
        set(str){
          console.log();
          this.firstName=str;
        }
      }
    },
      
    watch:{
      fullName(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
        this.trans="旧数据："+oldVal+"新数据："+newVal;
      }
    }
      
  })
</script>

watch执行异步请求示例，音乐搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<div id="music">
    <h1>音乐搜索</h1>
    <input type="text" placeholder="请输入要搜索的音乐" v-model="searchVal" ref="input">
    <ul>
      <li
      v-for='item in musicList'
      :key='item._id'
      >{{ item.title }}</li>
      <p v-if="musicList.length===0">未找到匹配歌曲</p>
    </ul>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var vm = new Vue({
    el:'#music',
    data:{
      searchVal:'',//存放搜索的数据
      musicList:[]//放后台返回的数据
    },
    watch:{
      
      searchVal:{

      //watch可以进行异步操作（一下这么写是为了，自动自行一次异步请求，不需要自请求一次，还是按原来的写）
      handler(newVal,oldVal){
        clearTimeout(this.timer);
        // console.log(this);
//延时是为了防抖节流
        this.timer = setTimeout(() => {
          $.get('http://58.87.126.209:7001/api/v1/music',
          {title:newVal},
          (res)=>{
            console.log(res);
            if(res.code === 0){
              this.musicList=res.data.list;
              // this.$refs.input.focus();
            }else{
              alert('网络异常');
            }
          })
        },300)
      },
        immediate:true//通过这个属性，以当前值，执行回调和函数
      }
    }
    
  })
</script>

总结一下：computed和watch的区别：

1.computed根据现有数据，计算出新的结果

2.watch没有返回值，watch可以进行异步操作，computed不能！！！

3.watch可以侦听现有的data和computed的数据改变，进而执行相应的函数

mixin混入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//通过定义一个对象来存储mixin的选项（除了el，propsData）
var common={
    data(){
      return {msg:'你好'}
    },
    methods:{
      fn1(){
        console.log('common fn1');
      }
    },
    mounted(){
      console.log('生命周期函数');
    }
    
  }
  var vm1 = new Vue({
    el:'#app',
    mixins:[common],//混入
    methods:{
      fn1(){
        console.log('你好');
      }
    },
    data:{
      msg:'11111',
      text:'123'
    },
    mounted(){
      console.log('生命');
    }
  })
  var vm2 = new Vue({
    el:'#app1',
    mixins:[common]//通过mixins挂载到vue实例身上
  })

总结一下：
1.方法以自身的为主
2.data与自身data相同的，以自身为主
3.生命周期函数，会先执混入的，在执行自身的

4.除了 el 与 propsData 这两个选项之外其他的选项都可以，混入。
5.data如果是一个混入对象的选项，那么data需要使用工厂模式
弄成一个方法，方法里面返回对象

组件、vue实例的template

1
2
3
4
5
6

<div id="app" @click='fn1'>
    <world/>
  </div>
  <div id='app2'>
    <world/>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

Vue.component('world',{
      // 这里写法跟 mixin 很像，都是能够使用 new Vue 时传递的哪些选项。
      // 1. el 与 propsData 不能用
      // 2. data 必须是一个函数返回对象的形式。
      // 3. 组件必须要有一个选项是，template 选项，这个选项指定我们组件的内容。(标签可以使用自闭和)
      //4.当全局组件和局部组件同名时，以局部组件为主
      template:`<div>你好</div>`,
      mounted(){
        console.log(1);
      }
});
      
  new Vue({
    el:'#app',
    data:{
      msg:'123'
    },
    components:{//局部注册，通过components:
      'world':{//组件名：{组件选项对象}
        data(){
          return {msg:'world'}
        },
      template: `
        <div>
          <h1 @click='fn1'>我是 {{msg}} 组件</h1>
        </div>
      `,
      methods:{
        fn1(){
          console.log(123);
      }}
    }
     
    },
    methods:{
      fn1(){
        console.log(121);
      }
    }
  })
 
    // vue 实例也可以设置 template 选项，当有tempalte选项的时候，挂载点会整个被tempalte模板内容给替换。

  new Vue({
    el:'#app2',
    template:`
    <input>`
  })

组件组件本质上是一个拥有预定义选项的一个 Vue 实例

组件template的优化写法

1. 直接使用 模板字符串的方式
2. 使用单文件组件 （推荐）
3. 使用 script 标签的方式(这里暂时用这种)

1
2
3

<div id="app">
    <hi/><p>{{msg}}</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script id='h' type="text/x-template">
  <div>
    <p>我是一个组件，使用script标签写法实现的组件</p>

  </div>
</script>

 <script>
   Vue.component('hi',{
     template:"#h"
   })
   new Vue({
     el:'#app',
     data:{
      msg:'123456'
     }
   })
 </script>

组件通信

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="app">
    <father/>
</div>
  <script src="./lib/vue.js"></script>
  <!-- 父组件 -->
  <script id="father" type="text/x-template">
    <div>
      <h1>我是父组件</h1>
      <son :name='sonName' :sex='sonSex' @msg='fn'/>
    </div>
  </script>
  <!-- 子组件 -->
  <script id="child" type="text/x-template">
    <div>
      <h2>我是子组件，受父组件调控</h2>
      <p>我叫：{{name}}</p>
      <p>性别：{{sex}}</p>
      <button @click='tran("event")'>18岁了，我想改名</button>
      <!-- 这里是直接改的props里的值，相当于改data中的数据，但是这里会报错 -->
      <button @click='tran2({name:"李立其",sex:"女"})'>25岁，我想改变一下，我和父亲说</button>
    </div>
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

  <script>
// 父组件
Vue.component('father',{
  template:'#father',
  data(){
    return {
      sonName:'李四',
      sonSex:'男'
    }
  },
  methods:{
    // 与子通信方法
    //接收子传递的信息
    fn(payload){
      this.sonName=payload.name;
      this.sonSex=payload.sex;
    }
  }
});
//子组件
Vue.component('son',{
  template:'#child',
  props:['name','sex'],
  methods:{
    tran(str){
      console.log(this.name);
      this.name='李云海';
    },
    tran2(obj){
      // 子于父通信，触发父给的自定义事件msg，this.$emit('事件名'，参数)
      this.$emit('msg',obj);
    }
  }
});

    new Vue({
      el:'#app'

    })
    // 子要与父通信，通过，父给设的自定义事件this.$emit()触发自定义方法
  </script>

从html开始看–>js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

li{
    width: 200px;
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #333;
}
/* .item--color{
    background:green;
} */
.tab{
    color: red;
}
.list--item{
    width: 100px;
    height: 50px;
    margin: 0 auto;
}
.p--color{
    background: orange;
    text-align: center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

    <div id="list">
        <ul>
            <li 
            class="item" 

            :class="{ 'item--color' : curItem === index}"
            
            v-for="(item,index) in 5"

            @click="color(index)"

            :key='item'

            :style="styleObj"
            >{{ item }}</li>
        </ul>
<hr>
//首页列表也跳转
        <button
        :class="{'tab': curTab ===item.id}"

        v-for="item in tabs"

        :key='item.id'

        @click="turn(item.id)"

        >{{item.name}}</button>

        <div v-if=" curTab === 'home' ">
            <h1>首页</h1>
        </div>
        <div v-if="curTab === 'list'">
            <h1>列表页</h1>
        </div>
<hr>
//enter变色
        <div class="list--item">
            <p
            :class="{'p--color':curItem === p.id}"
            v-for="p in listItem"
            :key="p.id"
            @mouseenter="over(p.id)"
            >{{p.name}}</p>
        </div>
    </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el:'#list',
        data:{
            curItem:0,
            styleObj:{
                color:'red',
                background: 'rgba(120,150,255)',
                fontSize:"20px"
            },
            style:{
                background:'origin'
            },
            curTab:"home",
            tabs:[
                {id:'home',name:'首页'},
                {id:'list',name:'列表页'}
            ],
            listItem:[
                {id:1,name:'李蕾'},
                {id:2,name:'李明'},
                {id:3,name:'李良'},
                {id:4,name:'李华'}
            ]
        },
        methods:{
            color(index){
                this.curItem=index;
            },
            turn(id){
                this.curTab=id;
            },
            over(index){
                this.curItem=index;
            }
        }
    })
</script>

条件渲染分组，v-if和v-for一起使用

对上一篇中v-if系列的一个补充拓展
1.分组渲染

1
2
3
4
5
6

<template v-if="ok">
<!--最后的渲染效果不会渲染temlate标签，该标签方便我们进行分组渲染，而不会然css样式出现无效-->
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

2.v-if 和 v-for 的混合使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先;在大型数据遍历判断时，会造成性能的浪费，现阶段建议使用如下方法

1
2
3
4
5
6

<div class="test">
    <ul>
    <!-- 将有手机的学生信息列出，在v-for='item in msg' v-if='havephone'会造成性能的浪费-->
        <li v-for="item in msg.filter((value,index)=>{value.havephoe})" key="item.id">{{item.name}}</li>
    </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

new Vue({
    el:'.test',
    data:{
        msg:[
            {id:1,name:'lisi',age:15,havephoe:false}
            {id:2,name:'lii',age:12,havephoe:false}
            {id:3,name:'lsi',age:12,havephoe:true}
            {id:4,name:'li',age:5,havephoe:false}
            {id:5,name:'lis',age:13,havephoe:false}
            {id:6,name:'lise',age:14,havephoe:ture}
        ]
    }
})

事件处理

就是对v-on监听dom事件
事件的修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    <!-- 阻止单击事件继续传播(冒泡) -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 (阻止默认事件)-->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

按键修饰符

1
2
3
4

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit" >
<!-- pagedown -->
<input v-on:keyup.page-down="onPageDown">

1
2

 // 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

更多修饰符见官网（https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6）

vue使用是MVVM模式

基本指令 （前提是已安装vue或以将vue.js文件引入，详细操作见官方文档:(https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5)）

• 插值(在文本域插值只能用v-model)

  1 2 3 4 5

  <div class="app"> <!-- （可先跳过这段文字）这里只是给vue提供的挂载点，也就是vue.js将会通过el: '.app' （如果是id，就是el :'#类名'） --> <p> {{message}}{{tip}}</p> <!-- 通过双花括号将数据带入，也可以带入一个单表达式 （这是一种模板语法）--> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13

var app = new Vue({
    el : '.app',//vue只会操作或管理该节点内的节点（el===element）
    data :{//需要渲染的数据
        message : 'hello vue',
        tip: '名字随便写'
    },

    // method: {},
    // computed:{}
});

//可以通过app.$mount('.app')添加挂载

下面的演示会解释的简单些，请理解以上插值的过程，再阅读一下文字

• v-if & v-else & v-else-if & v-show

  1 2 3 4

  <div id="app"> <p v-if='height>200'>{{message}}</p> <p v-else>你好</p> </div>

  v-if和v-else要相邻使用，如果中间有其他原素是达不到想要的效果的

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  <script>
      new Vue({
          el:'#app',
          data:{
              message:'hello',
              height:155
          }
      
      })
  </script>
  

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  <div id="app"> <p v-if='height>100'>{{message}}</p> <p v-else-if='height>160'>你好</p> <p v-else>简单理解一下</p> <p v-show='height>=155'>在控制台查看通过v-if被隐藏的标签和v-show的区别</p> <p v-show='height<155'>隐藏</p> </div> //js代码 var app= new Vue({ data: { message: 'hello', height: 155 } }) app.$mount('#app');//通过vm.$mount('类名'),可以给vue添加挂载

v-if 与 v-show 的区别
v-if判断结果为false会让原素变为html注释，而v-show则是给原素添加display属性
1. 他们都能实现元素的显示隐藏
2. v-show只是简单控制元素的display属性（不管条件为真还是为假，这个元素都会被渲染出来），而v-if才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）
3. v-show有更高的首次渲染开销。v-if的首次渲染开销要小得多。
4. v-if有更高的切换开销，v-show切换开销小
5. v-if有配套的 v-else-if 和 v-else，而v-show没有

v-once数据渲染一次，数据改变时，加了v-once的原素数据，保持第一次渲染的数据

• v-text；v-html向html页面输出html元素(不推荐使用该方法，会带来xss攻击隐患)

  1 2 3 4 5

  <div id="app"> <p>{{button}}</p>//直接输出的是字符串 <p v-html='button'></p> <p v-text='msg'>你猜</p> </div>

  1 2 3 4 5 6 7 8

  new Vue({ el:'#app', data:{ msg: 'v-text注入信息，会将原标签内的数据给覆盖显示，使用了v-text/v-html，再在标签内写直接书写数据是不显示的' button:'<button>按钮</button>' } })

• v-bind属性、样式、类的绑定…,v-on绑定事件

  1 2 3 4 5 6 7 8 9 10 11

  v-bind简写 ‘：’ v-on简写‘@’ <div id="app"> <p v-bind:title='msg'>{{msg}}</p> <p v-bind:style="{ color: activeColor}">121212</p> <p :class="{ box1 : isOk }">11111</p> <p v-bind:[attrname]='msg'><p> <!-- 动态属性绑定 --> <p :class='active'></p> <div @click='reverse()'>{{msg}}</div> </div>

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  new Vue({ el:'#app', data:{ isOk:true, msg:'按钮', activeColor:'red', attrname:'title' }, method:{ reverse(){ this.msg=this.msg.split('').reverse().join('') } } })

• v-model双向绑定

  v-model绑定的数据改变，会实时刷新

  1 2 3 4 5 6 7

  <div id="app"> <p v-bind:title='msg'>{{msg}}</p> <input type='text' v-model.number='msg'> <input type='text' v-model.trim='msg'><!--去除用户输入的前后的空格--> <input type='text' v-model.lazy='msg'><!--model是实时更新数据的，加了lazy修饰符，就会在失去焦点时才写入数据--> </div> <!-- 如果输入的值类型与修饰符的类型不同v-model.number这个number，vue会使用第一次输入值的类型，后续输入的会住哪换成该类型显示，转换不了就会抛弃 -->

  1 2 3 4 5 6 7 8 9 10 11 12 13

  new Vue({ el:'#app', data:{ msg:'按钮', activeColor:'red' }, method:{ reverse(){ this.msg=this.msg.split('').reverse().join('') } } })

• v-for循环

  1 2 3 4 5 6 7 8 9 10 11 12 13

  <div class="app"> <p v-for='(item,index) in num' :key='index'> {{item}}</p> <!-- 1. 如果在v-for的时候没有给循环的每一项设置一个唯一的标识符的话，那么后续这个数据发生变化，页面重新渲染，是完全的将之前的列表项给删掉然后重新渲染的。 2. 如果给了唯一的标识的话，那么没有变化的，可以直接复用上。让性能更高效。 我们需要确保的就是： 每次 v-for 循环都需要给每一个循环项目加上唯一的标识，使用 v-bind:key="" 最好不要使用下标来做唯一标示。使用数据中的唯一的属性。 --> <p v-for='(value,key,index) in obj'> {{value}}{{key}}{{index}}</p> <p v-for='i in 10'> {{i}}</p> <!-- 十次循环 --> </div>

  1 2 3 4 5 6 7 8 9

  //可循环遍历对象，数组，字符串... new Vue({ el:'.app', data:{ msg:'一段文字', num:[1,2,3,4,5,6], obj:{name:'lili',age:15,sex:'男'} } })

其实vue中的数据绑定原理是这样的 ⬇

1

<div id="box"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var boxEl = document.getElementById('box');

// 使用es5 
Object.defineProperty(boxEl, 'name', {
  get: function () {
    console.log('你要取值了');
    return boxEl.innerHTML;
  },

  set: function (value) {
    console.log('你要设置内容了');
    boxEl.innerHTML = value;
  }
})
// boxEl.name//获取数据，进入的是get方法
// boxEl.name = '123123'//设置数据，进入set方法

解决浏览器渲染的跳动：给元素添加 v-cloak属性，再添加样式[v-cloak]{display:none},这样在浏览器渲染完成前，原始的在html中的数据是不会显示的

数据监测

####
数组：
使用一些变异方法或者直接替换数组都能引起页面的更新。

但是以下两个操作不会：  1. 直接根据数据下标来修改     vm.list[0] = 9;  2. 直接修改数据的长度         vm.list.length = 10;解决方式：  1. 使用 Vue.set 原型方法  2. 使用 vm.$set 实例方法  Vue.set(target, index, value);  vm.$set(target, index, value);对象Vue 不能检测对象属性的添加或删除：Vue.set(target, key, value);vm.$set(target, key, value);

如看完这些还不是很了解，请看 (https://zhan1025.github.io/2019/05/28/vue入门基础1，助解原码/)

在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 为了深入理解 requestAnimationFrame 背后的原理，我们首先需要了解一下与之相关的几个概念：

1、屏幕刷新频率

即图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)。 对于一般笔记本电脑，这个频率大概是60Hz， 可以在桌面上右键->屏幕分辨率->高级设置->监视器 中查看和设置。这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响，原则上设置成让眼睛看着舒适的值都行。

市面上常见的显示器有两种，即CRT和LCD， CRT就是传统显示器，LCD就是我们常说的液晶显示器。

CRT是一种使用阴极射线管的显示器，屏幕上的图形图像是由一个个因电子束击打而发光的荧光点组成，由于显像管内荧光粉受到电子束击打后发光的时间很短，所以电子束必须不断击打荧光粉使其持续发光。电子束每秒击打荧光粉的次数就是屏幕刷新频率。

而对于LCD来说，则不存在刷新频率的问题，它根本就不需要刷新。因为LCD中每个像素都在持续不断地发光，直到不发光的电压改变并被送到控制器中，所以LCD不会有电子束击打荧光粉而引起的闪烁现象。

因此，当你对着电脑屏幕什么也不做的情况下，显示器也会以每秒60次的频率正在不断的更新屏幕上的图像。为什么你感觉不到这个变化？ 那是因为人的眼睛有视觉停留效应，即前一副画面留在大脑的印象还没消失，紧接着后一副画面就跟上来了，这中间只间隔了16.7ms(1000/60≈16.7)， 所以会让你误以为屏幕上的图像是静止不动的。而屏幕给你的这种感觉是对的，试想一下，如果刷新频率变成1次/秒，屏幕上的图像就会出现严重的闪烁，这样就很容易引起眼睛疲劳、酸痛和头晕目眩等症状。

2、动画原理

根据上面的原理我们知道，你眼前所看到图像正在以每秒60次的频率刷新，由于刷新频率很高，因此你感觉不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。 那怎么样才能做到这种效果呢？

刷新频率为60Hz的屏幕每16.7ms刷新一次，我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px。这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，因此你会看到图像在移动；由于我们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，因此你才会看到图像在流畅的移动，这就是视觉效果上形成的动画。

3、setTimeout

理解了上面的概念以后，我们不难发现，setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但我们会发现，利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：

setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。 那为什么步调不一致就会引起丢帧呢？

首先要明白，setTimeout的执行只是在内存中对图像属性进行改变，这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px， 就会出现如下绘制过程：

第0ms: 屏幕未刷新，等待中，setTimeout也未执行，等待中；

第10ms: 屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；

第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了1px， setTimeout 未执行，继续等待中；

第20ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;

第30ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;

第33.4ms:屏幕开始刷新，屏幕上的图像向左移动了3px， setTimeout未执行，继续等待中；

…

从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画面，图像直接从1px的位置跳到了3px的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。

4、requestAnimationFrame

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

这个API的调用很简单，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var progress = 0;

//回调函数

function render() {

    progress += 1; //修改图像的位置


    if (progress < 100) {

           //在动画没有结束前，递归渲染

           window.requestAnimationFrame(render);

    }

}


//第一帧渲染

window.requestAnimationFrame(render);

除此之外，requestAnimationFrame还有以下两个优势：

CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

5、优雅降级

由于requestAnimationFrame目前还存在兼容性问题，而且不同的浏览器还需要带不同的前缀。因此需要通过优雅降级的方式对requestAnimationFrame进行封装，优先使用高级特性，然后再根据不同浏览器的情况进行回退，直止只能使用setTimeout的情况。下面的代码就是有人在github上提供的polyfill，详细介绍请参考github代码 requestAnimationFrame（https://github.com/darius/requestAnimationFrame）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

if (!Date.now)

    Date.now = function() { return new Date().getTime(); };


(function() {

    'use strict';

    

    var vendors = ['webkit', 'moz'];

    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {

        var vp = vendors[i];

        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];

        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']

                                   || window[vp+'CancelRequestAnimationFrame']);

    }

    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy

        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {

        var lastTime = 0;

        window.requestAnimationFrame = function(callback) {

            var now = Date.now();

            var nextTime = Math.max(lastTime + 16, now);

            return setTimeout(function() { callback(lastTime = nextTime); },

                              nextTime - now);

        };

        window.cancelAnimationFrame = clearTimeout;

    }

}());

====原文来自====：一像素

www.cnblogs.com/onepixel/p/7078617.html

​ 首先中间件有很多，你可以把他当作一个函数，或者是说是一个模块，
想必你用过 react-thunk ，react-logger…,那么thunk也可以完成saga的工作，只能说有的人喜欢挑战，就是要用saga
主要是想让saga来处理异步请求操作

saga

saga自述

1. 安装saga yarn add react-saga

2. 在你的redux主仓库中添加，

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   // 2. 引入saga 引入saga的主要处理文件 import createSagaMiddleware from 'redux-saga'; // @是配了别名的，写的路径就是你saga文件的路径 import todoSaga from '@/views/TodoList/store/todoSaga'; // 3.创建saga中间件 const sagaMiddleware = createSagaMiddleware(); . . . //仓库暴露出去的东西 export default createStore( combineReducers({ todo: todoReducer }), composeEnhancers( // 使用上中间件 applyMiddleware(sagaMiddleware)) ); // run todoSaga sagaMiddleware.run(todoSaga)

3. 在仓库中（我这边是组件的小仓库）创建saga文件

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   // 注意这个，这里是saga提供的一些方法 import { takeEvery, put } from 'redux-saga/effects'; import { FETCH_TODO_LIST } from './actionTypes'; import { initTodoListAction } from './actionCreates'; // 处理一个异步请求 function* init () { let response = yield fetch('http://localhost:3001/todoList'); let res = yield response.json(); yield put (initTodoListAction(res)); } // 暴露一个方法 const todoSaga = function *() { // takeEvery('action type',要做的事情) // 监听/拦截到这个动作，进行操作 yield takeEvery(FETCH_TODO_LIST, init); } export default todoSaga; /** *这边的saga作为中间件利用takeEvery拦截到组件（ui组件发出的action）， *对action.type做拦截，然后在这个文件里，做异步请求。在请求完成后再将数据通过 *saga提供的方法put===store.dispatch *派发了以后，会进入到reducer中，对仓库里的数据进行一些操作 */