在前面的Options API中，我们可以通过watch选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。
在Composition API中，我们可以使用watchEffect和watch来完成响应式数据的侦听；

• watchEffect用于自动收集响应式数据的依赖；
• watch需要手动指定侦听的数据源；

watchEffect的基本使用

• watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖
• 只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行
  首先需要引入import { ref, watchEffect } from 'vue';

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

  setup() { // watchEffect: 自动收集响应式的依赖 const name = ref("kobe"); const age = ref(18); const changeName = () => name.value = "beichen"; const changeAge = () => age.value++; watchEffect(() => { // 会立即执行，因为他要收集所用到了那些响应式的依赖 // 相当于watch中的immediate(立即执行) console.log("name:", name.value, "age: ", age.value); }) return { name, age, changeName, changeAge } }

computed的使用

• 方式一：接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象；
• 方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象

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

setup() {
  const firstName = ref("Kobe");
  const lastName = ref("Bryant");

  // 用法一：传入一个getter函数
  // computed的返回值是一个不可变的响应式ref对象
  // const fullName = computed(() => firstName.value + " " + lastName.value);

  // 用法二：传入一个对象，对象包含getter/setter
  const fullName = computed({
    get: () => firstName.value + " " + lastName.value,
    set(newValue) {
      const names = newValue.split(" ");
      firstName.value = names[0];
      lastName.value = names[1];
    }
  })
  
  const changeName = () => {
    // firstName.value = "beichen";
    fullName.value = "beichen zero";
  }
  return {
    fullName,
    changeName
  }
}

toRefs和toRef

toRefs

• 如果我们使用ES6的解构语法，对reactive返回的对象进行解构获取值，那么之后无论是修改结构后的变量，还是修改reactive
  返回的state对象，数据都不再是响应式的

  1 2 3 4 5 6

  const info = reactive({ name: "beichen", age: 22 }); const { name, age } = info;

  在这里return返回的name和age我们在使用的时候就不再是响应式的了

当我们使用toRefs时来解构时，return返回的数据就是响应式的

1
2
3
4
5
6

const info = reactive({
  name: "beichen",
  age: 22
});

const { name, age } = toRefs(info);

这种做法相当于在info.name和info.age与ref.value之间建立的链接，修改其中任何一个的值，另外一个都会随之改变

toRef

• toRef: 对其中一个属性进行转换ref，建立链接

  1 2 3 4 5 6

  const info = reactive({ name: "beichen", age: 22 }); // toRef中有两个参数第一个是object，第二个是key值 const age = toRef(info, "age");

Reactive判断的API

1.isProxy

• 检查对象是否是由 reactive 或 readonly创建的 proxy。

  2.isReactive

• 检查对象是否是由 reactive创建的响应式代理：
• 如果该代理是 readonly 建的，但包裹了由 reactive 创建的另一个代理，它也会返回 true.

  1	const info = readonly(reactive({name: "beichen"}));

  这个时候就是返回true

3.isReadonly

• 检查对象是否是由 readonly 创建的只读代理。

4.toRaw

• 返回 reactive 或 readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）。

  1 2 3 4

  // 第一种(常见用法) const info = {name: "beichen"}; const readonlyInfo = readonly(info); // 这里的info就是原始对象

optionsAPi的弊端

• 在vue2中我们编写组件的方式是optionsAPI
  例如：data定义的数据、methods定义的方法、computed中定义的计算属性、watch中监听属性的改变，还包括生命周期钩子

弊端

在我们实现某些功能的时候，例如写一个计数器
往往我们需要定义methods，其中定义一个+1/-1的函数、需要定义data中的counter数据、监听counter的改变。
当我们的代码逻辑变得很庞大的时候，逻辑就会变得不清晰，且代码量会变大很大，定义的方法和数据不连贯，使得代码的阅读和理解会变得很困难。

CompositionAPI

我们要使用Composition API时我们需要在vue组件中使用setup函数。
setup函数就是用来替代之前所编写的大部分选项。包括methods、computed、data、watch、生命周期等

setup函数的参数

1.props
props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可以直接通过props参数获取。

1

<home message="父组件中的message"/>

子组件中接收父组件传过来的messsage并指定类型和是否必须传过来。否则会报一个warning。

1
2
3
4
5
6

props: {
      message: {
        type: String,
        required: true,
      }
    },

2.context
context也被称之为setupcontext,他包含三个属性：

• attrs
  所有的非prop的attribute
• solts
  父组件传递过来的插槽
• emit
  当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）

mixin

1.Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能

2.一个Mixin对象可以包含任何组件选项

3.当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中

mixin的基本使用

ex:写入公共内容到demoMixin.js文件中

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

export const demoMixin = {
  data() {
    return {
      message: "hello demoMixin"
    }
  },
  methods: {
    foo() {
      console.log("hello Mixin foo");
    }
  },
  created() {
    console.log("Mixin created");
  },
}

在需要调用的vue文件下引入即可

1
2
3
4
5

import { demoMixin } from "./minins/demoMixin";

  export default {
    mixins: [demoMixin],
  }

然后就可以在当前vue文件中使用demoMixin.js文件下创建的内容(data/methods/生命周期函数等)

列表元素的过渡

• 过渡元素一般时针对单个元素或组件的。
  那么如果我们渲染的时一个列表，那么就要用到<transition-group>组件来完成

使用transition-group的特点

• 默认情况下，它不会渲染一个元素的包裹器，但是你可以指定一个元素并以 tag attribute 进行渲染
• 过渡模式不可用，因为我们不再相互切换特有的元素
• 内部元素总是需要提供唯一的 key attribute 值
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身

列表过渡的基本使用

我们以一个小案例了解他的基本使用：添加/删除数字

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

<template>
  <div>
    <button @click="addNum">添加数字</button>
    <button @click="removeNum">删除数字</button>
    <button @click="shuffleNum">打乱顺序</button>

    <transition-group tag="p" name="beichen">
      <span v-for="item in numbers" :key="item" class="item">{{item}}</span>
    </transition-group>
  </div>
</template>

<script>
  import _ from "lodash";

  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        numberCounter: 10
      }
    },
    methods: {
      addNum() {
        this.numbers.splice(this.randomIndex(), 0, this.numberCounter++);
      },
      removeNum() {
        this.numbers.splice(this.randomIndex(), 1);
      },
      shuffleNum() {
        this.numbers = _.shuffle(this.numbers);
      },
      randomIndex() {
        return Math.floor(Math.random() * this.numbers.length)
      }
    }
  }
