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

目录
  • 前言
  • 一、setup函数的特性以及作用
  • 二、setup函数的注意点：
  • 用法1:结合ref使用
  • 用法2：代码分割
  • 总结

前言

这篇文章主要介绍了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使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue生命周期和MVVM框架

    目录 生命周期 与动态组件有关的两个特殊的钩子: 与组件异常捕获有关的一个钩子: 生命周期有哪些 生命周期 组件从开始到结束的全过程 创建阶段:beforeCreate.created挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 组件从开始到结束的全过程 创建阶段:beforeCreate.created 挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 销毁阶段:beforeDestro

  • Vue生命周期详解

    Vue生命周期详解

    这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 单组件的生命周期 父子组件的生命周期 兄弟组件的生命周期 宏mixin的生命周期 生命周期:Vue 实例从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子 1. 生命周期钩子函数 下面这张图是vue生命周期各个阶段的执行情况: 注意: created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • vue3 使用setup语法糖实现分类管理功能

    目录 setup语法糖简介 setup语法糖中新增的api 模块简介 分类模块路由 分类列表组件 获取分类列表数据 分类表单组件 setup语法糖简介 直接在 script 标签中添加 setup 属性就可以直接使用 setup 语法糖了. 使用 setup 语法糖后,不用写 setup 函数,组件只需要引入不需要注册,属性和方法也不需要再返回,可以直接在 template 模板中使用. setup语法糖中新增的api defineProps:子组件接收父组件中传来的 props defineE

  • VUE生命周期全面系统详解

    VUE生命周期全面系统详解

    目录 什么是生命周期 生命周期的作用 vue生命周期有哪些 Vue 生命周期总共分为几个阶段 1)beforeCreate创建前 2)created创建后 3)beforeMounte挂载前 4)mounted挂载后 5)beforeUpdate更新前 6)updated更新后 7)beforeDestroy销毁前 8)destroyed销毁后 问题 什么是生命周期 每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM

  • Vue生命周期与setup深入详解

    Vue生命周期与setup深入详解

    目录 生命周期 生命周期函数 不同API的生命周期 setup介绍 1. 访问Props 2. setup上下文 3. 与渲染函数一起使用 生命周期 下图对比了vue3(左)和vue2(右)的生命周期:vue3将destoryed该名成了unmounted,相应的beforeDestory改成了beforeUnmounted.除此之外在组合式API中新增了个钩子函数:setup.它发生在beforeCreate之前. 先简单介绍下setup函数: setup() 钩子是在组件中使用组合式 API

  • Vue生命周期实例分析总结

    Vue生命周期实例分析总结

    目录 1. 概述 2. 页面钩子函数 3. 生命周期函数 1. 概述 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码. 简单来说,生命周期钩子函数就是一堆回调函数,在我们创建实例时,这些回调函数按顺序执行. 2. 页面钩子函数 名称 作用 beforeCreate 在实例初始化之后,数据观测和事件配置之前

  • Vue 全部生命周期组件梳理整理

    目录 前言 生命周期 created:在创建之后使用: beforeMount:挂载数据到DOM之前会调用 mounted:挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM beforeUpdate:在更新DOM之前 调用该钩子 应用:可以获取原始的DOM updated:在更新DOM之后 调用该钩子 应用:可以获取最新的DOM beforeDestroy: destroyed: activated: 用于组件激活的功能 deactivated:用于组件被停用 前言 今天继续加油学习

  • Vue生命周期函数调用详解

    Vue生命周期函数调用详解

    目录 生命周期 Vue.mixin 生命周期选项合并 调用生命周期函数 结语 生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi

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

    目录 前言 一.setup函数的特性以及作用 二.setup函数的注意点: 用法1:结合ref使用 用法2:代码分割 总结 前言 这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 什么是setup setup是vue3新增的生命周期函数,setup的加入就是为了让vue3使用组合式API(Composition API).使用组合式API更符合大型项目的开发,通过setup可以将该部分抽离成函数,

  • vue3.0中setup使用(两种用法)

    一.setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1.setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 2.

  • Javascript中call的两种用法实例

    用法一(常见用法): 表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例: 复制代码 代码如下: function Class1(){    this.name = "class1";    this.showName = function(){        alert(this.name);    }}function Class2(){    this.name = "class2";}var c1

  • jQuery中after的两种用法实例

    法一:在每个p元素后插入内容: 复制代码 代码如下: $("button").click(function(){      $("p").after("<p>Hello world!</p>");}); 法二: 复制代码 代码如下: $("button").click(function(){    $("p").after(function(n){            return

  • VUE中filters过滤器的两种用法实例

    VUE中filters过滤器的两种用法实例

    目录 前言 一.全局过滤器 全局过滤器之单一挂载 全局过滤器之批量挂载 二.组件过滤器 附:过滤器中传入多个参数 总结 前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示. <!-- 在双花括号中 --> <div>{{ message | capitaliz

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

  • vue3.0中setup中异步转同步的实现

    vue3.0中setup中异步转同步的实现

    目录 vue3 setup中异步转同步 vue3中setup前加上async后页面不显示 子组件 父组件中需要单独设置 使用vue3中的异步 vue3 setup中异步转同步 vue3中setup前加上async后页面不显示 **问题描述 **在开发 vue3 中,因为通过接口数据为异步函数获取,导致最后数据无法成功赋值进 return 中的数据.所以需要setup函数异步转同步,后设置了async 后异步转同步,结果导致页面空白不显示. 解决问题 在Vue3中,如果当前组件的setup使用了a

  • Java关键字instanceof的两种用法实例

    instanceof关键字用于判断一个引用类型变量所指向的对象是否是一个类(或接口.抽象类.父类)的实例.   举个例子: 复制代码 代码如下: public interface IObject { } public class Foo implements IObject{ } public class Test extends Foo{ } public class MultiStateTest {         public static void main(String args[])

  • vue3.0中的双向数据绑定方法及优缺点

    熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 Object.defineProperty的缺点: 1. 在Vue中,Object.defineProperty无法监控到数组下标的变化, 导致直接通过数组的下标给数组设置值,不能实时响应. push() pop() shift() unsh

  • Vue3封装登录功能的两种实现

    Vue3封装登录功能的两种实现

    目录 方法一:使用用户名和密码进行登录 方法二:使用手机验证码登录 方法一: 使用用户名和密码进行登录 封装代码: <template> <el-form ref="ruleFormRef" status-icon :model="ruleForms" :rules="rules" label-width="120px" class="demo-ruleForm" > <el-

随机推荐