Vue3的setup还能这么用？

原创已于 2023-06-16 10:38:16 修改 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue3 #setup

于 2021-11-30 09:12:05 首次发布

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了Vue3的setup选项新用法，包括响应式数据的定义、toRefs的运用、在setup中执行方法的技巧，以及<scriptsetup>的引入。重点展示了如何利用reactive、ref和toRefs创建、管理响应式对象，以及如何组织和复用功能函数。

Vue3的setup还能这么用？

一、前言

vue3的setup都能怎么用：

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

基本写法代码片显示 ；

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

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

二、setup 注意点

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

三、定义响应式数据

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

ref和reactive一样, 也是用来实现响应式数据的方法。
由于reactive 必须传递一个对象, 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦所以Vue3就给我们提供了 ref方法, 实现对 简单值的监听

ref 我们用来将基本数据类型定义为响应式数据（ref更适合定义基本数据类型），ref 底层的本质其实还是reactive ，系统会自动根据我们给ref 传入的值将它转换成ref (xx) ->reactive ({value:xx})
[reactive ][1]用来将引用类型定义为响应式数据，其本质是[基于Proxy实现对象代理 ][1]
基本数据类型（单类型）：undefined、. null、布尔值（Boolean）、字符串（String）、数值（Number）
引用类型：{对象（Object）} ；里面包含的 function、Array、Date。
demo:html

<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>

demo:javascript

<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>

结果：
在这里插入图片描述

四、关于toRefs

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

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

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

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

<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>

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

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
  })
  return{
    ...obj,
  }
}

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

当我们用…扩展运算符时我们得到的只是一个[普通类型][1]的数值，并不是一个[响应式数据][1]

为了解决这个问题呢，vue3给我们提供了toRefs函数,来让我们看看效果如何

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
  })
  return{
    ...toRefs(obj),
  }
}

在这里插入图片描述

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

五、setup中执行方法

1. 以reactive定义响应式数据的方式来定义方法

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

通过点击事件将值传给fun1，fun1接收到后在传给fun2
这里我们用this.fun2()的方式去调用fun2，为什么这里用this可以正常执行不会报undefind，
因为这里的this非彼this，Vue2里的this是实例这里的this是对象

<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>

结果,成功调用并输出
在这里插入图片描述

2. setup直接把函数return出来，

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

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

调用fun1正常输出

3. 将独立的功能写成单独的函数

这里我在 setup外写了 fun()login()两个功能函数，并在setup内分别调用
这种方式避免了将功能逻辑都堆叠在setup的问题

<button @click="fun1('你好 inline')">点我1</button>
<button @click="test">点我2</button>

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>

在这里插入图片描述

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

在这里插入图片描述
然后引入组件，并在[setup内][1]调用

<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>

正常执行且输入
在这里插入图片描述

5. 定义一个 reactive响应式对象，赋值给login 变量，这个响应式对象内有我们登录需要的参数、验证和方法，这里我们全部放在login 这个响应式对象内然后用 toRefs及扩展运算符暴露出去

<input type="text" v-model="param.username">
<input type="password" v-model="param.password">
<button @click="login">登录</button>

<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>

在这里插入图片描述

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

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

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

<template>
  <div>{{ msg }}</div>
</template>

变量方法无需return

<script setup>
  const msg = 'Hello!'
</script>

组件引入

<template>
  <Foo :count="count" @click="inc" />
</template>

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

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>

definExpose

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

<script setup>
  const a = 1
  const b = ref(2)

  defineExpose({
    a, b
  })
</script>

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