vue3 setup的简单理解和应用

前言

vue3官方文档更新的第一个就是组合式API，那就是说明这是非常重要的，最近我也刚入手vue3，就记录下自己刚用setup函数的一点点心得
在vue2的时候,当我们的组件功能比较多的时候，对于相同逻辑的关注点的相关代码会比较分散，会增加我们对组件的理解以及维护。
例如如下代码：

可能这觉得没什么，但是如果分布在(data、computed、methods、watch、生命周期钩子) 等，那所展现的图片就可能会这样

而这样一套代码的组件会变得非常难以阅读，因为我们很难搞清楚 哪些代码是和哪些代码在一起使用的。

而这个就是 组合式API 所尝试进行解决的第一个问题。我们来看下面这套代码。

此时我们已经将相关联的代码保持在了一起，那么我们的代码将更具有可读性，因此也更具有可维护性。

但是尽管Vue 3很久之前就已经开始投入使用，也不免会有人抱怨Vue 3的知识点太多太杂，更新太快。这不，所以Vue 3又定稿了一项新技术：script-setup 语法糖。
script setup是VUE3的实验性功能，直接把 setup 写在 script 标签中，表示标签里面的代码相当于在setup里面运行。
这样可以太太省略很多冗余代码，默认直接暴露出去。
不使用<script setup>的时候，我们的代码是这样的：

<script lang="ts">
    import { defineComponent, ref } from 'vue'
    import Foo from './components/Foo.vue'
    export default defineComponent({
        components: {
            Foo
        },
        setup() {
            const count = ref(0)
            const inb = () => {
                count.value++
            }

            return {
                count,
                inb
            }
        }
    })
</script>

使用之后：

<template>
    <div>
        App
        <Foo></Foo>
        <!-- 下面是在setup语法糖里面动态地改变组件 -->
        <component :is="count % 2 ==0 ? Foo : Bar"></component>
    </div>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    import Foo from './components/Foo.vue' //在 script setup 中 所有组件导入即自动注册，省去了组件的注册步骤，也没有显式的导出变量的动作。
    import Bar from './components/Bar.vue'

    const count = ref(0)

    function inb(){
        count.value++
    }

    //这里不需要return，setup语法糖编译完成后默认return出去一个render()函数
    //这可能是带来的较大便利之一，在以往的写法中，定义数据和方法，都需要在结尾 return 出去，
    //才能在模板中使用。在 script setup 中，定义的属性和方法无需返回，可以直接使用
</script>

使用props & emit & useContext

<template>
  <button @click="emit('setNum', Number.parseInt(Math.random() * 10))">随机数字</button>
</template>

<script setup>
import { defineEmit, defineProps, useContext} from 'vue'
const props = defineProps({
//通过defineProps指定当前 props 类型，获得上下文的props对象
  list: {
    type: Array,
    default: () => []
  }
})

//使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit
const emit = defineEmit(['deleteData', 'setNum'])

//可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots
// 旧
  import { useContext } from 'vue'
  const { slots, attrs } = useContext()
  
// 新
  import { useAttrs, useSlots } from 'vue'
  const attrs = useAttrs()
  const slots = useSlots()


</script>

1.props 需要使用到 defineProps 来定义，用法跟之前的props写法类似

setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可 以使用 ES6 解构，解构会消除它的响应式
如果在开发中我们想要使用解构，还能保持props的响应式，那就需要用到toRefs

2.emit 使用 defineEmit 定义组件可以发出的事件

3.useContext 访问组件的槽和属性

setup中不能访问 Vue2 中最常用的this对象，所以context中就提供了this中最常用的三个属性：attrs、slot 和emit，分别对应 Vue2.x 中的 $attr属性、slot插槽和$emit发射事件。并且这几个属性都是自动同步最新的值，所以我们每次使用拿到的都是最新值。

4.defineProps/defineEmit 会根据传递的值做简单的类型推断

总结

1）使用setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

2）setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3）执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

4）与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

5）使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

注意事项：

1、setup函数中不能使用this。Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

2、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

暂时就了解这么多，如有不对，请不吝赐教