BBWAV,欧美日韩九九九,日韩一二在线

Vue 團(tuán)隊(duì)先后對(duì)外發(fā)布了 vue-function-api 和 vue-compisition-api 的 RFC
本次分享圍繞最新發(fā)布的 vue-compisition-api，來(lái)講解vue 3.0 的一些新特性，例如 setup() 函數(shù)、reactive()、ref() 等這些 Vue Hooks。

1、相關(guān)資源

【知乎 - Vue Function-based API RFC】https://zhuanlan.zhihu.com/p/68477600

2、初始化項(xiàng)目

安裝 vue-cli4（@vue/cli 4.2.2）

npm install -g @vue/cli
# OR
yarn global add @vue/cli

創(chuàng)建項(xiàng)目

vue create my-project
# OR
vue ui

在項(xiàng)目中安裝 composition-api 體驗(yàn) vue3 新特性

npm install @vue/composition-api --save
# OR
yarn add @vue/composition-api
# OR
vue GUI中安裝依賴(lài)

在使用任何 @vue/composition-api 提供的能力前，必須先通過(guò) Vue.use() 進(jìn)行安裝

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)

安裝插件后，您就可以使用新的 Composition API 來(lái)開(kāi)發(fā)組件了。

3、setup

setup() 函數(shù)是 vue3 中，專(zhuān)門(mén)為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統(tǒng)一的入口。

3.1 執(zhí)行時(shí)機(jī)

setup 函數(shù)會(huì)在 beforeCreate 之后、created 之前執(zhí)行

setup() {
    console.log('setup')
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },

3.2 接收 props 數(shù)據(jù)

在 props 中定義當(dāng)前組件允許外界傳遞過(guò)來(lái)的參數(shù)名稱(chēng)：

props: {
    p: String
  }

2.通過(guò) setup 函數(shù)的第一個(gè)形參，接收 props 數(shù)據(jù)：

setup(props) {
    console.log(props)
  }

3.3 context

setup 函數(shù)的第二個(gè)形參是一個(gè)上下文對(duì)象，這個(gè)上下文對(duì)象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過(guò) this 才能訪問(wèn)到，在 vue 3.x 中，它們的訪問(wèn)方式如下：

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}

注意：在 setup() 函數(shù)中無(wú)法訪問(wèn)到this

4、reactive

reactive() 函數(shù)接收一個(gè)普通對(duì)象，返回一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象。

4.1 基本語(yǔ)法

等價(jià)于 vue 2.x 中的 Vue.observable() 函數(shù)，vue 3.x 中提供了 reactive() 函數(shù)，用來(lái)創(chuàng)建響應(yīng)式的數(shù)據(jù)對(duì)象，基本代碼示例如下：

import { reactive } from '@vue/composition-api'

// 創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象，得到的 state 類(lèi)似于 vue 2.x 中 data() 返回的響應(yīng)式對(duì)象
const state = reactive({ count: 0 })

4.2 定義響應(yīng)式數(shù)據(jù)供 template 使用

按需導(dǎo)入 reactive 函數(shù)：

import { reactive } from '@vue/composition-api'

在 setup() 函數(shù)中調(diào)用 reactive() 函數(shù)，創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象：

setup() {
     // 創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象
    const state = reactive({count: 0})

     // setup 函數(shù)中將響應(yīng)式數(shù)據(jù)對(duì)象 return 出去，供 template 使用
    return state
}

在 template 中訪問(wèn)響應(yīng)式數(shù)據(jù)：

<p>當(dāng)前的 count 值為：{{count}}</p>

5、ref

5.1 基本語(yǔ)法

ref() 函數(shù)用來(lái)根據(jù)給定的值創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象，ref() 函數(shù)調(diào)用的返回值是一個(gè)對(duì)象，這個(gè)對(duì)象上只包含一個(gè) .value 屬性：

import { ref } from '@vue/composition-api'

// 創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象 count，初始值為 0
const count = ref(0)

