今天是第四天，那我想聊一聊Vue2.x與Vue3的差異

我個人想分享的部分是關於在建立Vue instance這兩個版本的不同

Vue2是先new一個instance然後存在一個變數裡面像是app，之後會傳一個參數進去，
參數包含了要綁定哪個html，會使用到哪些Data、哪些methods

//Vue2
<script>
    let app2 = new Vue({
    el:'#app',
    data:{
        todos:[
            'asdfasdfas',
            'asdfasdfasdf',
            'asdfsadfsadf',
              ],
         },
    methods:{
    deteleTodos:(index)=>{
        app.todos.splice(index,1)
              }
         }
    })
</script>

Vue3是先寫成一個function再將物件return回來，而在一開始的寫法是用Vue這個物件去執行
createApp這個method然後再將下方的data與method傳進去，把data,method都準備好後，才會執行mount這個動作，把整個Vue綁到html的區塊。

//Vue3
<script>
    const app = Vue.createApp({
    data(){
        return{
            Text:[
                'aasdfasdf',
                'basdfasdfas',
                'casdfsdfsadf'
                 ],
               };
           },
    methods:{
    deleteItem:function(index){
        this.texts.splice(index,1);
             },
         },
    });
    const vm = app.mount('#app')
</script>

以及Vue2 Option API會造成尋找該程式碼相對應的的邏輯之困難，而Vue3 Composition API則是將全部程式碼都寫入了Setup()，便可以減去許多不必要後續維護程式碼的成本

可以參考這篇文章

比較差異性就分享到這邊，我們第五天見