Vue3学习笔记 —— Composition API 快速入门

Vue3 Composition API 学习

• 一、学习预览
• 二、创建 Vue3 项目
• 三、Vue3 引用和方法

• 3.1 Composition API setup() 函数 的响应式引用
• 3.2 Composition API setup() 函数 响应式对象
• 3.3 Composition API setup() 函数 参数

• 四、Vue3 Composition API 使用总结

一、学习预览

1. Setup
2. 响应式应用
3. 方法
4. 计算属性
5. Watch

二、创建 Vue3 项目

前提查看一下你的 Vue 版本是否是大于 4.5.0 的。不是的话就得创建vue 2 项目，然后手动升级到 vue3

项目创建有两种方式

1. 纯命令安装
2. 脚手架创建

创建步骤（命令行创建）

1. vue create vue3demo
2. 指定添加的依赖（步骤省略）
3. 项目创建好后，进入 src 目录，然后输入 npm run serve 运行项目
4. 当你看到如下信息时，说明你的项目启动成功了！！！

三、Vue3 引用和方法

对比 Vue2 中 OPTIONS API，data 和 methods 的定义如下所示

<script>
export default {
  data () {
    return {
      name: '小皮'
    }
  },
  methods: {

  }
}
</script>

在 Vue3 中，上述的方式依然可以使用。但是我们今天要使用 Vue3 的 Composition API 完成同样的功能

3.1 Composition API setup() 函数 的响应式引用

学习指引：

1. 在 setup 函数中定义参数
2. 在 setup 函数中定义方法
3. 在 setup 函数中定义计算属性

setup 函数

• 使用 Composition API 的入口
• 在 beforeCreate 之前调用
• 在 setup 中没有 this 关键字

ref 函数

• 返回一个 响应式引用
• name 是一个响应式对象

<template>
  <div id="app">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：
      <button type="button" @click="changeAge(-1)">+</button>
      {{age}} 
      <button type="button" @click="changeAge(1)">+</button>
    </h2>
    <h2>出生年份: （插值表达式实现） {{2020 - age}}</h2>
    <h2>出生年份：（计算属性实现）
      <button type="button" @click="changeYear(-1)">-</button>
      {{year}}
      <button type="button" @click="changeYear(1)">+</button>
    </h2>
  </div>
</template>

<script>
import { ref , computed} from 'vue'

export default {
  name: 'App',
  setup () {
    // 使用 方法 和 对象必须使用响应是对应式的。都必须返回
    const name = ref('Hello')
    const age = ref(18)
    const year = computed({
      // 设置 getter 和 setter
      get: () => {
        return 2020 - age.value
      },
      set: val => {
        age.value = 2020 - val
      }
    })
    function changeAge(val) {
      // age 是一个响应式对象，直接 age++ 是错误的
      age.value+=val;
    }
    // 计算属性
    function changeYear(val) {
      year.value = year.value + val
    }
    return {name,age,changeAge,year, changeYear}
  }
}
</script>

<style>
</style>

3.2 Composition API setup() 函数 响应式对象

上面的代码是不是看起来很冗余，这下我们使用 响应式对象 来简化上面的代码

• 使用 reactive 将一个对象 => 响应式对象
• 使用 toRefs 将 响应式对象 => 普通对象

<template>
  <div id="app">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：
      <button type="button" @click="changeAge(-1)">+</button>
      {{age}} 
      <button type="button" @click="changeAge(1)">+</button>
    </h2>
    <h2>出生年份: （插值表达式实现） {{2020 - age}}</h2>
    <h2>出生年份：（计算属性实现）
      <button type="button" @click="changeYear(-1)">-</button>
      {{year}}
      <button type="button" @click="changeYear(1)">+</button>
    </h2>
  </div>
</template>

<script>
import { reactive , computed, toRefs} from 'vue'

export default {
  name: 'App',
  setup () {
    const data = reactive({
      name: '小皮',
      age: 18,
      year: computed({
        // 设置 getter 和 setter
        get: () => {
          return 2020 - data.age
        },
        set: val => {
          data.age = 2020 - val
        }
      })
    })
    function changeAge(val) {
      data.age+=val
    }
    // 计算属性
    function changeYear(val) {
      data.year = data.year + val
    }
    // 直接返回 data 是一个响应式的数据，在上面需要使用 data.xxx 属性得到属性，如果需要在上面直接使用属性，可以使用该方式
    // 使用 ..toRefs() 方法将一个整体的响应式对象 变成 普通对象，然后在展开（解包）得到 单独的响应式数据
    return {...toRefs(data), changeAge, changeYear}
  }
}
</script>

<style>
</style>

效果同上图

3.3 Composition API setup() 函数 参数

在父子组件传参中，会使用到如下两个参数

• props
• context

import { reactive , computed, toRefs, watch} from 'vue'

export default {
  name: 'App',

  // setup 参数
  props: {
    title: String
  },

  // context 获取插槽，属性
  setup (props, context) {
    const data = reactive({
      name: '小皮',
      age: 18,
      year: computed({
        // 设置 getter 和 setter
        get: () => {
          return 2020 - data.age
        },
        set: val => {
          data.age = 2020 - val
        }
      })
    })
    // 使用监听器
    watch (() => props.title, (newTitle,oldTitle) => {
      console.log(newTitle,oldTitle)
      context.emit('title-changed')
    })
    function changeAge(val) {
      data.age+=val
    }
    // 计算属性
    function changeYear(val) {
      // 响应式对象
      data.year = data.year + val
    }
    return {...toRefs(data), changeAge, changeYear}
  }
}
</script>

四、Vue3 Composition API 使用总结

对比 vue2，我们使用一些内置的方法。Vue3 用一个更大的变化

1. Composition API 的入口在 setup() 函数中

• reactive 响应式对象
• ref 接收一个参数并返回响应式对象
• …

2. 原先在 Vue2 中的 methods，watch，component、data 均写在 setup() 函数，使用之前需要自行导入
3. 回归了 function xxx 定义函数