// 如果要訪問(wèn) ref() 創(chuàng)建出來(lái)的響應(yīng)式數(shù)據(jù)對(duì)象的值，必須通過(guò) .value 屬性才可以
console.log(count.value) // 輸出 0
// 讓 count 的值 +1
count.value++
// 再次打印 count 的值
console.log(count.value) // 輸出 1

5.2 在 template 中訪問(wèn) ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)

在 setup() 中創(chuàng)建響應(yīng)式數(shù)據(jù)：

import { ref } from '@vue/composition-api'

setup() {
    const count = ref(0)

     return {
         count,
         name: ref('zs')
     }
}

2.在 template 中訪問(wèn)響應(yīng)式數(shù)據(jù)：

<template>
  <p>{{count}} --- {{name}}</p>
</template>

5.3 在 reactive 對(duì)象中訪問(wèn) ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)

當(dāng)把 ref() 創(chuàng)建出來(lái)的響應(yīng)式數(shù)據(jù)對(duì)象，掛載到 reactive() 上時(shí)，會(huì)自動(dòng)把響應(yīng)式數(shù)據(jù)對(duì)象展開(kāi)為原始的值，不需通過(guò) .value 就可以直接被訪問(wèn)，例如：

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 輸出 0
state.count++ // 此處不需要通過(guò) .value 就能直接訪問(wèn)原始值
console.log(count) // 輸出 1

注意：新的 ref 會(huì)覆蓋舊的 ref，示例代碼如下：

// 創(chuàng)建 ref 并掛載到 reactive 中
const c1 = ref(0)
const state = reactive({
  c1
})

// 再次創(chuàng)建 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

6、isRef

isRef() 用來(lái)判斷某個(gè)值是否為 ref() 創(chuàng)建出來(lái)的對(duì)象；應(yīng)用場(chǎng)景：當(dāng)需要展開(kāi)某個(gè)可能為 ref() 創(chuàng)建出來(lái)的值的時(shí)候，例如：

import { isRef } from '@vue/composition-api'

const unwrapped = isRef(foo) ? foo.value : foo

7、toRefs

toRefs() 函數(shù)可以將 reactive() 創(chuàng)建出來(lái)的響應(yīng)式對(duì)象，轉(zhuǎn)換為普通的對(duì)象，只不過(guò)，這個(gè)對(duì)象上的每個(gè)屬性節(jié)點(diǎn)，都是 ref() 類(lèi)型的響應(yīng)式數(shù)據(jù)，最常見(jiàn)的應(yīng)用場(chǎng)景如下：

import { toRefs } from '@vue/composition-api'

setup() {
    // 定義響應(yīng)式數(shù)據(jù)對(duì)象
    const state = reactive({
      count: 0
    })

    // 定義頁(yè)面上可用的事件處理函數(shù)
    const increment = () => {
      state.count++
    }

    // 在 setup 中返回一個(gè)對(duì)象供頁(yè)面使用
    // 這個(gè)對(duì)象中可以包含響應(yīng)式的數(shù)據(jù)，也可以包含事件處理函數(shù)
    return {
      // 將 state 上的每個(gè)屬性，都轉(zhuǎn)化為 ref 形式的響應(yīng)式數(shù)據(jù)
      ...toRefs(state),
      // 自增的事件處理函數(shù)
      increment
    }
}

頁(yè)面上可以直接訪問(wèn) setup() 中 return 出來(lái)的響應(yīng)式數(shù)據(jù)：

<template>
  <div>
    <p>當(dāng)前的count值為：{{count}}</p>
    <button @click="increment">+1</button>
  </div>
</template>

8、computed

computed() 用來(lái)創(chuàng)建計(jì)算屬性，computed() 函數(shù)的返回值是一個(gè) ref 的實(shí)例。使用 computed 之前需要按需導(dǎo)入：

import { computed } from '@vue/composition-api'

8.1 創(chuàng)建只讀的計(jì)算屬性

