理解闭包

变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

1
2
3
4
5
6
7

　　var n=999;

　　function f1(){
　　　　alert(n);
　　}

　　f1(); // 999

另一方面，在函数外部自然无法读取函数内的局部变量。

1
2
3
4
5

　　function f1(){
　　　　var n=999;
　　}

　　alert(n); // error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

1
2
3
4
5
6
7

　　function f1(){
　　　　n=999;
　　}

　　f1();

　　alert(n); // 999

如何从外部读取局部变量？

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

1
2
3
4
5
6
7
8
9

　　function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n); // 999
　　　　}

　　}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

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

　　function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

专业的讲，一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

我的理解是，闭包就是能够读取其他函数内部变量的函数。

上一节代码中的f2函数，就是闭包。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢？请看下面的代码。

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

　　function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

　　nAdd();

　　result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是”nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

最近运行Springboot项目是，报了一个端口号被占用的错

1
2
3
4
5
6
7

Description:

Web server failed to start. Port 10000 was already in use.

Action:

Identify and stop the process that's listening on port 10000 or configure this application to listen on another port.

报错原因：端口被占用。

解决办法

1.使用cmd命令查看端口号占用情况，例如查看端口10000，可以看出进程号为5372；

1

netstat -ano | findstr 10000

2.关闭该进程

方法一： 使用命令关闭

命令：

1

taskkill /F /pid 5372 

如果是非管理员用户可能报拒绝访问的错误

重新以管理员的身份打开cmd窗口，重新运行以上的关闭进程命令

方法二：使用任务管理器关闭：

菜单栏 -> 右键 - > 任务管理器 -> 详细信息，根据PID排序找到PID为5372的进程，选择后点击结束任务。

发现问题

优于长时间没进Linux连接mysql，今天进入Linux连接mysql，使用docker ps，mysql的状态一直是Restarting (1) x seconds ago，mysql一直在重启无法连接

查看日志

1

docker logs mysql

发现是内存不足

1
2
3

......
2021-06-14T11:41:26.576589Z 0 [ERROR] InnoDB: Error number 28 means 'No space left on device'
......

使用 df -h 查看 发现是 /var/docker/overlay2里面的东西占了很大的空间

检查内存占用情况，发现vagrant占用36G，一路找下去，发现到application data目录无线循环，上网搜索发现了问题所在。

ls查看发现里的东西很多和我本机C盘里的文件一模一样 AppData之类的 为什么这些东西会在虚拟机里 虚拟机同步了C盘里的内容 百度发现 vagrant提供了将本机

目录挂载到虚拟机目录下的功能，默认是将vagrant配置文件所在目录挂载到虚拟机/vagrant目录下。

也就是说 我的VagrantFile 是 C/user/username/VagrantFile 那么所有和VagrantFile同级的 C/user/username/里面的内容会全部同步到vagrant中 导致虚拟机内存爆满

解决办法

1. 在和Vagrantfile同级目录（C:\Users\Administrator\）创建一个自己的文件夹,我的叫VagrantSyncFolder

2. 然后打开目录到C:\Users\Administrator.vagrant.d\boxes\centos-VAGRANTSLASH-7\2004.01\virtualbox

   

3. 打开Vagrantfile，

   config.vm.synced_folder “.”, “/vagrant”, type: “rsync”

   修改为

   config.vm.synced_folder “./vagrantCache”, “/vagrant”, type: “rsync”

   

4. 修改完这个之后,vagrant reload发现还是不行,猜测可能只有vagrant成功重启之后修改的这个映射才能生效,但是已经占用100%不能成功重启,没办法,只能删东

   西了

   查看了一下vagrant目录里文件的大小

   1

   du -sh *

   

   其中AppData很大

   试着删了一下3D Objects文件里的一些东西,发现文件里的文件并没有影响,ok,直接将AppData删了,释放了很大的空间，然后exit退出

   vagrant reload重启，大功告成！

   

其实这种情况，可能在使用vagrant up命令的时候就会报Rsync 错误，可以参考这篇文章，其问题和上方的一样

Windows 10 上的 CentOS 7 Vagrant 框出现 Rsync 错误

介绍

2020年9月18日Vue.js 3.0“海贼王”正式发布。该框架的这个新主要版本提供了改进的性能、更小的包大小、更好的 TypeScript 集成、用于处理大规模用例的新 API，以及该框架未来长期迭代的坚实基础。

