<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • <>Vue3 新特性

    vue3新增了很多新的特性,目前可以使用 安裝 vue-compisition-api
    包進行嘗鮮,vue3將會對vue2進行向下兼容,因此不必擔心因為使用vue3 后 vue2的特性不能夠使用

    <>安裝包、使用包
    npm install @vue/composition-api --save import VueCompositionApi from
    '@vue/composition-api' Vue.use(VueCompositionApi)
    <>1.setup

    * setup() 函數是 vue3 中,專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統一的入口。
    <>1.1 執行時機

    * setup 函數會在 beforeCreate 之后、created 之前執行!!!
    <>1.2 接收 props 數據

    * 在 props 中定義當前組件允許外界傳遞過來的參數名稱: props: { p1: String }
    * 通過 setup 函數的第一個形參,接收 props 數據: setup(props) { console.log(props.p1) }
    <>1.3 context

    setup 函數的第二個形參是一個上下文對象,這個上下文對象中包含了一些有用的屬性,這些屬性在 vue 2.x 中需要通過 this 才能訪問到,在 vue
    3.x 中,它們的訪問方式如下:
    const MyComponent = { setup(props, context) { context.attrs context.slots
    context.parent context.root context.emit context.refs } }
    注意:在 setup() 函數中無法訪問到 this !!!!!!!!!!!!!

    <>2.reactive

    reactive() 函數接收一個普通對象,返回一個響應式的數據對象。

    <>2.1基本語法

    等價于 vue 2.x 中的 Vue.observable() 函數,vue 3.x 中提供了 reactive()
    函數,用來創建響應式的數據對象,基本代碼示例如下:
    import { reactive } from '@vue/composition-api' // 創建響應式數據對象,得到的 state 類似于 vue
    2.x 中 data() 返回的響應式對象 const state = reactive({ count: 0 })
    <>2.2 定義響應式數據供 template 使用

    * 按需導入 reactive 函數: import { reactive } from '@vue/composition-api'
    * 在 setup() 函數中調用 reactive() 函數,創建響應式數據對象: setup() { // 創建響應式數據對象 const state
    = reactive({count: 0}) // setup 函數中將響應式數據對象 return 出去,供 template 使用 return state
    }
    * 在 template 中訪問響應式數據: <p>當前的 count 值為:{{count}}</p>
    <>3. ref

    <>3.1基本語法

    ref() 函數用來根據給定的值創建一個響應式的數據對象,ref() 函數調用的返回值是一個對象,這個對象上只包含一個 .value 屬性:
    import { ref } from '@vue/composition-api' // 創建響應式數據對象 count,初始值為 0 const
    count= ref(0) // 如果要訪問 ref() 創建出來的響應式數據對象的值,必須通過 .value 屬性才可以 console.log(count.
    value) // 輸出 0 // 讓 count 的值 +1 count.value++ // 再次打印 count 的值 console.log(count
    .value) // 輸出 1
    <>3.2 在 template 中訪問 ref 創建的響應式數據

    *
    在 setup() 中創建響應式數據:

    * import { ref } from '@vue/composition-api' setup() { const count = ref(0)
    return { count, name: ref('zs') } }
    *
    在 template 中訪問響應式數據:

    * <template> <p>{{count}} --- {{name}}</p> </template>
    <>3.3 在 reactive 對象中訪問 ref 創建的響應式數據

    當把 ref() 創建出來的響應式數據對象,掛載到 reactive() 上時,會自動把響應式數據對象展開為原始的值,不需通過 .value
    就可以直接被訪問,例如:
    const count = ref(0) const state = reactive({ count }) console.log(state.count)
    // 輸出 0 state.count++ // 此處不需要通過 .value 就能直接訪問原始值 console.log(count) // 輸出 1
    注意:新的 ref 會覆蓋舊的 ref,示例代碼如下:
    // 創建 ref 并掛載到 reactive 中 const c1 = ref(0) const state = reactive({ c1 }) //
    再次創建 ref,命名為 c2 const c2 = ref(9) // 將 舊 ref c1 替換為 新 ref c2 state.c1 = c2 state
    .c1++ console.log(state.c1) // 輸出 10 console.log(c2.value) // 輸出 10 console.log(
    c1.value) // 輸出 0
    <>4. isRef

    isRef() 用來判斷某個值是否為 ref() 創建出來的對象;應用場景:當需要展開某個可能為 ref() 創建出來的值的時候,例如:
    import { isRef } from '@vue/composition-api' const unwrapped = isRef(foo) ? foo
    .value : foo
    <>5.toRefs

    toRefs() 函數可以將 reactive() 創建出來的響應式對象,轉換為普通的對象,只不過,這個對象上的每個屬性節點,都是 ref()
    類型的響應式數據,最常見的應用場景如下:
    import { toRefs } from '@vue/composition-api' setup() { // 定義響應式數據對象 const
    state= reactive({ count: 0 }) // 定義頁面上可用的事件處理函數 const increment = () => { state.
    count++ } // 在 setup 中返回一個對象供頁面使用 // 這個對象中可以包含響應式的數據,也可以包含事件處理函數 return { // 將
    state 上的每個屬性,都轉化為 ref 形式的響應式數據 ...toRefs(state), // 自增的事件處理函數 increment } }
    頁面上可以直接訪問 setup() 中 return 出來的響應式數據:
    <template> <div> <p>當前的count值為:{{count}}</p> <button @click="increment">+1</
    button> </div> </template>
    <>6.computed

    computed() 用來創建計算屬性,computed() 函數的返回值是一個 ref 的實例。使用 computed 之前需要按需導入:
    import { computed } from '@vue/composition-api'
    <>6.1 創建只讀計算屬性

    在調用 computed() 函數期間,傳入一個 function 函數,可以得到一個只讀的計算屬性,示例代碼如下:
    // 創建一個 ref 響應式數據 const count = ref(1) // 根據 count 的值,創建一個響應式的計算屬性 plusOne //
    它會根據依賴的 ref 自動計算并返回一個新的 ref const plusOne = computed(() => count.value + 1)
    console.log(plusOne.value) // 輸出 2 plusOne.value++ // error
    <>6.2.創建可讀可寫的計算屬性

    在調用 computed() 函數期間,傳入一個包含 get 和 set 函數的對象,可以得到一個可讀可寫的計算屬性,示例代碼如下:
    // 創建一個 ref 響應式數據 const count = ref(1) // 創建一個 computed 計算屬性 const plusOne =
    computed({ // 取值函數 get: () => count.value + 1, // 賦值函數 set: val => { count.value
    = val - 1 } }) // 為計算屬性賦值的操作,會觸發 set 函數 plusOne.value = 9 // 觸發 set 函數后,count
    的值會被更新 console.log(count.value) // 輸出 8
    <>7.watch

    watch() 函數用來監視某些數據項的變化,從而觸發某些特定的操作,使用之前需要按需導入:
    import { watch } from '@vue/composition-api'
    <>7.1基本用法
    const count = ref(0) // 定義 watch,只要 count 值變化,就會觸發 watch 回調 // watch
    會在創建時會自動調用一次 watch(() => console.log(count.value)) // 輸出 0 setTimeout(() => {
    count.value++ // 輸出 1 }, 1000)
    <>7.2 監視指定的數據源

    監視 reactive 類型的數據源:
    // 定義數據源 const state = reactive({ count: 0 }) // 監視 state.count 這個數據節點的變化 watch
    ( () => state.count, (count, prevCount) => { /* ... */ } )
    監視 ref 類型的數據源:
    // 定義數據源 const count = ref(0) // 指定要監視的數據源 watch(count, (count, prevCount) => {
    /* ... */ })
    <>7.3 監視多個數據源

    監視 reactive 類型的數據源:
    const state = reactive({ count: 0, name: 'zs' }) watch( [() => state.count, ()
    => state.name], // Object.values(toRefs(state)), ([count, name], [prevCount,
    prevName]) => { console.log(count) // 新的 count 值 console.log(name) // 新的 name 值
    console.log('------------') console.log(prevCount) // 舊的 count 值 console.log(
    prevName) // 新的 name 值 }, { lazy: true // 在 watch 被創建的時候,不執行回調函數中的代碼 } )
    setTimeout(() => { state.count++ state.name = 'ls' }, 1000)
    監視 ref 類型的數據源:
    const count = ref(0) const name = ref('zs') watch( [count, name], // 需要被監視的多個
    ref 數據源 ([count, name], [prevCount, prevName]) => { console.log(count) console.
    log(name) console.log('-------------') console.log(prevCount) console.log(
    prevName) }, { lazy: true } ) setTimeout(() => { count.value++ name.value =
    'xiaomaolv' }, 1000)
    <>7.4 清除監視

    在 setup() 函數內創建的 watch 監視,會在當前組件被銷毀的時候自動停止。如果想要明確地停止某個監視,可以調用 watch()
    函數的返回值即可,語法如下:
    // 創建監視,并得到 停止函數 const stop = watch(() => { /* ... */ }) // 調用停止函數,清除對應的監視 stop
    ()
    <>7.5 在watch中清除無效的異步任務

    有時候,當被 watch 監視的值發生變化時,或 watch 本身被 stop 之后,我們期望能夠清除那些無效的異步任務,此時,watch
    回調函數中提供了一個cleanup registrator function 來執行清除的工作。這個清除函數會在如下情況下被調用:

    * watch 被重復執行了
    * watch 被強制 stop 了
    Template 中的代碼示例如下:
    /* template 中的代碼 */ <input type="text" v-model="keywords" />
    Script 中的代碼示例如下:
    // 定義響應式數據 keywords const keywords = ref('') // 異步任務:打印用戶輸入的關鍵詞 const
    asyncPrint = val => { // 延時 1 秒后打印 return setTimeout(() => { console.log(val)
    }, 1000) } // 定義 watch 監聽 watch( keywords, (keywords, prevKeywords, onCleanup)
    => { // 執行異步任務,并得到關閉異步任務的 timerId const timerId = asyncPrint(keywords) // 如果
    watch 監聽被重復執行了,則會先清除上次未完成的異步任務 onCleanup(() => clearTimeout(timerId)) }, //
    watch 剛被創建的時候不執行 { lazy: true } ) // 把 template 中需要的數據 return 出去 return {
    keywords }
    <>8.LifeCycle Hooks

    新版的生命周期函數,可以按需導入到組件中,且只能在 setup() 函數中使用,代碼示例如下:
    import { onMounted, onUpdated, onUnmounted } from '@vue/composition-api' const
    MyComponent= { setup() { onMounted(() => { console.log('mounted!') }) onUpdated(
    () => { console.log('updated!') }) onUnmounted(() => { console.log('unmounted!')
    }) } }
    下面的列表,是 vue 2.x 的生命周期函數與新版 Composition API 之間的映射關系:

    * beforeCreate -> use setup()
    * created -> use setup()
    * beforeMount -> onBeforeMount
    * mounted -> onMounted
    * beforeUpdate -> onBeforeUpdate
    * updated -> onUpdated
    * beforeDestroy -> onBeforeUnmount
    * destroyed -> onUnmounted
    * errorCaptured -> onErrorCaptured
    <>9. provide & inject

    provide() 和 inject() 可以實現嵌套組件之間的數據傳遞。這兩個函數只能在 setup() 函數中使用。父級組件中使用 provide()
    函數向下傳遞數據;子級組件中使用inject() 獲取上層傳遞過來的數據。

    <>9.1 共享普通數據

    App.vue 根組件:
    <template> <div id="app"> <h1>App 根組件</h1> <hr /> <LevelOne /> </div> </
    template> <script> import LevelOne from './components/LevelOne' // 1. 按需導入
    provide import { provide } from '@vue/composition-api' export default { name:
    'app', setup() { // 2. App 根組件作為父級組件,通過 provide 函數向子級組件共享數據(不限層級) //
    provide('要共享的數據名稱', 被共享的數據) provide('globalColor', 'red') }, components: {
    LevelOne} } </script>
    LevelOne.vue 組件:
    <template> <div> <!-- 4. 通過屬性綁定,為標簽設置字體顏色 --> <h3 :style="{color: themeColor}">
    Level One</h3> <hr /> <LevelTwo /> </div> </template> <script> import LevelTwo
    from './LevelTwo' // 1. 按需導入 inject import { inject } from
    '@vue/composition-api' export default { setup() { // 2. 調用 inject
    函數時,通過指定的數據名稱,獲取到父級共享的數據 const themeColor = inject('globalColor') // 3.
    把接收到的共享數據 return 給 Template 使用 return { themeColor } }, components: { LevelTwo }
    } </script>
    LevelTwo.vue 組件:
    <template> <div> <!-- 4. 通過屬性綁定,為標簽設置字體顏色 --> <h5 :style="{color: themeColor}">
    Level Two</h5> </div> </template> <script> // 1. 按需導入 inject import { inject }
    from '@vue/composition-api' export default { setup() { // 2. 調用 inject
    函數時,通過指定的數據名稱,獲取到父級共享的數據 const themeColor = inject('globalColor') // 3.
    把接收到的共享數據 return 給 Template 使用 return { themeColor } } } </script>
    <>9.2 共享ref 響應式數據

    如下代碼實現了點按鈕切換主題顏色的功能,主要修改了 App.vue 組件中的代碼,LevelOne.vue 和 LevelTwo.vue
    中的代碼不受任何改變:
    <template> <div id="app"> <h1>App 根組件</h1> <!-- 點擊 App.vue 中的按鈕,切換子組件中文字的顏色 -->
    <button @click="themeColor='red'">紅色</button> <button @click="themeColor='blue'"
    >藍色</button> <button @click="themeColor='orange'">橘黃色</button> <hr /> <LevelOne
    /> </div> </template> <script> import LevelOne from './components/LevelOne'
    import { provide, ref } from '@vue/composition-api' export default { name: 'app'
    , setup() { // 定義 ref 響應式數據 const themeColor = ref('red') // 把 ref 數據通過 provide
    提供的子組件使用 provide('globalColor', themeColor) // setup 中 return 數據供當前組件的 Template
    使用 return { themeColor } }, components: { LevelOne } } </script>
    <>10. template refs

    通過 ref() 還可以引用頁面上的元素或組件。

    <>10.1 元素的引用
    <template> <div> <h3 ref="h3Ref">TemplateRefOne</h3> </div> </template> <script
    > import { ref, onMounted } from '@vue/composition-api' export default { setup()
    { // 創建一個 DOM 引用 const h3Ref = ref(null) // 在 DOM 首次加載完畢之后,才能獲取到元素的引用 onMounted(
    () => { // 為 dom 元素設置字體顏色 // h3Ref.value 是原生DOM對象 h3Ref.value.style.color =
    'red' }) // 把創建的引用 return 出去 return { h3Ref } } } </script>
    <>10.2 組件的引用

    TemplateRefOne.vue 中的示例代碼如下:
    <template> <div> <h3>TemplateRefOne</h3> <!-- 4. 點擊按鈕展示子組件的 count 值 --> <button
    @click="showNumber">獲取TemplateRefTwo中的count值</button> <hr /> <!-- 3. 為組件添加 ref
    引用 --> <TemplateRefTwo ref="comRef" /> </div> </template> <script> import { ref
    } from '@vue/composition-api' import TemplateRefTwo from './TemplateRefTwo'
    export default { setup() { // 1. 創建一個組件的 ref 引用 const comRef = ref(null) // 5.
    展示子組件中 count 的值 const showNumber = () => { console.log(comRef.value.count) } //
    2. 把創建的引用 return 出去 return { comRef, showNumber } }, components: {
    TemplateRefTwo} } </script>
    TemplateRefTwo.vue 中的示例代碼:
    <template> <div> <h5>TemplateRefTwo --- {{count}}</h5> <!-- 3. 點擊按鈕,讓 count
    值自增 +1 --> <button @click="count+=1">+1</button> </div> </template> <script>
    import { ref } from '@vue/composition-api' export default { setup() { // 1.
    定義響應式的數據 const count = ref(0) // 2. 把響應式數據 return 給 Template 使用 return { count }
    } } </script>
    <>11.createComponent

    這個函數不是必須的,除非你想要完美結合 TypeScript 提供的類型推斷來進行項目的開發。

    這個函數僅僅提供了類型推斷,方便在結合 TypeScript 書寫代碼時,能為 setup() 中的 props 提供完整的類型推斷。
    import { createComponent } from 'vue' export default createComponent({ props: {
    foo: String }, setup(props) { props.foo // <- type: string } })

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频