-
測試筆記
-
測試
剛剛剛剛
剛剛查看全部 -
-
- 剛剛測試一條筆記
- 測試一下筆記
- 剛剛剛剛測試筆記
查看全部 -
受益匪淺，很好的一個(gè)視頻查看全部
-
寫筆記看看有沒有
查看全部 -
添加ts的支持，先安裝ts
vue?add?@vue/typescript
查看全部 -
使用vue3提供的defineComponent進(jìn)行類型推斷
import?{defineComponent}?from?'@vue/composition-api' export?default?defineComponent({ ????components:{ ???? ????}, ????setup(){ ???? ????} })查看全部 -
使用
import ComPositionApi from '@vue/composition-ap'
Vue.use(ComPositionApi)
查看全部 -
安裝組合式api
npm i -S @vue/composition-api
查看全部 -
1. 添加事件
const?count?=?ref(0) const?add?=?()=>{count.value++} return?{count,add}2. 副作用watchEffects
//初始化的時(shí)候就開始觸發(fā) watchEffect(()=>{ ????console.log(count.value) })3. 停止
const?stop?=?watchEffect(()=>{ ????console.log(count.value) }) ... stop()//在需要停止的地方調(diào)用 ...4. 清除副作用
const?stop?=?watchEffect(async(cancel)=>{ ????await?new?Promise(function(resolve,reject){ ????????console.log(count.value) ????????resolve() ????}) ????cancel(()=>{ ????????conaole.log('cancel')//在異步前執(zhí)行 ????}) })5. watch
watch(count,(count,preCount)=>{ ????console,log(count,preCount) })查看全部 -
computed
//方式一 const?count?=?ref(0) const?double?=?computed(()=>count.value?*?2) ... count.value++ ... return?{count,double} 方式二 const?state?=?retactive({ ????count?:?1, ????double?:?computed(()=>state.count?*2) }) ... state.count++ ... return?toRefs(state)查看全部 -
1. ref 和 reactive
const?count?=?ref(0) const?state?=?reactive({count}) ... state.count++ ... return?{count}2. toRefs
const?state?=?reactive({count:0}) const?{count}?=?toRefs(state) ... state.count++ ...? return?{count}3. toRef
const?state?=?reactive({count:0}) const?count?=?toRef(state,'count') ... state.count++ ...? return?{count}查看全部 -
1. ref
const?count?=?ref(0) ... count.value++ ... return?{count}2. 使用
<div>{{count}}</div>查看全部 -
1. reactive
const?state?=?reactive({ ????count?:?0 }); ... count++ ... return?{state}//返回對象2. 使用
<div>{{state.count}}</div>查看全部 -
1. 安裝依賴
$?cnpm?i?-D?@vue/composition-api
2. 使用
import?Vue?from?vue import?CompositionApi?from?'@vue/composition-api' Vue.use(CompositionApi)
查看全部 -
vue3.0優(yōu)勢
性能優(yōu)化：虛擬DOM、編譯模板、Proxy的新數(shù)據(jù)監(jiān)聽、更小的打包文件；
composition-api：新的組合式API，適合大型項(xiàng)目；
對TS支持更好；
查看全部 -
https://github.com/aisiqilove/vue3.0composition-api.git
整理出來的github
提供html和css
有vue2和vue3以及加上ts后的app.vue
查看全部 -
flush屬性可以改變副作用執(zhí)行順序
副作用初始化在dom渲染之前執(zhí)行，通過onMounted 中執(zhí)行訪問DOM/ref查看全部 -
flush屬性可以改變副作用執(zhí)行順序
查看全部 -
清除副作用 異步處理
查看全部 -
stop() 副作用watchEffect 根據(jù)條件停止
查看全部 -
use函數(shù)，可以理解為功能邏輯函數(shù)，向外返回?cái)?shù)據(jù)、方法 在setup中使用，即也可以給其他use函數(shù)使用
查看全部 -
生命周期必須在setup()函數(shù)中使用/調(diào)用
查看全部 -
const?state?=?reactive({ ????count:?1 }); const?{?count?}?=?toRefs(state); //?toRefs把普通對象轉(zhuǎn)化成ref()所對應(yīng)的響應(yīng)式數(shù)據(jù) const?{?count?}?=?toRef(state,?'count); //?指定數(shù)據(jù)轉(zhuǎn)化 return?{?count?};查看全部 -
reactive結(jié)合ref使用，定義響應(yīng)式數(shù)據(jù)
const?count?=?ref(0); const?state?=?reactive({ ????count }) return?{ ????count }查看全部 -
css部分
查看全部 -
HTML部分
查看全部 -
vue cli 安裝
查看全部
舉報(bào)
