首页 > 其他分享 >vue3——初识setup

vue3——初识setup

时间:2022-09-03 11:46:41浏览次数:53  
标签:return 函数 setup 配置 初识 Vue2 vue3 computed

1.理解:Vue3中一个新的配置项,值为一个函数。

2.setup是所有Composition API(组合API)表演的舞台

3.组件中所用到的:数据、方法等等,均要配置在setup中。

 

4.setup函数的两种返回值:

  • 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用,不需要再写this。(重点关注!)

  • 若返回一个渲染函数:则可以自定义渲染内容。(了解)

5.注意点:

  1. 尽量不要与Vue2.x配置混用

    • Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。

    • 但在setup中不能访问到Vue2.x配置(data、methos、computed...)。

    • 如果有重名, setup优先。

  2. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

 

标签:return,函数,setup,配置,初识,Vue2,vue3,computed
From: https://www.cnblogs.com/MDRY/p/16652244.html

相关文章

  • vue3和angular的区别和联系(前端主题随笔一)
    众所周知,vue脱胎于angular,平常在工作中,尤其对全栈开发者,甚至工业上需要管业务的开发者来说,一次掌握多种前端框架是没有时间和精力的事,博主是一个3年angular开发从业者,5年C#......
  • vue3 基础-全局组件和局部组件
    组件和页面的关系可以理解为,组件是页面的一部分.形象地理解组件就和盖房子一样的,可以将房子粗略拆分3个组件(组成部分)房顶,房身,地基.同时房顶又可以拆分...........
  • vue——创建vue3
    一.使用vue-cli创建官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create 二.使用vite创建官方文档:https://v3.cn.vuejs.org/guide/installa......
  • [Node.js] Setup a Node.js CLI
    CreatingaCLIinNode.jsjusttakesaextrasteportwobecausetheyarereallyjustanordinaryNode.jsappwrappedbehindabincommand.Forthisexercise,......
  • .Net+Vue3实现数据简易导入功能
    在开发的过程中,上传文件或者导入数据是一件很常见的事情,导入数据可以有两种方式:前端上传文件到后台,后台读取文件内容,进行验证再进行存储前端读取数据,进行数据验证,然后发......
  • SpringMvc(一)-初识
    1、环境搭建1.1jar包<spring.version>4.3.18.RELEASE</spring.version><!--spring-mvcbegin--><dependency><groupId>org.springframework</groupId><a......
  • vue3项目在页面退出时弹窗确认--用vant组件Dialog弹窗在路由改变的时候不生效问题
    写vue3的H5项目的时候有个需求是回退时弹窗确认是否退出当前页面一、第一个办法------使用onbeforeRouteLeave路由钩子constformRouteAbi=localStorage.getItem("fo......
  • vue3+vite+postcss+vm实现屏幕自适应
    1、安装 postcss-pxtorem插件npminstallpostcss-pxtorem2、新增postcss.config.js的文件, module.exports={plugins:{"postcss-pxtorem":{......
  • vue3项目-小兔鲜儿笔记-一级分类页面01
    1.顶级类目-面包屑组件的封装了解render函数和h函数:render函数的返回值是html结构,渲染到#app容器,相对于template里传入html结构,render函数的优先级更高h函数是一个创建......
  • vue3 使用element-plus 按需引入
    1:npminstallelement-plus--save2:组件按需引入所需插件:unplugin-auto-import、unplugin-vue-components图标按需引入所需插件:unplugin-auto-import、unplugin-......