特点：

• 随着时间的推移，它演变成我们所说的“渐进式框架”：一个可以逐渐学习和采用的框架，同时随着用户处理越来越多的要求的场景提供持续的支持。
• Vue 3.0 核心仍然可以通过一个简单的<script>标签使用，但它的内部已经从头开始重写为一组解耦模块。新架构提供了更好的可维护性，并允许最终用户通过 tree-shaking 将运行时大小减少一半。
• 2.x 基于对象的 API 在 Vue 3 中基本保持不变。但是，3.0 还引入了Composition API——一组新的 API，旨在解决 Vue 在大规模应用程序中使用的痛点。
• 性能改进
• Vue 3 的代码库是用 TypeScript 编写的，具有自动生成、测试和捆绑的类型定义，因此它们始终是最新的

快速上手

使用 vue-cli 创建Vue3.0工程

先查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

1

vue --version

如果版本过低，就需要安装或者升级你的@vue/cli

1

npm install -g @vue/cli

运行以下命令来创建一个新项目：

1

vue create hello-world

启动项目

1
2

cd hello-world
npm run serve

常用 Composition API

setup

使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。

这是一个大型组件的示例，其中逻辑关注点按颜色进行分组。

这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。

如果能够将同一个逻辑关注点相关代码收集在一起会更好。

setup的设计是为了使用组合式api，使相关逻辑的代码集中在一起.

setup 组件选项

新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。

在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

setup 选项是一个接收 props 和 context 的函数，此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

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

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(prop,context) {
    console.log("prop:",prop)
    console.log("context:",context)
    
    return {} // 这里返回的任何内容都可以用于组件的其余部分
  }
}

使用 setup 函数时，它将接收两个参数：

1. props
2. context

Props

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

1
2
3
4
5
6
7
8
9
10

// MyBook.vue

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

但是，因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。

如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作：

1
2
3
4
5
6
7
8
9

// MyBook.vue

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)

  console.log(title.value)
}

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

1
2
3
4
5
6

// MyBook.vue
import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

props在浏览器的控制台输出如下图：

Context

传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露组件的三个 property：

的三个 property：

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

// MyBook.vue

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

1
2
3
4
5
6

// MyBook.vue
export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用 property。

context在浏览器的控制台输出如下图：

setup注意点：

1. 尽量不要与Vue2.x配置混用
   • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
   • 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
   • 如果有重名, setup优先。
2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
3. 在 setup() 内部，this 不是该活跃实例的引用

执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property：

• props
• attrs
• slots
• emit

换句话说，你将无法访问以下组件选项：

• data
• computed
• methods

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。

示例：

1
2
3
4
5
6
7
8
9
10
11

setup() {
  const count = ref(0)
  function countAdd() {
    count.value++
  }

  return {
    count,
    countAdd
  }
}

如果将对象分配为 ref 值，则通过 reactive 方法使该对象具有高度的响应式。

使用数据

1
2

<h2>count: {{count}}</h2>
<button @click="countAdd">count++</button>

• 接收的数据可以是：基本类型、也可以是对象类型。
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
• 对象类型的数据：内部 使用了Vue3.0中的一个新函数—— reactive函数。

reactive函数

返回对象的响应式副本，Proxy的实例对象

1

const obj = reactive({ count: 0 })

reactive 将解包所有深层的 refs，同时维持 ref 的响应性。

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

const count = ref(1)
const obj = reactive({ count })

// ref 会被解包
console.log(obj.count === count.value) // true

// 它会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// 它也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

Vue3.0中的响应式原理

vue2.x的响应式

• 实现原理：

  • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

  • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

    1 2 3 4

    Object.defineProperty(data, 'count', { get () {}, set () {} })

• 存在问题：

  • 新增属性、删除属性, 界面不会更新。
  • 直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式

• 实现原理:

  • 通过Proxy（代理）: Proxy 是一个对象，它包装了另一个对象，并允许你拦截对该对象的任何交互。

  • 通过Reflect（反射）: 使用 Proxy 的一个难点是 this 绑定。我们希望任何方法都绑定到这个 Proxy，而不是目标对象，这样我们也可以拦截它们。值得庆幸的是，ES6 引入了另一个名为 Reflect 的新特性，它允许我们以最小的代价消除了这个问题：

  • MDN文档中描述的Proxy与Reflect：

    • Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    • Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

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

