Svelte 推坑文
2021-03-17
我想如果有在五年內寫過前端的，或多或少都會有留意過或者有用React.js 或者 Vue 和 Angular。
但我還是希望可以推這個東西。
對比框架是個很玄學的事情。但我還是希望這篇文是sound 的。
背景：後端工程師，但同時在工作上應用過React 和Vue，但不Trivial 的個人項目中應用過Svelte。為Google Blocky 寫過Svelte 的Binding Example。
（可能就是所謂的越是本職越不敢/不想寫吧，就寫寫前端好了）
比如 ： Svelte 的第一句
All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.
（所有代碼都是錯誤的。 因此，有理由說，你越寫越buggy。）
我就認為是過份的簡化和沒有指導意義的。
但Svelte舉的例子卻是挺實用的：
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) {
setA(+event.target.value);
}
function handleChangeB(event) {
setB(+event.target.value);
}
return (
<div>
<input type="number" value={a} onChange={handleChangeA}/>
<input type="number" value={b} onChange={handleChangeB}/>
<p>{a} + {b} = {a + b}</p>
</div>
);
};<template>
<div>
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<p>{{a}} + {{b}} = {{a + b}}</p>
</div>
</template>
<script>
export default {
data: function() {
return {
a: 1,
b: 2
};
}
};
</script>看起來Vue 比起 React 短了不少，但主要問題還是在於State Binding 是wire 至一個object 的指者key 中的 ( <function T>.<var> 和 <object T>.data )