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使⽤
<template>
<div id="app">
vue中reactive
{{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 上下⽂，没有了 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 内容代码量越来越⼤，但是始终围绕着⼤⽽不乱，代码结构清晰的路⼦前进。
参考：
setup函数是⽤于定义变量和⽅法的
1.引⼊ref 和 reactive 模块
import {ref, reactive} from 'vue'
ref 模块是⽤来声明简单数据类型的，例如,string , number ,boolean 等
reactive 模块是⽤来声明复杂数据类型的，例如，数组，对象等
2.使⽤setup函数，并在函数内使⽤ref 声明简单数据类型和复杂数据类型
setup(){
let num = ref(0)  // ref 声明简单数据类型
let arr = reactive([1,2,3])  // reactive 声明复杂数据类型
// 声明⽅法
let test = ()=>{
return 111
}
// 返回数据
return {
num , arr ,test
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。