【二.Vue3 Composition API：革新前端开发体验】

2. Vue3 API相关

2.1 OptionsAPI 与CompositionAPI

• Vue2的API设计是Options（配置）风格的

• Vue3的API设计是Composition（组合）风格的

2.1.1 Options API 的弊端

在使用 Options 类型的 API 时，数据、方法和计算属性分别放在 data、methods、computed 里。要是有新需求或者要改功能，就得在这几个地方分别修改，维护起来很麻烦，代码也不好复用

2.1.2 Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起

2.2 setup概述

• setup是一个函数

• 模板需要的数据和方法写在setup函数内部

• 需要在函数的最后return(){}返回模板中需要的数据和方法的名字

• 不可以在里面写this，它是undefin，vue3弱化this

• 此时页面不是响应式的

• setup的执行比beforeCreate()还早

2.2.1 setup的返回值

• 若返回一个对象：对象中的属性、方法等，在模板中均可以直接使用

• 若返回一个函数：则可以自定义渲染内容例如：

		......
      setup(){
        ......
        return ()=> '你好啊！'
      }
      ......

2.2.2 setup与OptionsAPI

• data(){}，methors(){}可以和setup(){}一起写(同级)，但是尽量不要

• 旧写法（vue2）可以读到新写法（vue3）的东西，但新写法（vue3）可以读到旧写法（vue2）的东西

2.2.3 setup的语法糖

setup语法糖：可以把setup独立出去

没使用语法糖：

 <script>
        setup() {
            let a = 1
            return {a}
        }
    </script>

使用语法糖后：

 ......
    <script
        setup() {
            let a = 1
            return {a}
        }
    </script>
    ......