关于javascript:Day-47100-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
或者能够关注我的公众号：国星聊成长（我会分享成长的办法）