vue3-组合式API

最新推荐文章于 2024-04-04 21:52:59 发布
最新推荐文章于 2024-04-04 21:52:59 发布
阅读量751 收藏 12
点赞数 17
分类专栏： Vue.js入门到实战 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_76329106/article/details/134499495
版权

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue3-组合式API

目录

组合式API

1.1 什么是组合式API

1.2 为什么使用它

1.2.1 更好的逻辑复用#

1.2.2更灵活的代码组织#

1.2.3 更好的类型推导#

1.2.4 更小的生产包体积#

1.3 第一个组合式API的例子

setup()函数

2.1 基本使用

2.2 访问 Prop

2.3 Setup的上下文

2.4 与渲染函数一起使用

组合式API

1.1 什么是组合式API

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

  • 响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

  • 生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。

  • 依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

组合式 API 是 Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本，可以使用官方维护的插件 @vue/composition-api。在 Vue 3 中，组合式 API 基本上都会配合 <script setup> 语法在单文件组件中使用。

1.2 为什么使用它

1.2.1 更好的逻辑复用#

组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷。

组合式 API 提供的逻辑复用能力孵化了一些非常棒的社区项目，比如 VueUse，一个不断成长的工具型组合式函数集合。组合式 API 还为其他第三方状态管理库与 Vue 的响应式系统之间的集成提供了一套简洁清晰的机制，例如 RxJS。

1.2.2更灵活的代码组织#

许多用户喜欢选项式 API 的原因是因为它在默认情况下就能够让人写出有组织的代码：大部分代码都自然地被放进了对应的选项里。然而，选项式 API 在单个组件的逻辑复杂到一定程度时，会面临一些无法忽视的限制。这些限制主要体现在需要处理多个逻辑关注点的组件中，这是我们在许多 Vue 2 的实际案例中所观察到的。

我们以 Vue CLI GUI 中的文件浏览器组件为例：这个组件承担了以下几个逻辑关注点：

  • 追踪当前文件夹的状态，展示其内容

  • 处理文件夹的相关操作 (打开、关闭和刷新)

  • 支持创建新文件夹

  • 可以切换到只展示收藏的文件夹

  • 可以开启对隐藏文件夹的展示

  • 处理当前工作目录中的变更

这个组件最原始的版本是由选项式 API 写成的。如果我们为相同的逻辑关注点标上一种颜色，那将会是这样：

你可以看到，处理相同逻辑关注点的代码被强制拆分在了不同的选项中，位于文件的不同部分。在一个几百行的大组件中，要读懂代码中的一个逻辑关注点，需要在文件中反复上下滚动，这并不理想。另外，如果我们想要将一个逻辑关注点抽取重构到一个可复用的工具函数中，需要从文件的多个不同部分找到所需的正确片段。

而如果用组合式 API 重构这个组件，将会变成下面右边这样：

现在与同一个逻辑关注点相关的代码被归为了一组：我们无需再为了一个逻辑关注点在不同的选项块间来回滚动切换。此外，我们现在可以很轻松地将这一组代码移动到一个外部文件中，不再需要为了抽象而重新组织代码，大大降低了重构成本，这在长期维护的大型项目中非常关键。

1.2.3 更好的类型推导#

近几年来，越来越多的开发者开始使用 TypeScript 书写更健壮可靠的代码，TypeScript 还提供了非常好的 IDE 开发支持。然而选项式 API 是在 2013 年被设计出来的，那时并没有把类型推导考虑进去，因此我们不得不做了一些复杂到夸张的类型体操才实现了对选项式 API 的类型推导。但尽管做了这么多的努力，选项式 API 的类型推导在处理 mixins 和依赖注入类型时依然不甚理想。

因此，很多想要搭配 TS 使用 Vue 的开发者采用了由 vue-class-component 提供的 Class API。然而，基于 Class 的 API 非常依赖 ES 装饰器，在 2019 年我们开始开发 Vue 3 时，它仍是一个仅处于 stage 2 的语言功能。我们认为基于一个不稳定的语言提案去设计框架的核心 API 风险实在太大了，因此没有继续向 Class API 的方向发展。在那之后装饰器提案果然又发生了很大的变动，在 2022 年才终于到达 stage 3。另一个问题是，基于 Class 的 API 和选项式 API 在逻辑复用和代码组织方面存在相同的限制。

相比之下，组合式 API 主要利用基本的变量和函数，它们本身就是类型友好的。用组合式 API 重写的代码可以享受到完整的类型推导，不需要书写太多类型标注。大多数时候，用 TypeScript 书写的组合式 API 代码和用 JavaScript 写都差不太多！这也让许多纯 JavaScript 用户也能从 IDE 中享受到部分类型推导功能。

1.2.4 更小的生产包体积#

