快速入门vue3组合式API

小周不摆烂

已于 2023-08-16 17:53:25 修改

阅读量1k

点赞数 91

分类专栏： # 前端vue入门文章标签： javascript vue.js 前端前端框架开发语言

于 2023-08-15 17:10:31 首次发布

本文链接：https://blog.csdn.net/weixin_73295475/article/details/132277906

版权

前端vue入门专栏收录该内容

12 篇文章 16 订阅

订阅专栏

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

Vue3的生命周期API （选项式 VS 组合式）

使用create-vue创建项目

1. 前提环境条件

已安装 16.0 或更高版本的 Node.js

node -v

2. 创建一个Vue应用

npm init vue@latest

这一指令将会安装并执行 create-vue

熟悉项目目录和关键文件

关键文件：

1. vite.config.js - 项目的配置文件基于vite的配置

2. package.json - 项目包文件核心依赖项变成了 Vue3.x 和 vite

3. main.js - 入口文件 createApp函数创建应用实例

4. app.vue - 根组件 SFC单文件组件 script - template - style

        变化一：脚本script和模板template顺序调整

        变化二：模板template不再要求唯一根元素

        变化三：脚本script添加setup标识支持组合式API

5. index.html - 单页入口提供id为app的挂载点

组合式API

setup选项

setup选项的写法和执行时机

1. 执行时机，比beforeCreate还要早

2. setup函数中，获取不到this (this是undefined)

<script> 
// setup
// 1. 执行时机，比beforeCreate还要早
// 2. setup函数中，获取不到this (this是undefined)
export default {
  setup () {
    console.log('setup函数',this)
  },
  beforeCreate () {
    console.log('beforeCreate函数')
  }
}
</script>

网页显示为：

3. 数据和函数，需要在 setup 最后 return，才能模板中应用

<script> 
export default {
  setup () {
    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  }
}
</script>

<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

script setup 语法糖

问题：每次都要return，好麻烦？

4. 通过 setup 语法糖简化代码

<script setup>
const message = 'this is a message'
const logMessage = () => {
  console.log(message)
}
</script>

<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

reactive和ref函数

reactive()

作用： 接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤：

1. 从 vue 包中导入 reactive 函数

2. 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值

<script setup>
//1. reactive: 接收一个对象类型的数据，返回一个响应式的对象
import { reactive } from 'vue'
const state = reactive({
  count: 100
})
const setCount = () => {
  state.count++
}

</script>

<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

ref()

作用： 接收简单类型或者对象类型的数据传入并返回一个响应式的对象

本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型

         底层，包成复杂类型之后，再借助 reactive 实现的响应式

注意点：

         1. 脚本中访问数据，需要通过 .value

         2. 在template中，.value不需要加 (帮我们扒了一层)

核心步骤：

1. 从 vue 包中导入 ref 函数

2. 在 <script setup> 中执行 ref 函数并传入初始值，使用变量接收 ref 函数的返回值

<script setup>
import { ref } from 'vue'
const count = ref(0)
const setCount = () => {
  count.value++
}
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

computed

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法

核心步骤：1. 导入 computed函数

2. 执行函数在回调参数中 return基于响应式数据做计算的值，用变量接收

<script setup>
import{computed,ref}from 'vue'
const list=ref([1,2,3,4,5,6,7,8])
const computedList = computed(()=>{
  return list.value.filter(item=>item>2)
})
</script>

<template>
  <div>
    <div>原始数据: {{ list }}</div>
    <div>计算后的数据: {{ computedList }}</div>
  </div>
</template>a

watch

作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数

俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）

侦听单个数据

1. 导入watch 函数

2. 执行watch函数传入要侦听的响应式数据 (ref对象) 和回调函数

侦听多个数据

同时侦听多个响应式数据的变化，不管哪个数据变化都需要执行回调

immediate

在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调

deep

通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

<script setup>
import{watch,ref}from 'vue'
// 4. deep 深度监视, 默认 watch 进行的是 浅层监视
//    const ref1 = ref(简单类型) 可以直接监视
//    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
const userInfo = ref({
  name: 'zs',
  age: 18
})
const setUserInfo = () => {
  // 修改了 userInfo.value 修改了对象的地址，才能监视到
  // userInfo.value = { name: 'ls', age: 50 }
  userInfo.value.age++
}

// deep 深度监视
watch(userInfo, (newValue) => {
  console.log(newValue)
}, {
  deep: true
})
</script>

<template>
  <div>{{ userInfo }}</div>
  <button @click="setUserInfo">修改userInfo</button>
</template>a

精确侦听对象的某个属性

在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调

<script setup>
import{watch,ref}from 'vue'
// 4. deep 深度监视, 默认 watch 进行的是 浅层监视
//    const ref1 = ref(简单类型) 可以直接监视
//    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
const userInfo = ref({
  name: 'zs',
  age: 18
})
const setUserInfo = () => {
  // 修改了 userInfo.value 修改了对象的地址，才能监视到
  // userInfo.value = { name: 'ls', age: 50 }
  userInfo.value.age++
}

// 5. 对于对象中的单个属性，进行监视
watch(() => userInfo.value.age, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
</script>

<template>
  <div>{{ userInfo }}</div>
  <button @click="setUserInfo">修改userInfo</button>
</template>