setup 选项是一个接收 props 和 context 的函数，此外，将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。基本写法如下：
export default{
name: 'test',
setup(props,context){
return {} // 这里返回的任何内容都可以用于组件的其余部分
}
// 组件的"其余部分"
}定义响应式数据
ref 我们用来将 基本数据类型 定义为响应式数据（ref更适合定义基本数据类型），ref底层的本质其实还是reactive，系统会自动根据我们给ref传入的值将它转换成ref(xx) -> reactive({value:xx})
reactive用来将引用类型定义为响应式数据，其本质是基于Proxy实现对象代理
- 基本数据类型（单类型）：除Object。 String、Number、boolean、null、undefined。
- 引用类型：object。里面包含的 function、Array、Date。
<script>
import {ref, reactive} from "vue";
export default {
name: "test",
setup(){
// 基本类型
const nub = ref(0)
const str = ref('inline')
const boo = ref(false)
// 引用类型
const obj = reactive({
name:'inline',
age:'18'
})
const arr = reactive(['0','1','2'])
return{
nub,
str,
boo,
obj,
arr,
}
}
}
</script>使用:
<template>
<div>
<h1>基本类型</h1>
<p>nub:{{ nub }}</p>
<p>str:{{ str }}</p>
<p>boo:{{ boo }}</p>
</div>
<div>
<h1>引用类型</h1>
<p>obj:{{ obj.name }}</p>
<p>arr:{{ arr[1] }}</p>
</div>
</template>Refs
toRefs会将我们一个响应式的对象转变为一个普通对象，然后将这个普通对象里的每一个属性变为一个响应式的数据
setup(){
const obj = reactive({
name:'inline',
gender:'男',
age:'18',
})
return{
...toRefs(obj),
}
}<div>
<p>姓名:{{ name }}</p>
<p>性别:{{ gender }}</p>
<p>年龄:{{ age }}</p>
</div>
<div>
<button @click="name = 'juejin'">改变姓名</button>
<button @click="gender = '女'">改变性别</button>
<button @click="age = '20'">改变年龄</button>
</div>setup中执行方法
方法一：
以reactive定义响应式数据的方式来定义方法
<script>
import {ref, reactive,toRefs} from "vue";
export default {
name: "test",
setup(){
const str = ref('inline')
const fun = reactive({
fun1(data){
console.log(str.value)
this.fun2(data)
},
fun2(data){
console.log(data)
console.log('我是fun2')
}
})
return{
...toRefs(fun),
}
}
}
</script> 使用this.fun2()的方式去调用fun2，为什么这里用this可以正常执行不会报undefind，因为这里的this非彼this，Vue2里的this是实例这里的this是对象
<button @click="fun1('你好')">点我1</button>方法二：
export default {
name: "test",
setup(){
const fun1 = (data) => {
fun2(data)
}
const fun2 = (data) => {
console.log(data)
}
return{
fun1,
}
}
}<button @click="fun1('你好 inline')">点我1</button>方法三：
这里避免了将功能逻辑都堆叠在setup的问题，将独立的功能写成单独的函数
这里我在setup外写了fun() login()两个功能函数，并在setup内分别调用
import {ref, reactive,toRefs} from "vue";
export default {
name: "test",
setup(){
const test1 = fun() // 如果函数返回参数过多，可以赋值给变量并用扩展运算符暴露给组件的其余部分
const { test } = login() // 也可单个接收
return{
...toRefs(test1),
test,
}
}
}
// 功能1
function fun(){
let str = ref('我是功能1')
function fun1(data){
console.log(str.value)
fun2(data)
}
function fun2(data){
console.log(data)
}
return{
fun1,
fun2,
}
}
// 功能2
function login() {
const obj = reactive({
msg:'我是功能2'
})
function test() {
console.log(obj.msg)
}
return{
test
}
}
</script><button @click="fun1('你好 inline')">点我1</button>
<button @click="test">点我2</button>方法四：
与方式三一样，只是我们将两个功能函数提取出来放在单独的.js文件中
test.js
import {ref, reactive} from "vue";
// 功能一
function fun(){
let str = ref(value: "我是功能一")
function fun1(data){
console.log(str.value)
fun2(data)
}
function fun2(data){
console.log(data)
}
return{fun1, fun2}
}
// 功能二
function login(){
const obj = reactive(target: {
msg:'我是功能2'
})
function test() {
console.log(obj.msg)
}
return{ test }
}
export {
fun,
login
}引入组件，并调用
<template>
<div style="text-align: center;margin-top: 50px">
<button @click="fun1('你好 inline')">点我1</button>
<button @click="test">点我2</button>
</div>
</template>
<script>
import {ref, reactive,toRefs} from "vue";
import { fun,login } from './test.js'
export default {
name: "test",
setup(){
const test1 = fun()
const { test } = login()
return{
...toRefs(test1),
test,
}
}
}
</script>方法五：
定义一个reactive响应式对象，赋值给login变量，这个响应式对象内有我们登录需要的参数、验证和方法，这里我们全部放在login这个响应式对象内然后用toRefs及扩展运算符暴露出去
<script>
import {ref, reactive,toRefs} from "vue";
export default {
name: "test",
setup(){
const login = reactive({
param: {
username: '123',
password: '123456',
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
},
login(){
this.param.username = 'inline'
this.param.password = '123456'
console.log('成功登录！')
}
})
return{
...toRefs(login),
}
}
}
</script><input type="text" v-model="param.username">
<input type="password" v-model="param.password">
<button @click="login">登录</button>setup注意点
- 由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法
- 由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this 修改成了 undefined
