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


Posted in Vue.js onDecember 02, 2020

一、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使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 #Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 #Vue.js
You might like
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
javascript各种复制代码收集
2008/09/20 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python程序设计入门(3)数组的使用
2014/06/16 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
对python中return和print的一些理解
2017/08/18 Python
python日期相关操作实例小结
2019/06/24 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
自荐信格式简述
2014/01/25 职场文书
预备党员承诺书
2014/03/25 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
通讯稿格式及范文
2015/07/22 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
Redis实现分布式锁的五种方法详解
2022/06/14 Redis