new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
    	return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'   

计算属性和侦听器

计算属性

有时我们需要依赖于其他状态的状态——在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 方法：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。

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

setup() {
  const person = reactive({
    firstName: '',
    lastName: ''
  })

  person.fullName = computed(() => {
    return person.firstName + ' ' + person.lastName
  })

 return {
   person
 }
}

使用数据

1
2
3
4
5
6
7
8
9
10
11

<template>
  <div class="hello">
    <h1>请输入姓名</h1>
    <h3>firstName</h3>
    <input type="text" v-model="person.firstName" />
    <h3>lastName</h3>
    <input type="text" v-model="person.lastName" />
    <h3>fullName</h3>
    <h3>{{ person.fullName }}</h3>
  </div>
</template>

效果

或者，它可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

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

setup() {
    const person = reactive({
      firstName: "",
      lastName: "",
    });

    person.fullName = computed({
      get() {
        return person.firstName + " " + person.lastName;
      },
      set(newValue) {
        const names = newValue.split(" ");
        person.firstName = names[0];
        person.lastName = names[names.length - 1];
      },
    });

    return {
      person,
    };
},

使用数据

1
2
3
4
5
6
7
8
9
10
11

<template>
  <div class="hello">
    <h1>请输入姓名</h1>
    <h3>fullName</h3>
    <input type="text" v-model="person.fullName" />
    <h3>firstName</h3>
    <h3>{{ person.firstName }}</h3>
    <h3>lastName</h3>
    <h3>{{ person.lastName }}</h3>
  </div>
</template>

效果

Watch

watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。

侦听单个数据源

侦听器数据源可以是返回值的 getter 函数，也可以直接是 ref：

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

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

侦听多个数据源

侦听器还可以使用数组同时侦听多个源：

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

const firstName = ref("zhang");
const lastName = ref("san");

watch([firstName, lastName], (newValues, prevValues) => {
  console.log(newValues, prevValues);
});

function changeFirstName() {
  firstName.value = "Steve"; // logs: ["Steve", "san"] ["zhang", "san"]
}

function changeLastName() {
  lastName.value = "Jobs";  // logs: ["zhang", "Jobs"] ["zhang", "san"]
}

尽管如此，如果你在同一个方法里同时改变这些被侦听的来源，侦听器仍只会执行一次：

1
2
3
4
5

function changeFullName() {
  firstName.value = "Steve";
  lastName.value = "Jobs";
  // 打印 ["Steve", "Jobs"] ["zhang", "san"]
}

注意多个同步更改只会触发一次侦听器。

两个小“坑”：

• 监视reactive定义的响应式数据时：oldValue无法正确获取、默认已经强制开启了深度监视（deep配置失效）。
• 监视reactive定义的响应式数据中某个属性时：deep配置有效。

watchEffect

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。

  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

    1 2 3 4 5 6

    //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。 watchEffect(()=>{ const x1 = sum.value const x2 = person.age console.log('watchEffect配置的回调执行了') })

生命周期

下表包含如何在 setup () 内部调用生命周期钩子：

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

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

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。

当从组合式函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散：

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

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 操作 state 的逻辑

  // 返回时转换为ref
  return toRefs(state)
}

