Vue3-06-props&emit 元件的溝通傳遞元件的溝通傳遞 Vue.js 每個元件的實體狀態、模板等作用範圍都應該要是獨立的， 也就是我們不能（也不應該）在子元件的模組「直接」去修改父元件，甚至是另一個元件的資料，因為元件化就是為了能夠重複使用，希望這些元件可以根據『外部＆內部』資料的改變，來呈現出不同的結果， 如果需要透過父層來傳遞資料給子層的話，就是 props 如果需要透過子層來傳遞資料給父層的話，就是 emit  透過 useState 綁定上 userData */ const [userData, setUserData] = useState({ account: "", password: "", }); 那...Aug 5, 2022·1 min read·30
React Hook - useStateReact Hook - useState 進入 React Hook，並嘗試用 useState 這個 Hook 來做出改變狀態值的練習。 React Hook Hook 其實就是 JavaScript function，但要特別注意兩個使用的規則： 只在最上層呼叫 Hook，不要在迴圈、條件式或是巢狀的 function 內呼叫 Hook（詳細解說） 只在 React Function 中呼叫 Hook，例如：在 React function component 中呼叫 Hook。 今日...Aug 4, 2022·1 min read·6
Computed 跟 Methods 的差異Computed 跟 Methods 的差異 computed() 會依據計算的資料進行緩存，只要你的資料沒有重新被更改，你的 computed 不會被重新計算執行。 methods() 不會進行緩存，每次都會重新執行，但是可以傳速參數進行處理。 差異比較 執行效能： computed < methods computed 在效能的負載量會小於 methods ，因為他會將資料進行緩存，也就是如果監聽的資料被改動時，則可以快速的將緩存呼叫出來，進行更動，不需要每一次都重新去執行完整的函示。 記...Aug 4, 2022·1 min read·30
readonlyreadonly 為了確保 reactive or ref 所宣告的變數數值可以成功傳遞，但無法被更動時，就可以使用 readonly，readonly經常在跨組件使用共同的 Func 時，經常被使用到，因為能夠大大降低產生 bug 的機會。 當被 readonly 所包覆的數值有人想要改動時，將會在 devtool 顯示 warn 的警告。 const { reactive, readonly } = Vue; const App = { setup() { const Num ...Aug 3, 2022·1 min read·22
JSX 屬性練習JSX 屬性練習 根據昨天提到的，在撰寫 React 會大量使用到 JSX 的部分，除了基本的樣板以外，今天也持續介紹常見的 JSX 使用，一起來練習看看吧！ JSX 最外層只能有一個根元件 一個元件不能返回多個元素，就像一個函數不能返回多個值一樣，有點像是 Vue template 的寫法一樣，外層必須得有個 div 或是 template 標籤來做包覆。 錯誤示範： const element = <h2> Hello！</h2><h2> 你好！</h2> 正確示範： const elem...Aug 2, 2022·1 min read·24
認識 React JSXReact 提供了稱作 JSX 的語法，作為 JavaScript extension syntax，JSX 是一種跟 HTML/XML 很相似的語法，用來寫所謂的 React elements (React 元素)。 const jsxItem = <h1>Hello, world!</h1>; 這個語法叫做 JSX，是一個 JavaScript 的語法擴充。 JSX 可能為讓你想到一些樣板語言，但不一樣的地方是 JSX 允許你使用 JavaScript 所有的功能。 <h1>Hello, ...Aug 2, 2022·1 min read·33
