组合式API

一、基本介绍

在Vue2中，使用的是Options API （选项式API）。而Vue3中虽然也兼容Options API ，但是更推荐Composition API （组合）。那什么是Options API，什么是Composition API 呢？先来看以下例子

选项式API

<script>
  export default {
    // data() 返回的属性将会成为响应式的状态
    // 并且暴露在 `this` 上
    data() {
      return {
        count: 0
      }
    },

    // methods 是一些用来更改状态与触发更新的函数
    // 它们可以在模板中作为事件处理器绑定
    methods: {
      increment() {
        this.count++
      }
    },

    // 生命周期钩子会在组件生命周期的各个不同阶段被调用
    // 例如这个函数就会在组件挂载完成后被调用
    mounted() {
      console.log(`The initial count is ${this.count}.`)
    }
  }
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

以上便是Options API.

利用选项式API实现一个计数功能:

<template>
    <h1>选项式API</h1>
    <div>
       <button @click="Onupdata" @contextmenu="Ondown">计数:{{ count }}</button>   
       <!-- //点击按钮，触发onupdata方法，并将count值加1，显示在按钮上；右键点击按钮，触发Ondown方法，并将count值减1，显示在按钮上 -->
    </div>
</template>

<script >

//响应式API的变量放在data中，方法放在methods中

export default {
    name: 'Options_wokr', //组件名称
    data() {  //组件的状态数据
        return {  //返回一个对象，包含组件的状态数据，响应式的，这里改变，页面上也会改变
            count:0
        }
    },
    methods:{  //data中的变量可以通过this.$data.变量名访问，定义的方法可以通过this.方法名调用
        Onupdata(){
            this.count++;
        },
        Ondown(){
            this.count--;
        }
    }


}
</script>

<style scoped>

</style>

然后在APP.vue里进行渲染：

<script setup>


import Options_wokr from './components/Options_wokr.vue';
import Compositions_API from './components/Compositions.vue';
</script>

<template>
  <div >
    <Options_wokr></Options_wokr>
  </div>
  
 
  
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

 效果：

组合式API

组合式API要借助setup 语法：

<script>
  import { ref, onMounted } from 'vue'

  export default {
    name: 'App',
    setup() {
      // 响应式状态
      // 响应式状态
      const count = ref(0)

      // 用来修改状态、触发更新的函数
      function increment() {
        count.value++
      }

      // 生命周期钩子
      onMounted(() => {
        console.log(`The initial count is ${count.value}.`)
      })

      return {
        count,
        increment
      }
    }
  }
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

用组合式API实现一个计数： 

<template>
    <h1>组合式API</h1>
    <div>
        <button @click="updata">计数:{{ count }}</button>
    </div>
</template>

<script>
import { ref } from 'vue'

export default {
    name:'Compositions_API',
    setup() {
        let count = ref(0);
        function updata() {
            count.value++;
        }

        return {
            count,
            updata
        }
    }
}
</script>

<style lang="scss" scoped>

</style>

同理在APP.vue里进行渲染

<script setup>


import Options_wokr from './components/Options_wokr.vue';
import Compositions_API from './components/Compositions.vue';
</script>


  
  <div >
    <Compositions_API></Compositions_API>
  </div>
  
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

二、setup介绍

setup 是Vue3 的配置项，它是一个函数，之前使用Options API 方式定义的数据、方法、计算属性、监听等数据，都是配置在setup 中。上面就是用到了setup

在setup 中返回的对象，不管是数据还是方法，都可以直接在模板中使用。而为了实现方便，可以使用setup语法糖，即<script setup> ，这样就无须显示写setup 函数，写在script 中的所有数据和方法都可以直接在模板中使用。

<script setup>
  import { ref, onMounted } from 'vue'

  // 响应式状态
  // 响应式状态
  const count = ref(0)

  // 用来修改状态、触发更新的函数
  function increment() {
    count.value++
  }

  // 生命周期钩子
  onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
  })
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

三、setup上指定组件名称

上述代码无法指定组件名称，如果想要指定组件名称，还需要额外添加一个script 标签：

<script>
  export default {
    name: 'App',
  }
</script>

为了解决这个问题，可以使用vite-plugin-vue-setup-extend 插件来简化。步骤如下：

• 安装：npm install vite-plugin-vue-setup-extend --save-dev
• 配置：在vite.config.js中配置如下

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ],
})

• 在script标签上指定name属性：<script setup name="App">

Composition API 中新增了许多新的语法，我们后面再慢慢介绍。

关于Options API 和Composition API 谁更好的问题，这个仁者见仁智者见智，但是有一点需要注意，这个市场（招聘市场和开发市场）都在往Composition API 上转（可见ElementPlus的文档），我们作为开发者，也必须要学会Composition API 的使用。

如果在进行npm安装的时候出现

那么是网络的问问题

于直接连接 npm 官方仓库有时可能会遇到网络问题，你可以尝试使用国内的 npm 镜像，如淘宝 npm 镜像。设置方法如下：

npm config set registry https://registry.npmmirror.com

用完后恢复官方源（当网络问题波动很大的时候，可以不恢复）

npm config set registry https://registry.npmjs.org/