vue3.0中setup的两种用法实例

前言

这篇文章主要介绍了vue3.0中setup使用，本文通过两种用法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

什么是setup

setup是vue3新增的生命周期函数，setup的加入就是为了让vue3使用组合式API（Composition API）。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑。

setup真香

setup位于beforeCreated之前,用于代替created 和beforeCreated。不仅是作为vue3新增的生命周期函数，还可以在setup中引入外部js文件方法，可在js中共用vue全部生命周期。

哈哈，是不是和之前的mixin很像？没错，setup可以更好的拆分业务，只把需要用到的公共参数和方法return出去使用，而不像mixin一样完全侵入原有vue文件，再也不用考虑参数方法重名问题了，用到哪个取哪个，引入再多js也不怕。

一、setup函数的特性以及作用

可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多

Vue3 的一大特性函数 ---- setup

1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的

2、setup函数是 Composition API（组合API）的入口

3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

二、setup函数的注意点：

1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined

3、setup函数只能是同步的不能是异步的

用法1:结合ref使用

<template>
 <div id="app">
  {{name}}
  <p>{{age}}</p>
  <button @click="plusOne()"> </button>
 </div>
</template>
  
<script>
import {ref} from 'vue'
export default {
 name:'app',
 data(){
  return {
   name:'xiaosan'
  }
 },
 setup(){
  const name =ref('小四')
  const age=ref(18)
  function plusOne(){
   age.value   //想改变值或获取值 必须.value
  }
  return { //必须返回 模板中才能使用
   name,age,plusOne
  }
 }
}
</script>

用法2：代码分割

Options API 和 Composition API 

Options API 约定：

我们需要在 props 里面设置接收参数

我们需要在 data 里面设置变量

我们需要在 computed 里面设置计算属性

我们需要在 watch 里面设置监听属性

我们需要在 methods 里面设置事件方法

你会发现 Options APi 都约定了我们该在哪个位置做什么事，这反倒在一定程度上也强制我们进行了代码分割。

现在用 Composition API，不再这么约定了，于是乎，代码组织非常灵活，我们的控制代码写在 setup 里面即可。

setup函数提供了两个参数 props和context,重要的是在setup函数里没有了this,在 vue3.0 中，访问他们变成以下形式： this.xxx=》context.xxx

我们没有了 this 上下文，没有了 Options API 的强制代码分离。Composition API 给了我们更加广阔的天地，那么我们更加需要慎重自约起来。

对于复杂的逻辑代码，我们要更加重视起 Composition API 的初心，不要吝啬使用 Composition API 来分离代码，用来切割成各种模块导出。

我们期望是这样的：

importuseAfrom'./a';
importuseBfrom'./b';
importuseCfrom'./c';
exportdefault{
 setup (props) {
 let{ a, methodsA } = useA();
 let{ b, methodsB } = useA();
 let{ c, methodsC } = useC();
 return{
   a,
    methodsA,
    b,
    methodsB,
    c,
    methodsC
  }
 }
}

就算 setup 内容代码量越来越大，但是始终围绕着大而不乱，代码结构清晰的路子前进。

总结

到此这篇关于vue3.0中setup的两种用法的文章就介绍到这了,更多相关vue3.0中setup使用内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！