野花韩国高清在线观看,最新国产精品自在自线发布,国产精品麻豆欧美日韩ww

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

1、相關(guān)資源

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

2、初始化項目

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

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

創(chuàng)建項目

vue create my-project
# OR
vue ui

在項目中安裝 composition-api 體驗 vue3 新特性

npm install @vue/composition-api --save
# OR
yarn add @vue/composition-api
# OR
vue GUI中安裝依賴

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

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

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

3、setup

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

3.1 執(zhí)行時機

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

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

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

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

props: {
    p: String
  }

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

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

3.3 context

setup 函數(shù)的第二個形參是一個上下文對象，這個上下文對象中包含了一些有用的屬性，這些屬性在 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() 函數(shù)中無法訪問到this

4、reactive

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

4.1 基本語法

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

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

// 創(chuàng)建響應(yīng)式數(shù)據(jù)對象，得到的 state 類似于 vue 2.x 中 data() 返回的響應(yīng)式對象
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ù)對象：

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

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

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

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

5、ref

5.1 基本語法

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

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

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

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

5.2 在 template 中訪問 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 中訪問響應(yīng)式數(shù)據(jù)：

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

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

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

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

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

注意：新的 ref 會覆蓋舊的 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() 用來判斷某個值是否為 ref() 創(chuàng)建出來的對象；應(yīng)用場景：當(dāng)需要展開某個可能為 ref() 創(chuàng)建出來的值的時候，例如：

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

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

7、toRefs

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

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

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

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

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

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

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

8、computed

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

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

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

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

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

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

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

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

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

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

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

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

9、 watch

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

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

9.1 基本用法

const count = ref(0)

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

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

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

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

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

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

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

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

監(jiān)視 reactive 類型的數(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)建的時候，不執(zhí)行回調(diào)函數(shù)中的代碼
  }
)

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

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

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

watch(
  [count, name], // 需要被監(jiān)視的多個 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)視，會在當(dāng)前組件被銷毀的時候自動停止。如果想要明確地停止某個監(jiān)視，可以調(diào)用 watch() 函數(shù)的返回值即可，語法如下：

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

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

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

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

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

Template 中的代碼示例如下：

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

Script 中的代碼示例如下：

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

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

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

    // 如果 watch 監(jiān)聽被重復(fù)執(zhí)行了，則會先清除上次未完成的異步任務(wù)
    onCleanup(() => clearTimeout(timerId))
  },
  // watch 剛被創(chuàng)建的時候不執(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() 可以實現(xiàn)嵌套組件之間的數(shù)據(jù)傳遞。這兩個函數(shù)只能在 setup() 函數(shù)中使用。父級組件中使用 provide() 函數(shù)向下傳遞數(shù)據(jù)；子級組件中使用 inject() 獲取上層傳遞過來的數(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 根組件作為父級組件，通過 provide 函數(shù)向子級組件共享數(shù)據(jù)（不限層級）
    //    provide('要共享的數(shù)據(jù)名稱', 被共享的數(shù)據(jù))
    provide('globalColor', 'red')
  },
  components: {
    LevelOne
  }
}
</script>

LevelOne.vue 組件：

<template>
  <div>
    <!-- 4\. 通過屬性綁定，為標簽設(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ù)據(jù)名稱，獲取到父級共享的數(shù)據(jù)
    const themeColor = inject('globalColor')

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

LevelTwo.vue 組件：

<template>
  <div>
    <!-- 4\. 通過屬性綁定，為標簽設(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ù)據(jù)名稱，獲取到父級共享的數(shù)據(jù)
    const themeColor = inject('globalColor')

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

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

如下代碼實現(xiàn)了點按鈕切換主題顏色的功能，主要修改了 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 響應(yīng)式數(shù)據(jù)
    const themeColor = ref('red')

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

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

12、 template refs

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

12.1 元素的引用

示例代碼如下：

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

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

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

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

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

12.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\. 創(chuàng)建一個組件的 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\. 點擊按鈕，讓 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

這個函數(shù)不是必須的，除非你想要完美結(jié)合 TypeScript 提供的類型推斷來進行項目的開發(fā)。

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

import { createComponent } from 'vue'

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

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

vue2.x 版本中體驗vue3.x新特性

vue2.x 版本中體驗vue3.x新特性

1、相關(guān)資源

2、初始化項目

3、setup

3.1 執(zhí)行時機

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

3.3 context

4、reactive

4.1 基本語法

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

5、ref

5.1 基本語法

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

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

6、isRef

7、toRefs

8、computed

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

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

9、 watch

9.1 基本用法

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

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

9.4 清除監(jiān)視

9.5 在 watch 中清除無效的異步任務(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

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

vue2.x 版本中體驗vue3.x新特性

1、相關(guān)資源

2、初始化項目

3、setup

3.1 執(zhí)行時機

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

3.3 context

4、reactive

4.1 基本語法

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

5、ref

5.1 基本語法

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

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

6、isRef

7、toRefs

8、computed

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

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

9、 watch

9.1 基本用法

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

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

9.4 清除監(jiān)視

9.5 在 watch 中清除無效的異步任務(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

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频