在調(diào)用 computed() 函數(shù)期間，傳入一個(gè) function 函數(shù)，可以得到一個(gè)只讀的計(jì)算屬性，示例代碼如下：

// 創(chuàng)建一個(gè) ref 響應(yīng)式數(shù)據(jù)
const count = ref(1)

// 根據(jù) count 的值，創(chuàng)建一個(gè)響應(yīng)式的計(jì)算屬性 plusOne
// 它會(huì)根據(jù)依賴(lài)的 ref 自動(dòng)計(jì)算并返回一個(gè)新的 ref
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 輸出 2
plusOne.value++ // error

8.2 創(chuàng)建可讀可寫(xiě)的計(jì)算屬性

在調(diào)用 computed() 函數(shù)期間，傳入一個(gè)包含 get 和 set 函數(shù)的對(duì)象，可以得到一個(gè)可讀可寫(xiě)的計(jì)算屬性，示例代碼如下：

// 創(chuàng)建一個(gè) ref 響應(yīng)式數(shù)據(jù)
const count = ref(1)

// 創(chuàng)建一個(gè) computed 計(jì)算屬性
const plusOne = computed({
  // 取值函數(shù)
  get: () => count.value + 1,
  // 賦值函數(shù)
  set: val => {
    count.value = val - 1
  }
})

// 為計(jì)算屬性賦值的操作，會(huì)觸發(fā) set 函數(shù)
plusOne.value = 9
// 觸發(fā) set 函數(shù)后，count 的值會(huì)被更新
console.log(count.value) // 輸出 8

9、 watch

watch() 函數(shù)用來(lái)監(jiān)視某些數(shù)據(jù)項(xiàng)的變化，從而觸發(fā)某些特定的操作，使用之前需要按需導(dǎo)入：

import { watch } from '@vue/composition-api'

9.1 基本用法

const count = ref(0)

// 定義 watch，只要 count 值變化，就會(huì)觸發(fā) watch 回調(diào)
// watch 會(huì)在創(chuàng)建時(shí)會(huì)自動(dòng)調(diào)用一次
watch(() => console.log(count.value))
// 輸出 0

setTimeout(() => {
  count.value++
  // 輸出 1
}, 1000)

9.2 監(jiān)視指定的數(shù)據(jù)源

監(jiān)視 reactive 類(lèi)型的數(shù)據(jù)源：

// 定義數(shù)據(jù)源
const state = reactive({ count: 0 })
// 監(jiān)視 state.count 這個(gè)數(shù)據(jù)節(jié)點(diǎn)的變化
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

監(jiān)視 ref 類(lèi)型的數(shù)據(jù)源：

// 定義數(shù)據(jù)源
const count = ref(0)
// 指定要監(jiān)視的數(shù)據(jù)源
watch(count, (count, prevCount) => {
  /* ... */
})

9.3 監(jiān)視多個(gè)數(shù)據(jù)源

監(jiān)視 reactive 類(lèi)型的數(shù)據(jù)源：

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 被創(chuàng)建的時(shí)候，不執(zhí)行回調(diào)函數(shù)中的代碼
  }
)

setTimeout(() => {
  state.count++
  state.name = 'ls'
}, 1000)

監(jiān)視 ref 類(lèi)型的數(shù)據(jù)源：

const count = ref(0)
const name = ref('zs')

