vue3较vue2的特别之处 - 组合式API

vue2组件存在什么问题？

先看个例子：

<!--
 * @Author: zzh
 * @Date: 2022-02-22 12:59:53
 * @LastEditors: zzh
 * @LastEditTime: 2022-02-22 13:12:13
 * @Description: option api vs. composition api
 * @FilePath: \vue2-demos\src\demos\demo1.vue
-->
<template>
    <div class="container">
        <div> name: {{ name }}</div>
        <div> age: {{ age }}</div>
        <div> hobby: {{ hobby }}</div>
    </div>
</template>

<script>
// import xxxxx

export default {
  name: 'organizationalStructure',
  data() {
    return {
        name: 'zzh',
        age: 18,
        hobby: ['read', 'code', 'sport'],
    }
  },

  methods:{
      changeName() {},
      changeAge() {},
      changeHobby() {},
  },

  created() {
      this.name = '';
      this.age = '';
      this.hobby = '';
  },

  // .....其他生命周期钩子函数
}
</script>

当组件越来越大时，就会暴露一个问题，针对同一部分的代码会越来越多，而且在书写时也未必会严格按照一定的顺序，导致代码越来越混乱，难以维护。

composition api带来了哪些改变

依旧先看个例子：

<template>
  <div>name: {{ name }}</div>
  <div>{{ age }}</div>
  <div>{{ hobby }}</div>
  <div>{{ twiceTheAge }}</div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref, watch } from 'vue';

export default defineComponent({
    setup() {
        const name = ref('zzh');
        const changeName = () => {}
        // 生命周期
        onBeforeMount(changeName),// 在 `mounted` 时调用 `changeName`
        watch(name, (newValue, oldValue) => {
            console.log('The new name value is: ' + name.value)
        })

        const age = ref(18);
        const changeAge = () => {}
        // 计算属性
        const twiceTheAge = computed(() => age.value * 2)

        const hobby = ref(['read', 'code', 'sport']);
        const changeHobby = () => {}

        return {
          name,
          age,
          hobby,
          twiceTheAge,
        }
    },

    data() {},

    methods: {},
})
</script>

<style scoped></style>

函数式编程貌似是一个趋势，有点像react里面的react hook。这里可以将对某一个部分的作用代码规整到一起，当然如果当setup过大时，由于setup里面不能使用this，也可以将里面的功能代码封装起来，也可以更好的复用。因为从return就可以看出，其实setup这里只是希望得到return的结果。

参考地址：
script-setup:https://chengpeiquan.com/article/vue3-script-setup.html