搭配 <script setup> 使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。这是由于 <script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。不像选项式 API 需要依赖 this 上下文对象访问属性，被编译的模板可以直接访问 <script setup> 中定义的变量，无需一个代码实例从中代理。这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

1.3 第一个组合式API的例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组合式API</title>
</head>
<body>
  <div id="app">
    {{ count }}
    <button @click="add">加1</button>
    <button @click="count += 10">加10</button>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
​
   Vue.createApp({
     data () {
      return {
         count: 10
       }
     },
     methods: {
       add () {
        this.count++
       }
     }
   }).mount('#app')
​
  const { ref } = Vue
  Vue.createApp({
    setup () { // 组合式API的标识
​
      const count = ref(100)
      console.log(count.value)
      const add = () => {
        // ref 创建的状态，修改是需要借助它的value属性
        count.value = count.value + 1
      }
      return { // 返回页面模版中需要使用的数据 
        count,
        add
      }
    }
  }).mount('#app')
</script>
</html>

体验提取公共部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组合式API</title>
</head>
<body>
<div id="app">
 {{ count }}
 <button @click="add">加1</button>
</div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
​
​
const { ref, onMounted, onUpdated } = Vue
 Vue.createApp({
  setup () { 
​
     const count = ref(0)
​
     const add = () => {
       count.value = count.value + 1
    }
​
     onMounted(() => {
       document.title = `点击了${count.value}次`
     })
​
    onUpdated(() => {
     document.title = `点击了${count.value}次`
    })
​
     return { 
       count,
      add
     }
   }
 }).mount('#app')
​
function useCount () {
 const count = ref(0)
​
 const add = () => {
   count.value = count.value + 1
 }
​
 return {
   count, add
 }
}
​
​
function useTitle (count) {
 onMounted(() => {
   document.title = `点击了${count.value}次`
 })
​
 onUpdated(() => {
   document.title = `点击了${count.value}次`
 })
}
Vue.createApp({
 setup () { 
​
   const { count, add } = useCount()
​
   useTitle(count)
​
   return { 
     count,
     add
   }
 }
}).mount('#app')
</script>
</html>

setup()函数

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

  1. 需要在非单文件组件中使用组合式 API 时。

  2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

其他情况下，都应优先使用 <script setup> 语法。

2.1 基本使用

我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup() 暴露的属性

<script>
import { ref } from 'vue'
​
export default {
  setup() {
    const count = ref(0)
​
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },
​
  mounted() {
    console.log(this.count) // 0
  }
}
</script>
​
<template>
  <button @click="count++">{{ count }}</button>
</template>

请注意在模板中访问从 setup 返回的 ref 时，它会自动浅层解包，因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。

setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值，但反过来则不行。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组合式API</title>
</head>
<body>
  <div id="app">
    {{ count }}
    <button @click="add">加1</button>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const { ref, onMounted } = Vue
  Vue.createApp({
    setup () {
      const count = ref(0)
      const add = () => {
        count.value += 1
      }
      onMounted(() => {
        console.log(1111)
      })
      return {
        count,
        add
      }
    },
    data () {
      return {
        count: 10
      }
    },
    methods: {
      add () {
        this.count += 10
      }
    },
    mounted () {
      console.log('2222')
    }
  }).mount('#app')
</script>

生命周期先执行 组合式API 后执行选项式API，其余以组合式API为优先

2.2 访问 Prop

setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。

{
  props: {
    title: String,
    count: Number
  },
  setup(props) {
    console.log(props.title)
    console.log(props.count)
  }
}

请注意如果你解构了 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。

如果你确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数：

{
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)
​
    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组合式API</title>
</head>
<body>
  <div id="app">
    <button @click="num++">加1</button> {{ num }}
    <my-root :num="num"></my-root>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<template id="root">
<div>{{ num }} -- {{ test }}</div>
</template>
<script>
  const { ref, onMounted, computed } = Vue
​
  const Root = {
    props: ['num'],
    template: '#root',
    // setup (props) { // 千万不要对 props 解构
    //   console.log('111')
    //   return {
    //     test: computed(() => props.num) // 继续保持响应式
    //   }
    // }
    setup ({ num }) {
      console.log(num)
      return {
        test: computed(() => num) // 失去了响应式 - test的值不会发生改变
      }
    }
  }
  Vue.createApp({
    setup () {
      const num = ref(10000)
      return { num }
    },
    components: {
      MyRoot: Root
    }
  }).mount('#app')
</script>
</html>

2.3 Setup的上下文

传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值：

{
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)
​
    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)
​
    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)
​
    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}

该上下文对象是非响应式的，可以安全地解构：

