Vue3学习之路:写写小Demo，体验Vue3

小提示：本文章适合已了解VUE2的同学~

本章分为两个部分来写，第一部分基础知识，第二部分写小demo
Demo: 小demo是官方的例子，是个日常管理的TODO 虽然功能简单，但是用到的vue知识范围几乎覆盖的

Vue3很早之前就有了，以前一直在学习Vue2和牢固前端基础，没有学习到Vue3，现在开始进步啦，记录学习Vue3~

文章包含Vue3官方文档的内容

Vue3基础知识

组合式API(Composition API)

我们学习组合式API之前，先回顾一下选项式API。选项式API，多个选项的对象来描述组件的逻辑，比如：在data里面写数据，在methods里面写方法，等等。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

这种写法确实入手门槛低，易学习这个框架，当时新学习的时候也是特别容易上手，在对应的选项里面写对应的东西即可，特别舒服。

js 复制代码

<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>

但这种好日子不长，小项目问题不大，很舒服哒。但是你一旦用VUE2的选项式API来开发中型项目那就不舒服啦，当时写比小项目大一点，比中型项目小一点的点餐小程序的时候，写一个复杂一点的功能的时候，我不停的滑动滚动条，把我搞的很难受，功能的代码片段东一个西一个，严重违背了高内聚，低耦合的原则

组合式API和选项式API的对比图（左边的是组合式API 右边的是选项式API）:

看图片就一目了然啦~ 现在我们介绍在Vue3重大改变之一的：组合式API

ps：在Vue3也可以使用选项式API

组合式API:组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。简单的说就是我们需要什么API那就导入对应的API函数，来描述组件的逻辑。

Vue 复制代码

    <template> 
        <button @click="increment">Count is: {{ count }}</button> 
    </template>
    
    <script>
        import { ref } from 'vue' // 导入ref响应式API  
        setup(){
        
            const countRef = ref(0) // 用来修改状态、触发更新的函数 
            function increment() { count.value++ } 
            
            return {
                count:countRef,
                increment
            
            }
        
        
         
        
        }
        
    </script>

看代码就一目了然，我们在setup函数里面描述组件的逻辑，当我们需要把普通变量变成响应式变量则会导入ref函数API(把数据变成响应式的API 后面会介绍)，然后用ref函数，它会返回给我们一个响应式的数据，因此我们的countRef变成响应式了。

然后在这里要注意的是，我们在setup函数里面的函数或者变量在模板使用则需要返回这些函数和变量，才能在模板上直接使用，否则是不能使用的。

Vue官方为了方便使用组合式API，提供了

Vue3启动！| Vue3学习之路:写写小Demo，体验Vue3（1）

Vue3学习之路:写写小Demo，体验Vue3

Vue3基础知识

组合式API(Composition API)