vue3中setup语法糖那些事儿

什么是语法糖？

vue3相比于vue2有什么新的语法糖?

ref

reactive

watch

生命周期

Teleport

setup语法糖

`<script setup>`与传统vue3有何不同

传统vue3和setup语法糖，两者之间写法如何转换？

什么是语法糖？

⭐语法糖是指在编程语言中，一种特殊的语法形式，它并不影响语言的功能和能力，只是提供一种更加优雅、简洁、易读的语法形式，让代码更加易于理解和编写。通常，语法糖是编译器或解释器在编译或解释代码时将其转换成标准语法的过程，因此语法糖并不会增加代码的运行效率，只是提高了代码的可读性和可维护性。

在前端开发中，常见的语法糖有很多，例如：

ES6中的箭头函数，可以简化函数定义的写法；

Vue中的v-bind可以写成冒号，v-on可以写成@符号，可以简化模板中绑定事件和属性的写法；

React中的JSX语法，可以将HTML和JavaScript结合在一起，使代码更加易读。

总的来说，语法糖可以提高代码的可读性和可维护性，但也需要注意不要过度使用，以免影响代码的性能和可理解性。

vue3相比于vue2有什么新的语法糖?

⭐首先需要明确的是，vue3相比于vue2，有很多新的写法和语法糖，主要是基于Composition API的实现。

ref

Vue3中使用ref来定义响应式数据，其用法与Vue2中的data类似。

import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return {
      count
    }
  }
}

reactive

reactive函数用来创建响应式对象，可以将一个普通对象转换为响应式对象。与Vue2中的computed类似，Vue3中的computed也是基于reactive实现的。

import { reactive, computed } from 'vue'
export default {
  setup() {
    const state = reactive({
      count: 0,
      doubleCount: computed(() => state.count * 2)
    })
    return {
      state
    }
  }
}

watch

Vue3中的watch函数可以监听响应式数据的变化，其用法与Vue2中的watch类似。

import { watch } from 'vue'
export default {
  setup() {
    const count = ref(0)
    watch(count, (newValue, oldValue) => {
      console.log(`count的值从${oldValue}变为${newValue}`)
    })
    return {
      count
    }
  }
}

生命周期

在Vue3中，生命周期钩子函数被重构为setup函数中的普通函数，例如created钩子函数可以被拆分为beforeCreate和created两个函数

import { onBeforeCreate, onCreated } from 'vue'
export default {
  setup() {
    onBeforeCreate(() => {
      console.log('组件实例创建之前')
    })
    onCreated(() => {
      console.log('组件实例创建之后')
    })
    return {}
  }
}

Teleport

Vue3中新增了Teleport组件，用于将组件的内容插入到指定的DOM节点中，其用法与Vue2中的slot类似

<template>
  <teleport to="body">
    <div>Teleport到body中了</div>
  </teleport>
</template>

setup语法糖

⭐⭐setup函数是Vue3中的新特性，它是用来替代Vue2中的data、computed、watch等选项的，是一种新的组件选项。可以说，setup函数是Vue3中最重要的语法糖之一。setup函数是一个普通的函数，它接收两个参数：props和context。其中，props是组件的属性对象，context是组件的上下文对象，包含了一些Vue3的API。

在setup函数中，我们可以使用Vue3提供的Composition API来定义组件的响应式数据、计算属性、方法、生命周期钩子等。与Vue2中的选项不同，setup函数中的代码是纯粹的JavaScript代码，易于理解和维护。

除此之外，setup函数还有以下特点：

setup函数的返回值是一个对象，对象中的属性和方法可以在模板中直接使用。

setup函数中的响应式数据必须使用ref、reactive等API来创建，不能直接定义在setup函数中。

setup函数中的计算属性和方法可以直接定义为普通函数，无需使用computed和methods选项。

setup函数中的生命周期钩子函数也被重构了，可以使用onBeforeMount、onMounted等API来定义。

<script setup>与传统vue3有何不同

<script setup>是Vue 3中的新特性，它旨在简化单文件组件的编写。相较于传统Vue 3中的<script>标签，<script setup>具有以下不同点：不需要导入vue模块：在<script>标签中使用Vue时需要导入vue模块，而在<script setup>中不需要。

不需要定义data、computed、methods等选项：在<script>标签中需要通过data函数来定义响应式数据，在computed和methods选项下定义计算属性和方法。但是在<script setup>中可以直接使用响应式变量和计算属性，这些变量和属性都会被自动处理为响应式的。

props和context对象自动注入：在<script setup>中可以直接使用props和context对象，无需通过参数或者导入来获取。

单文件组件支持更多类型：除了.vue文件之外，还支持使用.tsx和.jsx文件作为单文件组件，并且可与<script setup>一起使用。

⭐⭐⭐将传统Vue 3代码转换为<script setup>代码时，主要做法总结一下，大概有4种：

⭐第一种：将原先放置于data选项下的响应式变量直接声明即可，例如将

 data: () => ({ 
   num: 10
  })

替换为

const num = ref(10)

⭐第二种：计算属性可以直接作为函数声明并返回值；方法也可以直接声明成函数

⭐第三种：在<template>标签中使用的响应式变量和计算属性，需要通过defineExpose暴露出来才能在父组件中使用。比如说：

const state = reactive({ 
  count: 0 
}); 
defineExpose({ state });

⭐第四种：props和context对象直接在函数参数中声明即可

生命周期函数与传统Vue 3写法相同，可以继续使用

传统vue3和setup语法糖，两者之间写法如何转换？

在这里，我直接上一段代码说明一下。

⭐传统vue3写法：

<template>
  <div>{{ count }}</div>
</template>
<script>
import { reactive } from "vue";
export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  created() {
    console.log('语法糖你好');
  }
};
</script>

⭐用setup语法糖的写法

<template>
  <div>{{ count }}</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
let count = ref(0)
function increment() {
   count.value++
}
onMounted(() => {
   console.log('语法糖你好')
})
</script setup>

这种技术，写法，观念的更新其实是很好的，一时半会难以接受很正常。但是新写法会使得我们的代码更加简洁、灵活、易于维护。也使我们能够更好地组织代码，提高开发效率。

为语法糖干杯！