{
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs 和 slots 都是有状态的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外还需注意，和 props 不同，attrs 和 slots 的属性都不是响应式的。如果你想要基于 attrs 或 slots 的改变来执行副作用，那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

expose 函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>setup上下文对象</title>
</head>
<body>
  <div id="app">
    <my-com ref="comref" class="myBox" style="color: red" id="box" msg="hello msg" @my-event="getData">
      <template #header>
        header
      </template>
      <div>content</div>
      <template #footer>
        footer
      </template>
    </my-com>
  </div>
</body>
<template id="com">
  <div>
    <h1>子组件</h1>
    <button @click="sendData">发送数据</button>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
<script src="../lib/vue.global.js"></script>
<script>
  const { createApp, ref, onMounted } = Vue
  const Com = {
    template: '#com',
    setup (props, context) {
      // attrs 获取透传过来的值
      // slots 如果使用了插槽
      // emit  子组件给父组件传值
      // expose 子组件暴露给父组件可以调用的属性和方法  ---- options API  ref获取子组件的实例
​
      console.log(props)
      console.log(context.attrs) // ref 不在透传之列
      console.log(context.slots)
      const sendData = () => { // 子组件给父组件传值
        context.emit('my-event', 1000)
      }
​
      // 自定义的属性和方法，供给父组件使用
      const a = ref(1)
      const b = ref(2)
      const c = ref(3)
​
      const fn = () => {
        a.value = 100
      }
​
      // 暴露出去的是对象
      context.expose({
        a, b, fn
      })
​
      return {
        sendData
      }
    }
  }
​
  Vue.createApp({
    setup () {
      const getData = (val) => { // 接收子组件的值
        console.log('666', val)
      }
​
      const comref = ref() //  comref 就是模版中ref="comref"
​
      onMounted(() => {
        console.log('com', comref.value) // {}
        console.log('a', comref.value.a) // 1
        console.log('b', comref.value.b) // 2
        console.log('c', comref.value.c) // undefined 因为没有暴露
        comref.value.fn()
        console.log('a', comref.value.a) // 100
      })
​
      return {
        getData,
        comref
      }
    },
    components: {
      MyCom: Com
    }
  }).mount('#app')
</script>
</html>

在父组件通过ref获取子组件的实例的属性和方法的需求中，需要注意：

1.如果子组件是 选项式API组件，基本不需要做任何操作

2.如果子组件是 组合式API组件，需要通过 context.expose 暴露给父组件需要使用的属性和方法

3.如果父组件使用 选项式API, 可以通过 this.$refs.refName 访问到子组件想要你看到的属性和方法

4.如果父组件使用 组合式API,需要在setup中先创建 refName，然后再访问子组件想要你看到的属性和方法（const refName = ref() refName.value.X）

2.4 与渲染函数一起使用

setup 也可以返回一个渲染函数，此时在渲染函数中可以直接使用在同一作用域下声明的响应式状态：

{
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}

返回一个渲染函数将会阻止我们返回其他东西。对于组件内部来说，这样没有问题，但如果我们想通过模板引用将这个组件的方法暴露给父组件，那就有问题

我们可以通过调用 expose() 解决这个问题：

{
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value
​
    expose({
      increment
    })
​
    return () => h('div', count.value)
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>渲染函数</title>
</head>
<body>
  <div id="app">
    <button @click="add">加1</button>
    <my-child ref="child"></my-child>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const { h, ref } = Vue
  const Child = {
    // 写法1:
    // template: `<div>child</div>`
    // 写法2:
    // render () {
    //   return [
    //     h('div', 'child!')
    //   ]
    // }
    // 写法3
    setup (props, { expose }) {
      const count = ref(10)
​
      const increment = () => {
        count.value += 1
      }
​
      expose({
        increment
      })
​
      // 返回一个函数  函数返回 渲染函数的结果
      return () => h('div', 'child!!' + count.value)
    }
  }
​
  Vue.createApp({
    components: {
      MyChild: Child
    },
    setup () {
      const child = ref()
​
      const add = () => {
        child.value.increment()
      }
​
      return {
        child,
        add
      }
    }
  }).mount('#app')
</script>
</html>

前端青山
关注
  • 17
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 24
    评论
专栏目录
Vue3组合式api.xmind
06-16
Vue3组合式api
VUE3组合式API
Circle_Key的博客
12-14 1610
Vue3组合式API自由理解
Vue3新特性 组合式Api
孤傲的博客
10-15 7673
setup - 组件内使用 Composition API 的入口点 setup 作为组合式 API 的入口点，也就是说，组合式 API 都必须只能在 setup 中使用 <template> <div> <h1>setup - 组件内使用 Composition API 的入口点</h1> <p>{{username}}</p> </div> </template> <scr
Vue3 组合式 API
最新发布
geng1025的博客
04-04 267
Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性。传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。Vue3 使用组合式 API 的地方为 setup。在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition API） 允许我们编写更有条理的代码。
vue3组合式API
weixin_45090657的博客
03-10 1360
# 第一天
Vue3.0快速上手-重要知识点罗列-系列二
JackieDYH的博客
07-31 4711
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
Vue3-常用的Composition API（组合API）
qq_56973906的博客
09-18 1627
script setup> 语法糖里面的代码会被编译成组件setup()函数的内容，不需要通过return暴露声明的变量、函数以及import引入的内容，即可在使用，并且不需要些export default{}这意味着与普通的 只在组件被首次引入的时候执行一次不同， 中的代码会在每次组件实例被创建的时候执行。setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性。
Vue3入门
weixin_49405038的博客
05-12 822
Vue3带来的新变化 性能提升 首次渲染更快 diff算法更快 内存占用更少 打包体积变小 更好的Typescript支持 Composition API （重点） 在使用vue2.x版本开发较复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题 3. 破坏性语法更新 vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代） 过滤器filter
vue3组合式api
weixin_52137798的博客
07-07 3945
一、 Composition API的简单介绍 Composition API也叫组合式API，是Vue3.x的新特性。 通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。 通俗的讲： 没有Composition API之前vue相关业务的代码需要配置到op
Vue3入门-组合式API
qq_45811054的博客
05-18 176
vue3入门基础知识
vue3-组合式 API
wdk996的博客
02-16 1300
组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
组合式API【Vue3】
weixin_53943447的博客
06-19 698
（1） reactive和ref函数的共同作用是什么？用函数调用的方式生成响应式数据。
实现基于Vue3组合式API的登陆系统
04-07
Vue是第三方开发的基于MVVM设计模式的渐进式纯前端js框架，是一个构建数据驱动的 web 界面的库。在很多公司的前端框架使用中，Vue做为一门技术流行开来，具备了虚拟DOM树，面向组件的开发模式和观察者模式等优点。...
vue3源码 vue-next源码
06-09
vue3都出来这么久了，还不学起来等啥呢？组合式api，proxy做数据响应，平台无关的虚拟dom。最新的源码，感觉download学习吧！！学不动的就算了，别勉强
vue3-tailwindcss-datatable
05-27
一切都通过插槽工作使用本地和远程数据（使用您自己的api函数） 响应性强，删除不太重要的数据列以获得较小的断点自动和响应式分页搜索本地和远程数据简单过滤本地和远程布尔值使用自己的导出功能导出数据的简单而...
前端vue框架，TypeScript，仿掘金网站，vue3，组合式API，发布文章、沸点，发布评论、回复评论
02-10
仿掘金网站，vue3，组合式API，发布文章、沸点，发布评论、回复评论，vue框架。 适用于初中级的前端技术人员练习。适用TypeScript语言编写，提供后端接口。 多级嵌套评论，无限滚动加载，学到接口请求的二次封装，...
VUE 3——4：组件内部的组合式 API
dangfulin的博客
04-16 2883
复用与组合对工程化的大项目更有意义，因此我们提前介绍了如何创建 Vue 3 项目，简单创建并使用了一些 SFC，接下来就来介绍如何实现 SPC 的复用与组合。
Vue 学习笔记12：Vue3常用组合API
Fulling的博客
04-11 2018
Vue 学习笔记11：Vue3组合API一、创建 Vue3 工程1. 使用 vue-cli 创建2. 使用 vite 创建3. 安装 vue3 插件二、常用 composition API1. setup 函数2. ref 函数3. reactive 函数4. Vue3 的响应式5. reactive 对比 ref6. setup 的两个注意点7. 计算属性与监视（1）computed 函数（2）watch 函数（3）watchEffect 函数 一、创建 Vue3 工程 1. 使用 vue-cli 创建
Vue3的组合api(composition-API)
m0_51328823的博客
02-18 627
vue2中Options API的弊端 在Vue2中，我们 编写组件的方式是Options API <script> export default { // 定义数据 data() { return {}; }, // 声明周期钩子 created() {}, mounted() {}, // 定义方法 methods: {}, // 组件 components:{}, // 过滤器 fil
vue3-storage使用组合式示例代码
06-06
以下是一个使用 vue3-storage 组合式 API 的示例代码： ```js import { ref, onMounted } from 'vue' import { useStorage } from 'vue3-storage' export default { setup() { const count = ref(0) // 使用 useStorage 组合式 API const { get, set } = useStorage({ storage: window.localStorage, namespace: 'myapp_', }) onMounted(() => { // 初始化 count 的值 count.value = get('count') || 0 }) const increment = () => { count.value++ set('count', count.value) } return { count, increment, } }, } ``` 在组合式 API 中，使用 `useStorage` 函数来创建一个存储引擎实例，然后通过 `get` 和 `set` 方法来读取和存储数据。在 `setup` 函数中，可以直接使用 `get` 方法来初始化组件的状态，而不需要在 `data` 选项中声明变量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端青山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值