vue3 为什么要使用composition函数式编程

vue3除去一堆零敲碎打的优化更新之后最让我觉得眼前一亮的就是composition组合式组件以及其对应的函数式写法了。

首先，我们先看下composition组件的用法。其实如果从光从写法上来看和option配置型写法区别不大只不过是换成了函数式，切需要在新的hook setup() 中注册返回一下

具体写法

export default {
   
  setup() {
   
    // 相当于data,需要用ref生成reactive对象，对其value值赋值触发依赖收集访问
    const count = ref(0)
    // 相当于computed计算属性
    const plusOne = computed(() => count.value + 1)
    // 相当于method
    const increment = () => {
    count.value++ }
    // 相当于watch监听
    watch(() => count.value * 2, val => {
   
      console.log(`count * 2 is ${
     val}`)
    })
    // 相当于mounted生命周期
    onMounted(() => {
   
      console.log(`mounted`)
    })
    // 将需要注册到页面中的选项返回
    return {
   
      count,
      plusOne,
      increment
    }
  }
}

写一个composition组件对于熟练的框架工来说并不难，但还是得稍微深入的了解一下新功能才能用得安心。

首先了解一个新的功能首先要看它为什么出现以及它的出现对现在的开发生态有哪些改变。

在vue2中我们进行开发叫做配置式开发 ,同一个功能逻辑可能需要 在data选项里写写，在methods里动动，生命周期再写两句，开发的时候可能不会觉得有什么。但是维护起来却有大问题。特别你要是对业务不熟悉接手别人的代码。

我一直都想着怎样能够面向功能块开发，将一个独立完整的业务功能封装成独立的代码块，这样既方便维护。同时封装相同的逻辑进行封装引用 ，也极大的降低了工作量，减少复制黏贴，以及复制黏贴过程中产生的错误。

不光是我，尤雨溪也和我有着同样的困惑，

The separation of options obscures the under