watch(
  [count, name], // 需要被監(jiān)視的多個(gè) ref 數(shù)據(jù)源
  ([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)

9.4 清除監(jiān)視

在 setup() 函數(shù)內(nèi)創(chuàng)建的 watch 監(jiān)視，會(huì)在當(dāng)前組件被銷(xiāo)毀的時(shí)候自動(dòng)停止。如果想要明確地停止某個(gè)監(jiān)視，可以調(diào)用 watch() 函數(shù)的返回值即可，語(yǔ)法如下：

// 創(chuàng)建監(jiān)視，并得到 停止函數(shù)
const stop = watch(() => {
  /* ... */
})

// 調(diào)用停止函數(shù)，清除對(duì)應(yīng)的監(jiān)視
stop()

9.5 在 watch 中清除無(wú)效的異步任務(wù)

有時(shí)候，當(dāng)被 watch 監(jiān)視的值發(fā)生變化時(shí)，或 watch 本身被 stop 之后，我們期望能夠清除那些無(wú)效的異步任務(wù)，此時(shí)，watch 回調(diào)函數(shù)中提供了一個(gè) cleanup registrator function 來(lái)執(zhí)行清除的工作。這個(gè)清除函數(shù)會(huì)在如下情況下被調(diào)用：

watch 被重復(fù)執(zhí)行了
watch 被強(qiáng)制 stop 了

Template 中的代碼示例如下：

/* template 中的代碼 */ <input type="text" v-model="keywords" />

Script 中的代碼示例如下：

// 定義響應(yīng)式數(shù)據(jù) keywords
const keywords = ref('')

// 異步任務(wù)：打印用戶(hù)輸入的關(guān)鍵詞
const asyncPrint = val => {
  // 延時(shí) 1 秒后打印
  return setTimeout(() => {
    console.log(val)
  }, 1000)
}

// 定義 watch 監(jiān)聽(tīng)
watch(
  keywords,
  (keywords, prevKeywords, onCleanup) => {
    // 執(zhí)行異步任務(wù)，并得到關(guān)閉異步任務(wù)的 timerId
    const timerId = asyncPrint(keywords)

    // 如果 watch 監(jiān)聽(tīng)被重復(fù)執(zhí)行了，則會(huì)先清除上次未完成的異步任務(wù)
    onCleanup(() => clearTimeout(timerId))
  },
  // watch 剛被創(chuàng)建的時(shí)候不執(zhí)行
  { lazy: true }
)

// 把 template 中需要的數(shù)據(jù) return 出去
return {
  keywords
}

10. LifeCycle Hooks

新版的生命周期函數(shù)，可以按需導(dǎo)入到組件中，且只能在 setup() 函數(shù)中使用，代碼示例如下：

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 的生命周期函數(shù)與新版 Composition API 之間的映射關(guān)系：

~~beforeCreate~~ -> use setup()
~~created~~ -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

11、 provide & inject

provide() 和 inject() 可以實(shí)現(xiàn)嵌套組件之間的數(shù)據(jù)傳遞。這兩個(gè)函數(shù)只能在 setup() 函數(shù)中使用。父級(jí)組件中使用 provide() 函數(shù)向下傳遞數(shù)據(jù)；子級(jí)組件中使用 inject() 獲取上層傳遞過(guò)來(lái)的數(shù)據(jù)。

11.1 共享普通數(shù)據(jù)

App.vue 根組件：

<template>
  <div id="app">
    <h1>App 根組件</h1>
    <hr />
    <LevelOne />
  </div>
</template>

<script>
import LevelOne from './components/LevelOne'
// 1\. 按需導(dǎo)入 provide
import { provide } from '@vue/composition-api'

export default {
  name: 'app',
  setup() {
    // 2\. App 根組件作為父級(jí)組件，通過(guò) provide 函數(shù)向子級(jí)組件共享數(shù)據(jù)（不限層級(jí)）
    //    provide('要共享的數(shù)據(jù)名稱(chēng)', 被共享的數(shù)據(jù))
    provide('globalColor', 'red')
  },
  components: {
    LevelOne
  }
}
</script>

LevelOne.vue 組件：

<template>
  <div>
    <!-- 4\. 通過(guò)屬性綁定，為標(biāo)簽設(shè)置字體顏色 -->
    <h3 :style="{color: themeColor}">Level One</h3>
    <hr />
    <LevelTwo />
  </div>
</template>

<script>
import LevelTwo from './LevelTwo'
// 1\. 按需導(dǎo)入 inject
import { inject } from '@vue/composition-api'

export default {
  setup() {
    // 2\. 調(diào)用 inject 函數(shù)時(shí)，通過(guò)指定的數(shù)據(jù)名稱(chēng)，獲取到父級(jí)共享的數(shù)據(jù)
    const themeColor = inject('globalColor')

    // 3\. 把接收到的共享數(shù)據(jù) return 給 Template 使用
    return {
      themeColor
    }
  },
  components: {
    LevelTwo
  }
}
</script>

LevelTwo.vue 組件：

<template>
  <div>
    <!-- 4\. 通過(guò)屬性綁定，為標(biāo)簽設(shè)置字體顏色 -->
    <h5 :style="{color: themeColor}">Level Two</h5>
  </div>
</template>

<script>
// 1\. 按需導(dǎo)入 inject
import { inject } from '@vue/composition-api'

export default {
  setup() {
    // 2\. 調(diào)用 inject 函數(shù)時(shí)，通過(guò)指定的數(shù)據(jù)名稱(chēng)，獲取到父級(jí)共享的數(shù)據(jù)
    const themeColor = inject('globalColor')

    // 3\. 把接收到的共享數(shù)據(jù) return 給 Template 使用
    return {
      themeColor
    }
  }
}
</script>

11.2 共享 ref 響應(yīng)式數(shù)據(jù)

如下代碼實(shí)現(xiàn)了點(diǎn)按鈕切換主題顏色的功能，主要修改了 App.vue 組件中的代碼，LevelOne.vue 和 LevelTwo.vue 中的代碼不受任何改變：

<template>
  <div id="app">
    <h1>App 根組件</h1>

    <!-- 點(diǎn)擊 App.vue 中的按鈕，切換子組件中文字的顏色 -->
    <button @click="themeColor='red'">紅色</button>
    <button @click="themeColor='blue'">藍(lán)色</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 響應(yīng)式數(shù)據(jù)
    const themeColor = ref('red')

    // 把 ref 數(shù)據(jù)通過(guò) provide 提供的子組件使用
    provide('globalColor', themeColor)

    // setup 中 return 數(shù)據(jù)供當(dāng)前組件的 Template 使用
    return {
      themeColor
    }
  },
  components: {
    LevelOne
  }
}
</script>