</script>

<style scoped>
  .item {
    display: inline-block;
    margin-right: 10px;
  }

  .beichen-enter-from,
  .beichen-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

  .beichen-enter-active,
  .beichen-leave-active {
    transition: all 1s ease;
  }
  .beichen-leave-active {
    /* 脱离标准流，在移除一个元素开始时就开始移动后面的元素 */
    position: absolute;
  }

  .beichen-move {
    transition: transform 1s ease;
  }
</style>

安装Animate.css

• yarn安装: yarn add animate.css
• npm安装: npm install animate.css

animate.css的导入

• 在main.js中直接引入: import "animate.css"

animate.css的使用

1.用法一：直接使用animate库中定义的keyframes动画

1
2
3
4
5
6

.beichen-enter-active {
  animation: flip 1s ease;
}
.beichen-leave-active {
  animation: flip 1s ease reverse;
}

2.用法二：直接使用animate库提供给我们的类

1
2
3
4
5

<transiton name="beichen"
           enter-active-class="animate__animated animate__lightSpeedInRight"
           leave-active-class="animate__animated animate__lishtSpeedOutRight">
  <h2 v-if="isShow">{{message}}</h2>
</transition>

其中animate__animated类时必须要添加的

gsap库

实现一些动画的库

利用gsap来完成js最基本的动画

• 安装gsap库
  yarn add gsap or npm install gsap

• 导入gsap库
  import gsap from "gsap";

transition组件提供给我们的JavaScript钩子：

• @before-enter=”beforeEnter”
• @enter=”enter”
• @after-enter=”afterEnter”
• @before-leave=”beforeLeave”
• @leave=”leave”
• @after-leave=”afterLeave”

过渡动画class

• v-enter-from:定义进入过过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-active定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
• v-enter-to定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除
• v-leave-from定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
• v-leave-active定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
• v-leave-to离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除。

如果我们在transition中没有添加name属性,那么他的默认前缀就v-,如果添加了name属性，以name=”beichen”为例，那么所有的class会以beichen-开头。

• 如果同时设置了animationend和transitionend，我们可以在transition中设置type属性为transition和animation来明确告知vue监听的类型。

  显示指定动画时间

• 显示指定动画时间可以通过duration属性。
  1.number类型：同时设置进入和离开的时间
  ex：:duration: 1000
  2.object类型：分别设置进入和离开的时间
  ex：:duration: {enter: 1000, leave: 800}

过渡模式的mode

• in-out:新元素先进行过渡，完成之后当前元素过渡离开(先进后出)
• out-in:当前元素先进行过渡，完成之后新元素过渡进入(先出后进)

appear属性

• 用来设置在加载界面/初次渲染时也是有动画显示的。

渲染作用域

父级模板里面的所有内容都是在父级作用域中编译的
子模板里面的所有内容都是在子作用域中编译的

作用域插槽

• 我们希望插槽可以访问到子组件中的内容是非常重要的
• 1.在App.vue中定义好数据
• 2.传递给ShowNames组件中
• 3.ShowNames组件中遍历name数组的数据
• 4.定义插槽的prop
• 5.通过v-slot:default的方式获取到slot的props
• 6.使用slotProps中的item和index
  代码如下
  ShowNames.vue