位置: IT常识 - 正文

vue3.0中setup使用(两种用法)(vue set up)

编辑:rootadmin
vue3.0中setup使用(两种用法)

推荐整理分享vue3.0中setup使用(两种用法)(vue set up),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue setup ref,vue3.0的setup()函数,vue3 setup有什么用,vue3 setup作用,vue3 setup script,vue setup ref,vue3.0 setup,vue3.0 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、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使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<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

  }

vue3.0中setup使用(两种用法)(vue set up)

 }

}

</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 来分离代码,用来切割成各种模块导出。

我们期望是这样的:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

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 内容代码量越来越大,但是始终围绕着大而不乱,代码结构清晰的路子前进。

本文链接地址:https://www.jiuchutong.com/zhishi/297268.html 转载请保留说明!

上一篇:vue踩坑--background-image路径问题(vue backbone)

下一篇:JavaScript实现留言板(javascript保留字有哪些)

  • integer转string(integer转string怎么转)

    integer转string(integer转string怎么转)

  • realme gt neo2是曲面屏吗

    realme gt neo2是曲面屏吗

  • 红米手表怎么调时间设置(红米手表怎么调整时间)

    红米手表怎么调时间设置(红米手表怎么调整时间)

  • ipadmini1是哪一年的(ipadmini1是哪一年上市的)

    ipadmini1是哪一年的(ipadmini1是哪一年上市的)

  • 华为p40机身尺寸是多少(华为p40机身尺寸究竟多大)

    华为p40机身尺寸是多少(华为p40机身尺寸究竟多大)

  • 苹果xs死机正常吗(苹果xs总是死机)

    苹果xs死机正常吗(苹果xs总是死机)

  • 手机上老是显示小程序调试信息(手机上老是显示拼多多)

    手机上老是显示小程序调试信息(手机上老是显示拼多多)

  • 智行火车票学生票为啥还是原价(智行火车票学生认证怎么解绑)

    智行火车票学生票为啥还是原价(智行火车票学生认证怎么解绑)

  • 苹果键盘大写键在哪里(苹果键盘大写键 删除键 数字键变颜色了)

    苹果键盘大写键在哪里(苹果键盘大写键 删除键 数字键变颜色了)

  • 手机返厂维修需要多长时间(手机返厂维修需要什么)

    手机返厂维修需要多长时间(手机返厂维修需要什么)

  • 关联qq却看不到消息(关联qq却看不到好友动态)

    关联qq却看不到消息(关联qq却看不到好友动态)

  • 美团订单无效请重新选择商品什么意思(美团订单显示无效)

    美团订单无效请重新选择商品什么意思(美团订单显示无效)

  • fx9800p相当于英特尔i几(fx9800相当于英特尔i几)

    fx9800p相当于英特尔i几(fx9800相当于英特尔i几)

  • 网易手机绑定达到上限(网易手机绑定达人怎么绑)

    网易手机绑定达到上限(网易手机绑定达人怎么绑)

  • ipadair有指纹识别吗(ipad air有指纹)

    ipadair有指纹识别吗(ipad air有指纹)

  • 继承与多态的区别(什么是继承和多态,请举个例子说明继承和多态)

    继承与多态的区别(什么是继承和多态,请举个例子说明继承和多态)

  • miband3是什么设备(miband3怎么调时间)

    miband3是什么设备(miband3怎么调时间)

  • word2007导航窗格在哪(07版word导航窗格)

    word2007导航窗格在哪(07版word导航窗格)

  • 电脑强制关机快捷键(电脑强制关机快捷键对电脑有损害吗)

    电脑强制关机快捷键(电脑强制关机快捷键对电脑有损害吗)

  • 淘宝积分在哪里兑换(淘宝积分在哪里领取)

    淘宝积分在哪里兑换(淘宝积分在哪里领取)

  • iphone移动合约机什么意思(苹果的移动合约机怎么样)

    iphone移动合约机什么意思(苹果的移动合约机怎么样)

  • 哔哩哔哩的视频怎么下载到本地(哔哩哔哩的视频怎么保存到电脑)

    哔哩哔哩的视频怎么下载到本地(哔哩哔哩的视频怎么保存到电脑)

  • 华为手表gt2怎么充电(华为手表gt2怎么重新配对新手机)

    华为手表gt2怎么充电(华为手表gt2怎么重新配对新手机)

  • 为什么手机页面上会出现HD(为什么手机页面频繁出来小广告?)

    为什么手机页面上会出现HD(为什么手机页面频繁出来小广告?)

  • 抖音怎么拍动漫视频(抖音怎么拍动漫人物)

    抖音怎么拍动漫视频(抖音怎么拍动漫人物)

  • 苹果8p没信号无服务怎么回事(苹果8p没信号无法开机)

    苹果8p没信号无服务怎么回事(苹果8p没信号无法开机)

  • 快手pk受限怎么解决(快手pk受限是怎么回事)

    快手pk受限怎么解决(快手pk受限是怎么回事)

  •  oppo的root权限在哪里(oppo手机的root权限在哪)

    oppo的root权限在哪里(oppo手机的root权限在哪)

  • 电脑快捷删除键(电脑快捷删除键在哪里)

    电脑快捷删除键(电脑快捷删除键在哪里)

  • 自然人税收管理系统残疾人申报
  • 如何进行增值税发票认证
  • 纳税额是指
  • 在外地设立分公司如何办理
  • 处置固定资产增值税税率
  • 农产进项税是多少税率
  • 公对私转账没有到账怎么查询
  • 实收资本能直接转出来吗
  • 小规模纳税人可以开1%的专票吗
  • 利润总额和未分配利润的公式
  • 无追索权保理占用谁的额度
  • 建筑安装企业增值税税负
  • 企业走账的会计处理
  • 可以采用三栏式的明细账的有
  • 现金长短款的一般处理
  • 原材料呆滞物料处理方法
  • 公司与公司之间合作协议
  • 公司购买东西怎么做分录
  • 个体户要申报哪些报表
  • 中国公司投资海外有什么限制
  • 减半征收政策
  • 房产继承税征收标准是多少
  • 文化传媒公司的经营模式怎么写
  • 设立独立核算的销售机构
  • 印花税减半优惠政策2019
  • 出售专利权属于什么科目
  • 银行借款利息支出可以税前扣除吗
  • 固定资产怎么录入系统
  • 加装固态后如何分盘
  • 个人独资企业没有章程
  • 公司车辆违章怎么办
  • 怎么实现增删改查
  • 代发工资跨行手续怎么办
  • 深入解析wordpress
  • 离职后原单位不给开离职证明
  • php socket_create
  • mac m1 rosetta编译
  • Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
  • 小微企业免税额的会计分录
  • k8s kubelet
  • openai发布企业版
  • php连接数据库步骤
  • python字符串字面量有哪4种
  • 防伪税控系统该如何操作
  • 完整财务报表包括哪几类
  • 财政拨款结转累计结转为负
  • 暂估入库成本的会计分录
  • 数据库帮助文档
  • 增值税专用发票电子版
  • 固定资产的货币资金包括
  • 人工成本的分类是
  • 出借和出租包装物会计分录是什么
  • 营改增抵减的销项税额是什么意思
  • 结构性存款是什么意思是理财
  • 公司注册资金抽走违法吗
  • 电商平台返佣金个人税点
  • 小规模纳税人转一般纳税人当月如何申报
  • 建设项目开办费包括哪些
  • 旅游团建费用会计怎么入账
  • sqlserver中with(nolock)深入分析
  • Linux下MySQL5.7.18二进制包安装教程(无默认配置文件my_default.cnf)
  • solaris 修改用户 主目录
  • 怎么用u盘装驱动
  • Windows Server 2008下 驾驭拨号上网
  • windows提示滑动以关闭电脑
  • win10截图截不了怎么办?
  • 去掉电脑右下角显示的时间
  • opengl消隐
  • JS实现的base64加密、md5加密及sha1加密详解
  • unity进度条控制动画进度
  • javascript闭包详解
  • python基础开发
  • unity旋转角度范围限制
  • JAVAscript字符串类型单引号和双引号意一样吗
  • python中的异常处理有哪些
  • js如何判断是否有定时器功能并清除
  • 基层税务工作难点重点热点
  • 广东高速公路电子发票服务来平台
  • 电子就业协议签了还是应届生
  • 怎么判断增值税能不能抵扣
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设