12、 template refs

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

12.1 元素的引用

示例代碼如下：

<template>
  <div>
    <h3 ref="h3Ref">TemplateRefOne</h3>
  </div>
</template>

<script>
import { ref, onMounted } from '@vue/composition-api'

export default {
  setup() {
    // 創(chuàng)建一個(gè) DOM 引用
    const h3Ref = ref(null)

    // 在 DOM 首次加載完畢之后，才能獲取到元素的引用
    onMounted(() => {
      // 為 dom 元素設(shè)置字體顏色
      // h3Ref.value 是原生DOM對(duì)象
      h3Ref.value.style.color = 'red'
    })

    // 把創(chuàng)建的引用 return 出去
    return {
      h3Ref
    }
  }
}
</script>

12.2 組件的引用

TemplateRefOne.vue 中的示例代碼如下：

<template>
  <div>
    <h3>TemplateRefOne</h3>

    <!-- 4\. 點(diǎn)擊按鈕展示子組件的 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\. 創(chuàng)建一個(gè)組件的 ref 引用
    const comRef = ref(null)

    // 5\. 展示子組件中 count 的值
    const showNumber = () => {
      console.log(comRef.value.count)
    }

    // 2\. 把創(chuàng)建的引用 return 出去
    return {
      comRef,
      showNumber
    }
  },
  components: {
    TemplateRefTwo
  }
}
</script>

TemplateRefTwo.vue 中的示例代碼：

<template>
  <div>
    <h5>TemplateRefTwo --- {{count}}</h5>
    <!-- 3\. 點(diǎn)擊按鈕，讓 count 值自增 +1 -->
    <button @click="count+=1">+1</button>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api'

