Malina.js是受到svelte.js啟發而建立的一個前端框架（or 編譯器）。
Vue.js是一個非常流行的框架，很快就會有一個新版本-Vue 3。其中帶來了全新的寫元件的方法，雖然有人說是偷師react。。。
建立了2個相同的、非常簡單的待辦事項應用程式，使用了Vue 3和composition API，這是Vue 3的主要功能之一。
實現的效果如圖：
上圖是Malina.js和vue.js實現相同功能元件的程式碼截圖。
相比來看，Malina.js的程式碼比vue.js更加簡潔。Vue.js中不僅需要return各種方法和屬性，操作todos和name的時候還需要通過其value屬性。而Malina.js看起來更像是普通的js程式碼，更容易理解。對於“計算屬性”，Malina.js的處理也更加簡潔。
其實Vue 3容易讓人聯想到Knockout.js，比如下面的程式碼：
Vue 3 + composition API var a = ref(0); var list = ref([1, 2]); var myObj = ref({ name: 'Preetish' }); var completed = computed(function() {...}); a.value // get value Knockout.js 2011 var a = ko.observable(0); var list = ko.observableArray([1, 2]); var myObj = ko.observable({ name: 'Preetish' }); var completed = ko.computed(function() {...}); a() // get value附上Malina.js版本的主要部分程式碼：
App.html元件：<script> import Item from './Item.html' let todos = []; let name = ''; const add = () => { if (!name) return; todos.push({ name }); name = ''; }; const remove = (i) => { todos.splice(i, 1); } $: completed = todos.filter(i => i.done).length;</script><input type="text" :value={name} @keyup|enter={add} /> <br />{#each todos as item, index } {index}: <Item :item @remove={remove(index)} /> <br/> {/each} {#if todos.length } Completed {completed} of {todos.length} {:else} No tasks yet {/if} Item.html元件： <script> export let item; const remove = () => $emit('remove'); </script> <input type="checkbox" :checked={item.done} /> <span class:inactive={item.done}>{item.name}</span> <button @click:remove>Remove</button> <style> .inactive {text-decoration: line-through; color: gray;} </style>附上Vue版本的全部程式碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script></head><body><main id="app"> <app-app></app-app></main><script> const { ref, computed ,createApp } = Vue; var Item = { props: ['item'], setup(props, {emit}) { const remove = () => emit('remove'); return { remove }; }, template:` <input type="checkbox" v-model="item.done" /> <span :class="{ inactive: item.done }">{{ item.name }}</span> <button @click="remove">Remove</button> ` } var AppApp = { components: { Item, }, setup() { let todos = ref([]) let name = ref('') let completed = computed(() => todos.value.filter(i => i.done).length ) const add = () => { if(!name.value) return; todos.value.push({name: name.value}); name.value = ''; }; const remove = (i) => { todos.value.splice(i, 1); }; return { todos, name, add, remove, completed } }, template:` <input type="text" v-model="name" @keyup.enter="add" /> <br/> <template v-for="(item, index) in todos"> {{index}}: <Item :item="item" @remove="remove(index)"></Item> <br/> </template> <template v-if="todos.length"> Completed {{completed}} of {{todos.length}} </template> <template v-else> No tasks yet </template> ` }; createApp(AppApp).mount('#app')</script></body></html>
最新評論