export default {
  setup() {
    // 可以在不失去响应性的情况下解构
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}

toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef

其他 Composition API

shallowReactive 与 shallowRef

• shallowReactive：创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换

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

  const state = shallowReactive({ foo: 1, nested: { bar: 2 } }) // 改变 state 本身的性质是响应式的 state.foo++ // ...但是不转换嵌套对象 isReactive(state.nested) // false state.nested.bar++ // 非响应式

• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

  1 2 3 4 5

  const foo = shallowRef({}) // 改变 ref 的值是响应式的 foo.value = {} // 但是这个值不会被转换。 isReactive(foo.value) // false

• 什么时候使用?

  • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

readonly 与 shallowReadonly

• readonly: 接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。只读代理是深层的：任何被访问的嵌套 property 也是只读的。

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

  const original = reactive({ count: 0 }) const copy = readonly(original) watchEffect(() => { // 用于响应性追踪 console.log(copy.count) }) // 变更 original 会触发依赖于副本的侦听器 original.count++ // 变更副本将失败并导致警告 copy.count++ // 警告!

• shallowReadonly：创建一个 proxy，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。

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

  const state = shallowReadonly({ foo: 1, nested: { bar: 2 } }) // 改变 state 本身的 property 将失败 state.foo++ // ...但适用于嵌套对象 isReadonly(state.nested) // false state.nested.bar++ // 适用

• 应用场景: 不希望数据被修改时。

toRaw 与 markRaw

• toRaw：

  • 作用：将一个由reactive生成的响应式对象转为普通对象。
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

• markRaw：

  • 作用：标记一个对象，使其永远不会再成为响应式对象。返回对象本身。

    1 2 3 4 5 6

    const foo = markRaw({}) console.log(isReactive(reactive(foo))) // false // 嵌套在其他响应式对象中时也可以使用 const bar = reactive({ foo }) console.log(isReactive(bar.foo)) // false

    有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象

    当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能。

customRef

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

自定义customRef配合自定义hook函数使用。

什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

在项目中新建hooks文件夹，在hooks文件夹下新建useDebounce.js文件

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

import { customRef } from "vue"

export default function(value, delay = 1000) {
    let timeout
    return customRef((track, trigger) => {
      return {
        get() {
          track()
          return value
        },
        set(newValue) {
          clearTimeout(timeout)
          timeout = setTimeout(() => {
            value = newValue
            trigger()
          }, delay)
        }
      }
    })
  }

使用自定义 ref 通过 v-model 实现 debounce 的示例：

1
2

<input v-model="text" />
<h3>{{text}}</h3>

1
2
3
4
5
6
7
8
9

import useDebouncedRef from '../hooks/useDebounce'

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

provide 与 inject

通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。

对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

用法:

父组件中提供：

1
2
3
4
5
6

setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

子组件中使用：

1
2
3
4
5
6

setup(props,context){
	......
    const car = inject('car')
    return {car}
	......
}

响应式数据的判断

• isRef: 检查一个值是否为一个 ref 对象
• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

新的组件

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。

让我们修改 modal-button 以使用 <teleport>，并告诉 Vue “Teleport 这个 HTML 到该‘body’标签”。

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

app.component('modal-button', {
  template: `
    <button @click="modalOpen = true">
        Open full screen modal! (With teleport!)
    </button>

    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! 
          (My parent is "body")
          <button @click="modalOpen = false">
            Close
          </button>
        </div>
      </div>
    </teleport>
  `,
  data() {
    return { 
      modalOpen: false
    }
  }
})

其他

全局API的转移

• Vue 2.x 有许多全局 API 和配置。

  • 例如：注册全局组件、注册全局指令等。

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

    //注册全局组件 Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>' }) //注册全局指令 Vue.directive('focus', { inserted: el => el.focus() }

• Vue3.0中对这些API做出了调整：

  • 将全局的API，即：Vue.xxx调整到应用实例（app）上

    2.x 全局 API（Vue）	3.x 实例 API (app)
    Vue.config.xxxx	app.config.xxxx
    Vue.config.productionTip	移除
    Vue.component	app.component
    Vue.directive	app.directive
    Vue.mixin	app.mixin
    Vue.use	app.use
    Vue.prototype	app.config.globalProperties

其他改变

• data选项应始终被声明为一个函数。

• 过度类名的更改：

  • Vue2.x写法

    1 2 3 4 5 6 7 8

    .v-enter, .v-leave-to { opacity: 0; } .v-leave, .v-enter-to { opacity: 1; }

  • Vue3.x写法

    1 2 3 4 5 6 7 8 9

    .v-enter-from, .v-leave-to { opacity: 0; } .v-leave-from, .v-enter-to { opacity: 1; }

• 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

• 移除v-on.native修饰符

  • 父组件中绑定事件

    1 2 3 4

    <my-component v-on:close="handleComponentEvent" v-on:click="handleNativeClickEvent" />

  • 子组件中声明自定义事件

    1 2 3 4 5

    <script> export default { emits: ['close'] } </script>

• 移除过滤器（filter）

  过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

安装

NPM

1

npm install vue-router

使用实例

引入插件并使用

在main.js中引入插件并使用

1
2
3

import VueRouter from 'vue-router'

Vue.use(VueRouter)

编写router配置项:

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

import VueRouter from 'vue-router'
import Chinese from "../pages/Chinese.vue"
import English from "../pages/English.vue"

export default new VueRouter({
    routes: [
        {
            path: '/chinese',
            component: Chinese
        },
        {
            path: '/english',
            component: English
        }
    ]
});

使用router

在main.js中引入router并使用

1
2
3
4
5
6

import router from './router'

new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

实现路由页面切换

（active-class可配置高亮样式）

1
2

<router-link class="list-group-item" active-class="active" to="/chinese">中文</router-link>
<router-link class="list-group-item" active-class="active" to="/english">英文</router-link>

指定组件渲染的位置

1
2

<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。

配置路由：

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

export default new VueRouter({
    routes: [
        {
            path: '/chinese',
            component: Chinese
        },
        {
            path: '/english',
            component: English,
            //通过children配置子级路由
            children: [
                {
                    path: 'book',
                    component: Book
                },
                {
                    path: 'author',
                    component: Author
                }
            ]
        }
    ]
});

路由跳转:

1
2
3
4
5
6

<li>
  <router-link class="list-group-item" active-class="active" to="/english/book">Book</router-link>
</li>
<li>
  <router-link class="list-group-item" active-class="active" to="/english/author">Author</router-link>
</li>

命名路由

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

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

export default new VueRouter({
    routes: [
        {
            name: 'chineseRouter',
            path: '/chinese',
            component: Chinese
        },
        {
            path: '/english',
            component: English,
            children: [
                {
                    name: 'bookRouter',
                    path: 'book',
                    component: Book
                },
                {
                    name: 'authorRouter',
                    path: 'author',
                    component: Author
                }
            ]
        }
    ]
});

路由跳转:

1
2
3
4

<!--简化前，需要写完整的路径 -->
<router-link to="/english/book">Book</router-link>
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name : 'bookRouter'}">Book</router-link>

路由的query参数

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

<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;

<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
  path: '/english/author/info',
  query: {
      id: author.id,
      name: author.name,
      info: author.info
  }
}">
{{ author.name }}
</router-link>&nbsp;&nbsp;    

接收参数：

1
2
3
4
5

<ul>
    <li>编号: {{$route.query.id}}</li>
    <li>作家: {{$route.query.name}}</li>
    <li>简介: {{$route.query.info}}</li>
</ul>

路由的param参数

在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment)

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