export default {
  setup() {
    // 1\. 定義響應(yīng)式的數(shù)據(jù)
    const count = ref(0)

    // 2\. 把響應(yīng)式數(shù)據(jù) return 給 Template 使用
    return {
      count
    }
  }
}
</script>

13、 createComponent

這個(gè)函數(shù)不是必須的，除非你想要完美結(jié)合 TypeScript 提供的類(lèi)型推斷來(lái)進(jìn)行項(xiàng)目的開(kāi)發(fā)。

這個(gè)函數(shù)僅僅提供了類(lèi)型推斷，方便在結(jié)合 TypeScript 書(shū)寫(xiě)代碼時(shí)，能為 setup() 中的 props 提供完整的類(lèi)型推斷。

import { createComponent } from 'vue'

export default createComponent({
  props: {
    foo: String
  },
  setup(props) {
    props.foo // <- type: string
  }
})

附原始手冊(cè)地址http://www.liulongbin.top:8085/#/

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue2.x 版本中體驗(yàn)vue3.x新特性

vue2.x 版本中體驗(yàn)vue3.x新特性

1、相關(guān)資源

2、初始化項(xiàng)目

3、setup

3.1 執(zhí)行時(shí)機(jī)

3.2 接收 props 數(shù)據(jù)

3.3 context

4、reactive

4.1 基本語(yǔ)法

4.2 定義響應(yīng)式數(shù)據(jù)供 template 使用

5、ref

5.1 基本語(yǔ)法

5.2 在 template 中訪問(wèn) ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)

5.3 在 reactive 對(duì)象中訪問(wèn) ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)

6、isRef

7、toRefs

8、computed

8.1 創(chuàng)建只讀的計(jì)算屬性

8.2 創(chuàng)建可讀可寫(xiě)的計(jì)算屬性

9、 watch

9.1 基本用法

9.2 監(jiān)視指定的數(shù)據(jù)源

9.3 監(jiān)視多個(gè)數(shù)據(jù)源

9.4 清除監(jiān)視

9.5 在 watch 中清除無(wú)效的異步任務(wù)

10. LifeCycle Hooks

11、 provide & inject

11.1 共享普通數(shù)據(jù)

11.2 共享 ref 響應(yīng)式數(shù)據(jù)

12、 template refs

12.1 元素的引用

12.2 組件的引用

13、 createComponent

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue2.x 版本中體驗(yàn)vue3.x新特性

1、相關(guān)資源

2、初始化項(xiàng)目

3、setup

3.1 執(zhí)行時(shí)機(jī)

3.2 接收 props 數(shù)據(jù)

3.3 context

4、reactive

4.1 基本語(yǔ)法

4.2 定義響應(yīng)式數(shù)據(jù)供 template 使用

5、ref

5.1 基本語(yǔ)法

5.2 在 template 中訪問(wèn) ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)

5.3 在 reactive 對(duì)象中訪問(wèn) ref 創(chuàng)建的響應(yīng)式數(shù)據(jù)

6、isRef

7、toRefs

8、computed

8.1 創(chuàng)建只讀的計(jì)算屬性

8.2 創(chuàng)建可讀可寫(xiě)的計(jì)算屬性

9、 watch

9.1 基本用法

9.2 監(jiān)視指定的數(shù)據(jù)源

9.3 監(jiān)視多個(gè)數(shù)據(jù)源

9.4 清除監(jiān)視

9.5 在 watch 中清除無(wú)效的異步任務(wù)

10. LifeCycle Hooks

11、 provide & inject

11.1 共享普通數(shù)據(jù)

11.2 共享 ref 響應(yīng)式數(shù)據(jù)

12、 template refs

12.1 元素的引用

12.2 組件的引用

13、 createComponent

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2、初始化項(xiàng)目

3、setup

4、reactive

5、ref

6、isRef

7、toRefs

8、computed

9、 watch

11、 provide & inject

12、 template refs

13、 createComponent