Vue3之setup语法糖的使用

---

前言

       Vue.js框架作为当前流行的开发框架之一，经历过多个版本的迭代，Vue2x成为了十分经典的版本。然而在vue.js文档官网中已经宣布Vue 2 将于 2023 年 12 月 31 日停止维护。由此可见，Vue3x版本的使用将会只盛不衰。因此，我们非常有必要对Vue3x框架进行系统学习。
       接下来，让我们走进setup的世界。

---

一、setup是什么？

vue3中添加了setup配置项，用它来写Composition API 组合式api。

1. 这个钩子会在created之前执行。
2. 它的内部没有this。
3. 如果它的返回值是一个对象，则这个对象中的键值对最终会合并到created钩子中的this中去，从而在视图上也能访问相应的数据值。
4. 不做特殊处理的情况下，它的数据不会有响应式的效果。

二、setup中定义数据

1.非响应式数据

在setup中，当数据没有做响应式处理时，不管使用什么方法都是无法对数据进行修改的。

setup() {
    let change = () => {
      info = 'hello vue.js!!'
    }

    let info = 'hello vue.js';

    return {
      change,
      info
    }
  }

2.响应式数据

在Vue3中使用ref、reactive可以是数据变成响应式的数据，同时建议ref用来定义基本数据类型，reactive建议用来定义引用对象。

 setup() {
    let change = () => {
      info = 'hello vue.js!!'
    }

    let info = ref('hello vue.js');

    let obj = reactive({
      name: "赶紧敲代码",
      address: "广州"
    })

    return {
      info,
      obj,
      change
    }
  }

三、setup使用props

setup中接收两个参数，其中第一个是props用来接收其他组件传递到当前组件的props属性，同时还需要使用props：[]定义相应的数据。由下面的代码我们可以看到，emit子组件中在props中声明了一个msg数据，app父组件通过:msg的方式把数据传递到了emit组件中,并使用props.msg的形式读取

四、setup中使用自定义事件

setup中接收两个参数，其中第二个是context对象，我们可以打印一下context对象，观察一下其内部存在什么属性，我们可以看到绿色框中的内容attrs主要用来存储props（没有在props对象中定义的），emit用来存储自定义事件,slots用来存储插槽

<template>
    <div id="container">
        <button @click="test">自定义事件触发</button>
        <hr>
        <h2>当前的求和为：{{ sum }}</h2>
        <button @click="sum++">加一</button>
    </div>
</template>

<script>
import { ref } from 'vue'
export default {
    name: 'emit',
    emits: ['hello'],
    props: ['msg'],
    setup(props, context) {

        console.log(props);
        console.log(context);

        let test = () => {
            context.emit('hello', props.msg)
        }

        let sum = ref(0);

        return {
            test,
            sum
        }
    }
}
</script>

<style lang="less" scoped></style>

控制台打印

五、setup中使用watch

1.ref监听（单个）

<template>
    <div id="container">

        <hr>
        <h2>当前的求和为：{{ sum }}</h2>
        <button @click="sum++">加一</button>
    </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
    name: 'emit',
    setup(props, context) {

        let sum = ref(0);

        watch(sum, (newValue, oldValue) => {
            console.log(newValue + " ----" + oldValue);
        })

        return {
            sum
        }
    }
}
</script>

<style lang="less" scoped></style>

2.ref监听（多个）

<template>
    <div id="container">

        <hr>
        <h2>当前的求和为：{{ sum }}</h2>
        <button @click="sum++">加一</button>
        <hr>
        当前信息为：{{ msg }}
        <button @click="msg += '!'">修改信息</button>
    </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
    name: 'emit',
    setup(props, context) {

        let sum = ref(0);

        let msg = ref("vue.js")


        // watch(sum, (newValue, oldValue) => {
        //     console.log(newValue + " ----" + oldValue);
        // })

        watch([sum, msg], (newValue, oldValue) => {
            console.log(newValue, oldValue);
        })

        return {
            sum,
            msg,
        }
    }
}
</script>

<style lang="less" scoped></style>

3.监听reactive

注意：此处有一个小坑，当使用watch监听reactive的响应式数据时，newValue和oldValue输出的都是修改后的数据（当前无法解决：2023/3/31）

<template>
    <div id="container">

        <hr>
        <h2>当前的求和为：{{ sum }}</h2>
        <button @click="sum++">加一</button>
        <hr>
        当前信息为：{{ msg }}
        <button @click="msg += '!'">修改信息</button>
        <hr>
        <h2>姓名:{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="person.name = '李四'">修改姓名</button>
        <button @click="person.age = 21">修改年龄</button>
    </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
export default {
    name: 'emit',
    setup(props, context) {

        let sum = ref(0);
        let msg = ref("vue.js")
        let person = reactive({
            name: '张三',
            age: 18
        })


        // watch(sum, (newValue, oldValue) => {
        //     console.log(newValue + " ----" + oldValue);
        // })

        // watch([sum, msg], (newValue, oldValue) => {
        //     console.log(newValue, oldValue);
        // })

        watch(person, (newValue, oldValue) => {
            console.log(newValue, oldValue);
        }, { deep: false })

        return {
            sum,
            msg,
            person
        }
    }
}
</script>

<style lang="less" scoped></style>

• 1.无法正确获取到oldValue
• 2.强制开启了深度监视，使用{deep:false}也无法关闭

那么如何解决这个问题呢？

1.监听对象的某个属性

2.监听对象的某些属性

六、总结

      写在最后，这是本人在学习setup语法糖时的一些个人理解，由于自身能力的有限性，可能会导致文章内容的局限性，当然编者接受每一位朋友的建议和批评。欢迎大家在评论区浏览。