children: [
    {
        name: 'bookRouter',
        path: 'book',
        component: Book
    },
    {
        name: 'authorRouter',
        path: 'author',
        component: Author,
        children: [
            {
                name: 'authorInfoRouter',
                path: 'info/:id/:name/:info',//使用占位符声明接收params参数
                component: AuthorInfo
            }
        ]
    }
]

路由跳转:

1
2
3
4
5
6
7
8
9
10

<router-link :to="{
  name: 'authorInfoRouter',
  params: {
      id: author.id,
      name: author.name,
      info: author.info
  }
}">
{{ author.name }}
</router-link>&nbsp;&nbsp;

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

接受参数:

当匹配到一个路由时，参数值会被设置到 this.$route.params

1
2
3
4
5

<ul>
    <li>编号: {{$route.params.id}}</li>
    <li>作家: {{$route.params.name}}</li>
    <li>简介: {{$route.params.info}}</li>
</ul>

路由的props配置

在上面的例子中，我们读取参数需要不停重复的写 this.$route.params 前缀，很繁琐，使用props配置可以解决

布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。

若props为true，就会把路由组件收到的所有params参数，以props的形式传给AuthorInfo组件

1
2
3
4
5
6
7
8

children: [
    {
        name: 'authorInfoRouter',
        path: 'info/:id/:name/:info',
        component: AuthorInfo,
        props: true
    }
]

使用props 配置项接受参数：

1
2
3
4
5
6
7
8
9
10

export default {
    components: {},
    props: ['id','name','info'],
    data() {
        //这里存放数据
        return {

        }
    }
},

使用参数

1
2
3
4
5

<ul>
    <li>编号: {{id}}</li>
    <li>作家: {{name}}</li>
    <li>简介: {{info}}</li>
</ul>

函数模式

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

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

children: [
    {
        name: 'authorInfoRouter',
        path: 'info',
        component: AuthorInfo,
        props($route) {
            return {
                id: $route.query.id,
                name: $route.query.name,
                info: $route.query.info
            }
        }
    }
]

props函数的结构赋值形式:

1
2
3
4
5
6
7

props({query: {id, name, info}}) {
    return {
        id: id,
        name: name,
        info: info
    }
}

