語雀入口
https://www.yuque.com/along-n3gko/ezt5z9
介紹
Composition API的主要思想是，我們將它們定義為從新的 setup 函式回傳的JavaScript變數，而不是將組件的功能（例如state、method、computed等）定義為物件屬性，
案例對比
- 下面是一個經典的vue2的計數器案例.
//Counter.vue export default { data: () => ({ count: 0 }), methods: { increment() { this.count++; } }, computed: { double () { return this.count * 2; } } }
- 下面是使用Composition API定義的完全相同的組件
// Counter.vue import { ref, computed } from "vue"; export default { setup() { const count = ref(0); const double = computed(() => count * 2) function increment() { count.value++; } return { count, double, increment } } }
ref:匯入了ref函式,表示該函式允許我們定義一個回應式變數,其作用與data變數幾乎相同，
count.value：increment方法是一個普通的javascript函式，需要更改子屬性count的value才能更改回應式變數，這是因為使用red創建的回應式變數必須是物件，以便在傳遞的時候保持一致，
代碼提取
Composition API的第一個明顯優點是提取邏輯很容易，使用Composition提取上面Counter.vue組件代碼，
//useCounter.js import { ref, computed } from "vue"; export default function () { const count = ref(0); const double = computed(() => count * 2) function increment() { count.value++; } return { count, double, increment } }
代碼重用
要在組件中使用該函式，我們只需將模塊匯入組件檔案并呼叫它（注意匯入是一個函式），這將回傳我們定義的變數，隨后我們可以從 setup 函式中回傳它們，
// MyComponent.js import useCounter from "./useCounter.js"; export default { setup() { const { count, double, increment } = useCounter(); return { count, double, increment } } }
解決mixins命名沖突
在vue2中，可能會有相同命名的變數或者函式，會導致沖突，使用composition代替后，就可以解決了，
export default { setup () { const { someVar1, someMethod1 } = useCompFunction1(); const { someVar2, someMethod2 } = useCompFunction2(); return { someVar1, someMethod1, someVar2, someMethod2 } } }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/96617.html
標籤：JavaScript
上一篇：JavaScript DOM操作