Vue 3 的setup还能这么用？-vue3 setup computed

一、前言

昨天讲了什么是组合式API，\# 马上都2202年了你还不知道什么是Vue3的组合式API吗？[2]今天就来听我吹一吹vue3的setup都能怎么用

借用官网一句话

setup 选项是一个接收 props 和 context 的函数

也就是说它的基本写法应该是这样的

export default{  
    name: 'test',  
    setup(props,context){  
     return {}   // 这里返回的任何内容都可以用于组件的其余部分  
    }  
    // 组件的“其余部分”  
}  
复制代码

接收一个props和context函数并且将setup内的内容通过return暴露给组件的其余部分。

二、setup注意点

由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法
由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this 修改成了 undefined

三、定义响应式数据

ref reactive

vue3通过ref reactive来定义响应式数据

ref我们用来将基本数据类型定义为响应式数据，其本质是基于Object.defineProperty()重新定义属性的方式来实现（ref更适合定义基本数据类型）

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>  
复制代码

结果

四、toRefs

如果我们用reactive的形式来定义响应式变量

setup(){  
  const obj = reactive({  
    name:'inline',  
    gender:'男',  
    age:'18'  
  })  
  return{  
    obj  
  }  
}  
复制代码

使用

<div>  
  <p>姓名:{{ obj.name }}</p>  
  <p>性别:{{ obj.gender }}</p>  
  <p>年龄:{{ obj.age }}</p>  
</div>  
复制代码

这样我们是不是发现在模板内使用参数很麻烦，那我们想直接用{{ name }}的方式访问行不行，答案是可行的

这里我们使用es6的扩展运算符

setup(){  
  const obj = reactive({  
    name:'inline',  
    gender:'男',  
    age:'18',  
  }) 
  return{  
    ...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>  
复制代码

结果

动画.gif

这里看到我们的参数都正常的显示到了页面上，但是我们去改变参数时发现视图并没有更新，这是为什么呢？？？

我们把扩展运算符写成它的等价格式

const obj = reactive({  
    name:'inline',  
    gender:'男',A  
    age:'18',  
  })  
// ...obj ==> name:obj.name  
复制代码

哎哎哎，等下我的鼠标浮动上去怎么提示我name只是一个字符串？

image.png

那我们在看看我们用ref定义值时提示什么

image.png

奥奥，这个时候我们看到name是一个Ref<string>，是一个响应式字符串。

这样我们就找到了为什么没有更新视图的原因，当我们用...扩展运算符时我们得到的只是一个普通类型的数值，并不是一个响应式数据

为了解决这个问题呢，vue3给我们提供了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>  
复制代码

参数都可以正常改变，成功改头换面

动画1.gif

toRefs总结

toRefs会将我们一个响应式的对象转变为一个普通对象，然后将这个普通对象里的每一个属性变为一个响应式的数据

五、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>  
复制代码

通过点击事件将值传给fun1，fun1接收到后在传给fun2

这里我们用this.fun2()的方式去调用fun2，为什么这里用this可以正常执行不会报undefind，因为这里的this非彼this，Vue2里的this是实例这里的this是对象

<button @click="fun1('你好')">点我1</button>  
复制代码

结果,成功调用并输出

image.png

方式二

注意这里调用fun2的方式与方式一不同，直接调用就可以，不用this调用

export default {  
  name: "test",  
  setup(){  
      const fun1 = (data) => {  
        fun2(data)  
      }  
      const fun2 = (data) => {  
        console.log(data)  
      }  
    return{  
      fun1,  
    }  
  }  
}  
复制代码

调用

<button @click="fun1('你好 inline')">点我1</button>  
复制代码

结果

image.png

方式三

这种方式避免了将功能逻辑都堆叠在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>  
复制代码

结果

动画.gif

方式四

与方式三一样，只是我们将两个功能函数提取出来放在单独的.js文件中

image.png

然后引入组件，并在setup内调用

<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>  
复制代码

image.png

正常执行，所以我们还可以将一个功能的所有方法和相关参数写在一个reactive对象内

如有遗漏的执行方式欢迎评论区指出~~~

六、script setup

script setup已在vue3.2的版本上正式发布

用法

<script setup>  
</script>  
复制代码

是不是异常简单

变量方法无需return

使用<script setup>时，模板被编译成一个内联在 setup 函数作用域内的渲染函数。这意味着内部声明的任何顶级绑定<script setup>都可以直接在模板中使用

<script setup>  
  const msg = 'Hello!'  
</script>  
<template>  
  <div>{{ msg }}</div>  
</template>  
复制代码

script setup内定义的变量和方法无需返回，可直接使用

组件引入

导入的组件无需注册，可直接使用

<script setup>  
  // 导入的组件也可以直接在模板中使用  
  import Foo from './Foo.vue'  
  import { ref } from 'vue'  
  // 编写合成API代码，就像在正常设置中一样  
  // 不需要手动返回所有内容  
  const count = ref(0)  
  const inc = () => {  
    count.value++ 
  }  
</script>   
<template>  
  <Foo :count="count" @click="inc" />  
</template>  
复制代码

发布Props和Emits

<script setup>  
  const props = defineProps({  
    foo: String  
  })    
  const emit = defineEmits(['update', 'delete'])  
</script>  
复制代码

普通script和script setup

script setup可以和script同时存在  
<script>  
  export const name = 1  
</script> 
<script setup>  
  import { ref } from 'vue'  
  const count = ref(0)  
</script>  
复制代码

script setup 附加选项

script setup给我们提供了大多数与 options api等效的能力

就是说options api能办到的事 script setup大部分都能办到

那还有哪些是script setup做不到的呢？如下：

name
inheritAttrs
插件或库所需要的自定义选项

那我要是想用这些怎么办呢？答案是分开写

<script>  
  export default {  
    name: 'CustomName',  
    inheritAttrs: false, 
     customOptions: {} 
  }  
</script>  
<script setup>  
  // script setup logic  
</script>  
复制代码

defineExpose

script setup定义的变量默认不会暴露出去，因为变量这时候包含在setup的闭包中。这时我们可以使用definExpose({ })来暴露组件内部属性给父组件使用

<script setup>  
  const a = 1  
  const b = ref(2)  
  defineExpose({  
    a,  
    b  
  })  
</script>  
复制代码

当父组件通过模板引用获取此组件的实例时，检索到的实例将会是这样{ a: number, b: number }（引用会像在普通实例上一样自动展开）

七、写在最后

script setup可以说的东西还有很多，等我这几天整明白了可以单独出一期它的用法。

最后感谢您的阅读~~~您的点赞和阅读就是对我最大的鼓励~~~