Day 47/100 Options API 和Composition API区别

（一）需求

面试时，被问到。Options API 和Composition API区别，没答上来。这里小结记录下。

（二）介绍

这俩可以归属到Vue2和Vue3的在写法层面的区别。

1、Options API

• 选项API
• 是Vue2用法

2、Composition API

• 组合API
• 是Vue3用法

Demo 如下

<template>
  <div id="app">
    <input type="text" v-model="val" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
    </ul>
  </div>
</template>

<script>
import {reactive, ref, toRefs} from 'vue'

export default {
  setup(){
    let val = ref('')
    let todos = reactive([ 
        {id:0, title:'吃饭', done:false},
        {id:1, title:'睡觉', done:false},
        {id:2, title:'lsp', done:false},
    ])
    function addTodo(){
      todos.push({
        id:todos.length,
        title:val.value,
        done:false
      })
      val.value = ''
    }
    return {val, todos, addTodo}
  }
}
</script>

参考链接

https://mp.weixin.qq.com/s/UZ...

写在最后的话

学习路上，常常会懈怠。

《有想学技术需要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy...

如果有需要的伙伴，可以加我微信：learningisconnecting
或者可以关注我的公众号：国星聊成长（我会分享成长的方法）