<router-link>的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录（相当于向一个栈中添加元素），replace是替换当前记录（相当于替换掉栈顶元素）。路由跳转时候默认为push
3. 如何开启replace模式：<router-link replace>News</router-link>

编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法push，通过编写代码来实现。

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

router.push(location, onComplete?, onAbort?)

可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

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

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ 
    name: 'user', 
    params: { 
        userId: '123' 
    }
})

// 带查询参数，变成 /register?plan=private
router.push({ 
    path: 'register', 
    query: { 
        plan: 'private' 
    }
})

注意：如果提供了 path，params 会被忽略，使用params就不用path，而是用name

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录，相当于替换掉栈顶元素。

1
2
3
4
5
6

router.replace({ 
    path: 'register', 
    query: { 
        plan: 'private' 
    }
})

forward 、back 、go

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

this.$router.forward() //前进
this.$router.back() //后退

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)

keep-alive

• Props：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

• 用法：

  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

  当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

主要用于保留组件状态或避免重新渲染。

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组（组件名）来表示：

1
2
3

<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

路由相关的两个生命周期钩子

activated

• 类型：Function

• 详细：

  被 keep-alive 缓存的组件激活时调用。

• 代码

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

export default {
  //import 引入的组件需要注入到对象中才能使用
  name: "English",
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {};
  },
  //计算属性类似于data 概念
  computed: {},
  activated() {}, // 被 keep-alive 缓存的组件激活时调用。
  deactivated() {} // 被 keep-alive 缓存的组件停用时调用。
};

deactivated

• 类型：Function

• 详细：

  被 keep-alive 缓存的组件停用时调用。

路由守卫

作用：对路由进行权限控制

全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

1
2
3
4
5

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push中的选项。
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

1
2
3
4

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

1
2
3

router.afterEach((to, from) => {
  // ...
})

路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

1
2
3
4
5
6
7
8
9
10
11

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

这些守卫与全局前置守卫的方法参数是一样的

组件内的守卫

最后，你可以在路由组件内直接定义以下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

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

export default {
  //import 引入的组件需要注入到对象中才能使用
  name: "English",
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {};
  },
  beforeRouteEnter(to, from, next) {
    // 通过路由规则，进入该组件时被调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 通过路由规则，离开该组件时被调用
    // 可以访问组件实例 `this`
  }

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

1
2
3
4
5

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

1
2
3
4
5
6
7
8

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

路由元信息

定义路由的时候可以配置 meta 字段：

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

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

通过to.meta.requiresAuth访问

什么是Vuex?

Vuex是专门在Vue 中实现集中式状态（数据）管理的一个Vue 插件，对vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。这就是 Vuex 背后的基本思想.

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

使用

安装vuex

NPM

1

npm install vuex 

使用Store

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的**状态 (state)**。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

3. 创建文件：src/store/index.js

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

   import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ actions: { }, state: { count: 0 }, mutations: { increment(state) { state.count++ } } })

4. 在main.js中创建vm时传入store配置项

   为了在 Vue 组件中访问 this.$store property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制：

   1 2 3 4

   new Vue({ el: '#app', store: store, })

   如果使用 ES6，你也可以以 ES6 对象的 property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)：

   1 2 3 4

   new Vue({ el: '#app', store })

5. 在子组件HelloWorld中绑定一个方法，用来改变store中的数据

   1 2 3 4

   <div class="container"> <h1>当前的值是:{{$store.state.count}}</h1> <button @click="increase">+1</button> </div>

   在组件中使用 this.$store.dispatch('xxx') 分发 action

   1 2 3 4 5

   methods: { increase() { this.$store.dispatch('increment',1) } }

6. 完善src/store/index.js中的方法

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

   import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ actions: { // Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。 // 参数value值是通过dispatch方法传过来的参数 increment(context, value) { context.commit("increment",value) } }, state: { count: 0 }, mutations: { increment(state,value) { state.count += value } } }) export default store

5. 效果

   点击按钮前：

   

   点击按钮5下后

   

Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数：

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

const store = new Vuex.Store({
    actions: {
        increase(context, value) {
            context.commit("increase",value)
        }
    },
    state: {
        dollar: 0,
        rate: 7
    },
    getters: {
        rmb(state){
            return state.dollar * state.rate
        }
    },
    mutations: {
        increase(state,value) {
            state.dollar += value
        }
    }
})
export default store

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

1

$store.getters.rmb 

mapGetters 辅助函数

先引入mapGetters

1

import { mapGetters } from 'vuex'

数组写法

1
2
3
4
5
6
7
8

computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }

如果你想将一个 getter 属性另取一个名字，使用对象形式：

1
2
3
4

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

mapState 辅助函数

先引入mapState

1

import { mapState } from 'vuex'

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

1
2
3
4

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

对象写法

1
2
3
4

computed: mapState([
  // 映射 this.count 为 store.state.count
  count:'count'
])

mapActions 辅助函数

先导入mapActions

1

import { mapActions } from 'vuex'

数组写法：

1
2
3
4
5
6
7
8
9
10
11

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')`
   })
 }

对象写法:

1
2
3

...mapActions({
  add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})

mapMutations 辅助函数

先导入mapActions

1

import { mapMutations } from 'vuex'

数组写法：

1
2
3
4
5
6
7

methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),

对象写法

1
2
3

...mapMutations({
  add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})

Module模块化

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

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

const moduleA = {
  namespaced:true,//开启命名空间
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  namespaced:true,//开启命名空间
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

在组件中对数据进行读取:

读取state数据：

1
2
3
4

//第一个参数空间名称字符串，第二个参数是空间名称字符串的中的参数
computed: {
    ...mapState('currency',['dollar','rate'])
  }

读取getters数据：

1
2
3
4

//第一个参数空间名称字符串
computed: {
    ...mapGetters('currency',['rmb'])
  }

组件中调用dispatch：

1
2
3
4
5
6
7

methods: {
    //方式一：自己直接dispatch
    this.$store.dispatch('currency/increase',1),
    //方式二：借助mapGetters读取：
    ...mapActions('currency',['increase'])
},

组件中调用commit：

1
2
3
4
5
6
7
8

methods: {
    addOnePerson() {
    	//方式一：自己直接dispatch
        this.$store.commit('person/addOnePerson',newPerson)
    },
    //方式二：借助mapGetters读取：
    ...mapActions('person',['addOnePerson'])
},

Vue-CLI的使用

介绍

vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本

安装

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

1
2
3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

1

vue --version

升级

如需升级全局的 Vue CLI 包，请运行：

1
2
3
4

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

创建项目

切换到你要创建项目的目录，然后运行以下命令来创建一个新项目：

1

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 Vue2或者Vue3，也可以选“手动选择特性”来选取需要的特性。

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

1

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

启动项目

1

npm run serve

1	如出现下载缓慢请配置npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

1	Vue 脚手架隐藏了所有webpack 相关的配置，若想查看具体的webpakc 配置，请执行：vue inspect > output.js

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

1
2
3
4
5
6
7
8

// vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  // 选项...
}

模板项目的结构

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

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

ref属性

ref 被用来给元素或子组件注册引用信息。

• 引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素（id的替代者）；
• 如果用在子组件上，引用就指向组件实例VueComponent：

1
2
3
4
5

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

获取：this.$refs.xxx

props

props 可以是数组或对象，用于接收来自父组件的数据。

三种读取方式

• 示例：

  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

  // 简单语法 Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) // 指定名称和类型 Vue.component('props-demo-simple', { props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor } }) // 对象语法，提供验证 Vue.component('props-demo-advanced', { props: { // 检测类型 height: Number, // 检测类型 + 其他验证 age: { type: Number, default: 0, // 默认值 required: true, validator: function (value) { return value >= 0 } } } })

1	备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

1
2
3
4

// 定义一个混入对象
var mixin = {
  created: function () { console.log(1) }
}

混入对象的局部使用

1
2
3
4
5
6
7
8

// 定义一个使用混入对象的组件
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})

// => 1
// => 2

如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

全局使用

全局混入：Vue.mixin(xxx)

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如：vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

开发插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

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

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

使用插件

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

1
2
3
4
5
6

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

scoped样式

1. 作用：让样式在局部生效，防止冲突。

2. 写法：

   1 2 3 4 5 6 7

   <style scoped> @media (min-width: 250px) { .list-container:hover { background: orange; } } </style>

这个可选 scoped attribute 会自动添加一个唯一的 attribute (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

组件的自定义事件

组件的自定义事件是一种组件间通信方式，适用于：子组件给父组件传递数据。

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。