② 初識vue3.0：新特性講解

阿新 • • 發佈：2022-05-27

1 vue3 新特性巡禮

1.1 效能提升

打包減小
初次渲染加快、更新加快
記憶體使用減少

得益於重寫虛擬 DOM 的實現和 Tree shanking 的優化

1.2 Composition API

ref 和 reactive
computed 和 watch
新的生命週期函式
自定義函式 -- Hooks 函式

1.3 其他新增特性

Teleport -- 瞬移元件的位置
Suspense -- 非同步載入元件的新福音
全域性 API 的優化和修改
更多試驗性特性

1.4 更好的 ts 支援

2 為什麼會有 vue3

vue2 遇到的難題

1. 隨著功能的增長，複雜元件的程式碼變得難以維護

2. 隨著複雜度的上升，帶來的問題

mixin 的解決方案

const filterMixin = {
  data() {
    return {}
  },
  methods: {}
}
const paginationMixin = {
  data() {
    return {}
  },
  methods: {}
}
export default {
  mixin: [ filterMixin, paginationMixin ]
}

mixin 的缺點

命名衝突
不清楚暴露出來變數的作用
重用到其他元件時會出現問題

3. vue2 對於 ts 的支援非常有限

3 vue3 - ref 的妙用

setup
ref：處理基本型別的資料
computed

import { ref, computed } from 'vue'
export default {
  name: 'App',
  setup() {
    const count = ref(0)
    const double = computed(() => {
      return count.value * 2
    })
    const increase = () => {
      count.value++
    }
    return {
      count, double, increase
    }
  }
}

4 更近一步 - reactive

reactive：處理複雜型別的資料
reactive + toRefs(將物件屬性轉化為響應式屬性)

使用 toRefs 保證 reactive 物件屬性保持響應性

import { computed, reactive, toRefs } from 'vue'
interface DataProps {
  count: number,
  double: number,
  increase: () => void
}
export default {
  name: 'App',
  setup() {
    const data: DataProps = reactive({
      count: 0,
      increase: () => { data.count++ },
      double: computed(() => data.count * 2)
    }) 
    // 只有 data 是響應式的 其屬性非響應式
    const refData = toRefs(data)
    return {
      ...refData
    }
  }
}

5 vue3 響應式物件的新花樣

響應式原理

vue2

Object.definedProperty(data, 'count', {
  get() {},
  set() {}
})

vue3

new Proxy(data, {
  get(key) {},
  set(key, value) {}
})

vue3應用

import { computed, reactive, toRefs } from 'vue'
interface DataProps {
  numbers: number[];
  person: { name?: string };
}
export default {
  name: 'App',
  setup() {
    const data: DataProps = reactive({
      numbers: [0, 1, 2],
      person: {}
    }) 
    data.numbers[0] = 5
    data.person.name = 'viking'
    const refData = toRefs(data)
    return {
      ...refData
    }
  }
}

6 老瓶新酒 - 生命週期

在 setup 中使用的 hook 名稱和原來生命週期的對應關係

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked 每次渲染後重新收集響應式依賴時執行
renderTriggered -> onRenderTriggered 每次觸發頁面重新渲染時執行

import { onMounted, onUpdated, onRenderTriggered, onRenderTracked } from 'vue'
export default {
  name: 'App',
  setup() {
    onMounted(() => {
      console.log('mounted')
    })
    onUpdated(() => {
      console.log('updated')
    })
    onRenderTriggered(() => {
      console.log('renderTriggered') // 點選按鈕時觸發
    })
    onRenderTracked(() => {
      console.log('renderTracked') // 頁面重新整理時觸發
    })
  }
}

7 偵測變化 - watch

一般用法

setup() {
  const greetings = ref('')
  const updateGreeting = () => {
    greetings.value += 'Hello!'
  }
  watch(greetings, (newVal, oldVal) => {
    console.log(newVal, oldVal);
    document.title = 'updated '
  })
  return {
    updateGreeting,
  }
}

偵聽 reactive 方法下的資料 -- getter 寫法 -- 使用箭頭函式

setup() {
  const data: DataProps = reactive({
    count: 0,
  })
  const greetings = ref('')
  const updateGreeting = () => {
    greetings.value += 'Hello!'
  }
  watch([greetings, () => data.count], (newVal, oldVal) => {
    console.log(newVal, oldVal);
    document.title = 'updated ' + greetings.value + data.count
  })
  // 只有 data 是響應式的 其屬性非響應式
  const refData = toRefs(data)
  return {
    updateGreeting,
    ...refData
  }
}

8 模組化開發 -- 滑鼠追蹤器

hooks > useMousePosition.ts

import { reactive, toRefs, onMounted, onUnmounted } from 'vue'
function useMousePosition() {
  const data = reactive({
    x: 0,
    y: 0
  })
  const updateMouse = (e: MouseEvent) => {
    data.x = e.pageX
    data.y = e.pageY
  }
  onMounted(() => {
    document.addEventListener('click', updateMouse)
  })
  onUnmounted(() => {
    document.removeEventListener('click', updateMouse)
  })
  const refData = toRefs(data)
  return { ...refData }
}
export default useMousePosition

App.vue

import useMousePosition from './hooks/useMousePosition'
export default {
  setup() {
    const { x, y } = useMousePosition()
    return {
      x, y,
    }
  }
}

優點

可以清楚地知道 x y 的來源，這兩個引數是幹什麼的
可以給 x y 設定任何別名，避免了命名衝突的風險
這段邏輯可脫離元件存在，只有邏輯程式碼不需要模板

9 模組化難度上升 - useURLLoader

hooks > useURLLoader.ts

import { ref } from 'vue'
import axios from 'axios'

function useURLLoader(url: string) {
  const result = ref(null)
  const loading = ref(true)
  const loaded = ref(false)
  const error = ref(null)

  axios.get(url).then(rawData => {
    loading.value = false
    loaded.value = true
    result.value = rawData.data
  }).catch(e => {
    error.value = e
    loading.value = false
  })
  return {
    result, loading, loaded, error
  }
}

export default useURLLoader

App.vue

import useURLLoader from './hooks/useURLLoader'
export default {
  setup() {
    const { result, loading, loaded } = useURLLoader('https://dog.ceo/api/breeds/image/random')
    return {
      result, loading, loaded
    }
  }
}

10 模組化結合 typescript - 泛型改造

hooks > useURLLoader.ts

function useURLLoader<T>(url: string) {
  const result = ref<T | null>(null)
  // ...
}
export default useURLLoader

App.vue

展示狗狗圖片

import useURLLoader from './hooks/useURLLoader'

interface DogResult {
  message: string;
  status: string;
}
export default {
  name: 'App',
  setup() {
    const { result, loading, loaded } = useURLLoader<DogResult>('https://dog.ceo/api/breeds/image/random')
    watch(result, () => {
      if(result.value) {
        console.log(result.value.message);
      }
    })
    return {
      result, loading, loaded
    }
  }
}

展示貓貓圖片

import useURLLoader from './hooks/useURLLoader'

interface CatResult {
  id: string;
  url: string;
  width: number;
  height: number; 
}
export default {
  name: 'App',
  setup() {
    const { result, loading, loaded } = useURLLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search?limit=1')
    watch(result, () => {
      if(result.value) {
        console.log(result.value[0].url);
      }
    })
    return {
      result, loading, loaded
    }
  }
}

11 Typescript 對 vue3 的加持

使用 defineComponent 包裹元件 + setup 函式引數

components > HelloWorld

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      required: true,
      type: String
    }
  },
  setup(props, context) {
    console.log(props.msg)
    const { attrs, slots, emit } = context
  }
});

12 元件 Teleport - 瞬間移動

Teleport 上有一個 to 的屬性，它接受一個 css query selector 作為引數，代表要把這個元件渲染到哪個 dom 元素中

12.1 原始 `modal` 元件

1. components > Modal.vue

<teleport to="#modal">
  <div id="center">
    <h1>this is a modal</h1>
  </div>
</teleport>

2. App.vue

<!-- ... -->
  <Modal />
<!-- ... -->
<script lang="ts">
import Modal from './components/Modal.vue'
export default {
  components: { Modal }
  // ...
}
</script>

3. public > index.html

<div id="app"></div>
<div id="modal"></div>

4. 渲染結果

12.2 實現 `modal` 的開啟關閉

控制組件的顯示與否 -- isOpen
自定義 content -- slot
關閉 modal -- 使用 emit 觸發

1. components > Modal.vue

文件化 emits-- 一目瞭然要觸發的事件
支援執行時檢驗
支援自動補全

<teleport to="#modal">
 <div id="center" v-if="isOpen">
   <h1>
     <slot>
     this is a modal
     </slot>  
   </h1>
   <button @click="buttonClick">Close</button>
 </div>
</teleport>

export default defineComponent({
  props: {
    isOpen: Boolean
  },
  // 更明確的顯示元件的自定義事件
  emits: {
    'close-modal': null
  },
  setup(props, context) {
    const buttonClick = () => {
      context.emit('close-modal')
    }
    return {
      buttonClick
    }
  }
})

2. App.vue

<Modal :isOpen="modalIsOpen" @close-modal="onModalClose">
  My Modal !!!
</Modal>
<button @click="openModal">open Modal</button>

setup() {
  const modalIsOpen = ref(false)
  const openModal = () => {
    modalIsOpen.value = true
  }
  const onModalClose = () => {
    modalIsOpen.value = false
  }
  return {
    modalIsOpen, openModal, onModalClose
  }
}

13 元件 Suspense - 非同步請求好幫手

元件使用 Suspense，在 setup 中需要返回一個 Promise

13.1 簡單用法

1. components > AsyncShow.vue

<template>
  <h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return new Promise ((resolve) => {
      setTimeout(() => {
        return resolve({
          result: 42
        })
      }, 3000);
    })
  }
})
</script>

2. App.vue

<Suspense>
  <template #default>
    <async-show />
  </template>
  <template #fallback>
    <h1>Loading !...</h1>
  </template>
</Suspense>

import AsyncShow from './components/AsyncShow.vue'
export default {
  components: { AsyncShow }
}

13.2 使用 async await

1. components > DogShow.vue

<template>
  <img :src="result && result.message" />
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
export default defineComponent({
  async setup() {
    const rawData = await axios.get('https://dog.ceo/api/breeds/image/random')
    return {
      result: rawData.data
    }
  }
})
</script>

2. App.vue

<Suspense>
  <template #default>
    <div>
      <async-show />
      <dog-show />
    </div>
  </template>
  <template #fallback>
    <h1>Loading !...</h1>
  </template>
</Suspense>

import AsyncShow from './components/AsyncShow.vue'
import DogShow from './components/DogShow.vue'
export default {
  components: { AsyncShow, DogShow }
}

13.3 Suspense 中的錯誤捕獲

import { onErrorCaptured } from 'vue'
setup() {
  const error = ref(null)
  onErrorCaptured((e: any) => {
    error.value = e
    return true
  })
  return {
    error
  }
}

14 Provide / Inject

14.1 父子元件傳值 -- prop

14.2 解決多層級傳值 -- Provide/Inject

Provide/Inject：提供了一種在元件之間共享此類值的方式，而不必通過元件樹的每個層級顯式地傳遞 props

目的是為共享那些被認為對於一個元件樹而言是“全域性”的資料

1. provide -- 提供

export default {
  provide: {
    message: 'hello!'
  }
}

應用級提供

import { createApp } from 'vue'
const app = createApp({})
app.provide('message', 'hello!')

2. inject -- 注入

export default {
  inject: ['message'],
  data() {
    return {
      fullMessage: this.message
    }
  }
}

注入別名

export default {
  inject: {
    localMessage: {
      from: 'message'
    }
  }
}

注入預設值

export default {
  inject: {
    message: {
      from: 'message',
      default: 'default value'
    },
    user: {
      default: () => ({ name: 'John' })
    }
  }
}

3. 使用響應性

使用 computed() 函式提供一個計算屬性 -- 使注入響應性地連結到提供者

import { computed } from 'vue'

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    return {
      // explicitly provide a computed property
      message: computed(() => this.message)
    }
  }
}

15 全域性 API 修改

15.1 入口檔案

1. vue2 的全域性配置

import Vue from 'vue'
import App from './App.vue'
Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

Vue.prototype.customProperty = () => {}

new Vue({
  render: h => h(App)
}).$mount('#app')

不足

單元測試中，全域性配置容易汙染全域性環境
在不同 App 中，難以共享一份有不同配置的 Vue 物件

2. vue3 的全域性配置

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// app 就是一個 App 的例項，設定任何的配置是在不同的 app 例項上面的，不會像vue2 一樣發生任何的衝突

app.config.isCustomElement = tag => tag.startsWith('app-')
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.config.globalProperties.customProperty = () => {}

// 當配置結束以後，我們再把 App 使用 mount 方法掛載到固定的 DOM 的節點上。
app.mount(App, '#app')

15.2 全域性配置 Vue.config -> app.config

15.3 全域性註冊類 API

Vue.component -> app.component
Vue.directive -> app.directive

15.4 行為擴充套件類

Vue.mixin -> app.mixin
Vue.use -> app.use

15.5 Global API Treeshaking

webpack-Treeshaking

Tree Shaking -- 用於描述移除 js 上下文中的未引用程式碼

1. vue2

import Vue from 'vue'
Vue.nextTick(() => {})
const obj = Vue.observable({})

2. vue3

import Vue, { nextTick, observable } from 'vue'
Vue.nextTick // undefined
nextTick(() => {})
const obj = observable({})

② 初識vue3.0：新特性講解

1 vue3 新特性巡禮 1.1 效能提升打包減小初次渲染加快、更新加快記憶體使用減少

vue3.0 的新特性

vue3新特性：一、使用Proxy替換Object.defineProperty，重構響應式系統，使用Proxy優勢：

jdk5.0的新特性

在JDK 1.5的beta階段，我們為BEA的Java IDE開發了一個Java 5編譯器。因為我們實現了許多新特性，所以人們開始以新的方式利用它們；有些用法很聰明，而有些用法明顯應該被列入禁用清單。編譯器本身使用了新的語言特性

Xamarin.Form 5.0：新功能和控制元件以及除錯改進

上週在.NET Conf 2020，Scott Hunter（.NET），Maddy Leger（微軟移動開發工具-Xamarin專案經理）和David Ortinau（首席專案經理，移動開發人員工具）介紹了最新的Xamarin除錯改進, 熱重新載入和熱重啟。

JavaSE：新特性和專案 - 學習筆記

一. 索引　　1.　　常用的設計原則和設計模式　　　　　　<1>　　常用的設計原則

第十八章【高階篇】分散式快取Redis6.X新特性講解拓展

願景：\"讓程式設計不再難學，讓技術與生活更加有趣\" 更多架構課程請訪問 xdclass.net+vxdclass10諮詢更多課程

vue3.2版本新特性

Vue 3.2 版本包括許多重要的新功能和效能改進，但並不包含重大更改。Vue 3.2 原文連結

MySQL8.0其他新特性

MySQL8.0其他新特性 MySQL8.0新特性概述 MySQL8.0新增特性 MySQL8.0移除的舊特性新特性1：視窗函式

Streams：深入理解Redis5.0新特性

概述相較於Redis4.0，Redis5.0增加了很多新的特性，而streams是其中最重要的特性之一。streams是redis 的一種基本資料結構，它是一個新的強大的支援多播的可持久化的訊息佇列，在設計上借鑑了kafaka。streams的資料

Vue3.0 效能優化及新特性深度解析

最近，Vue作者尤雨溪在B站的演講中分享了Vue3.0的六大亮點：效能 Tree-shaking 支援

Spring Boot 2.3.0正式釋出：優雅停機、配置檔案位置萬用字元新特性一覽

當大潮退去，才知道誰在裸泳。。關注公眾號【BAT的烏託邦】開啟專欄式學習，拒絕淺嘗輒止。本文 https://www.yourbatman.cn 已收錄，裡面一併有Spring技術棧、MyBatis、中介軟體等小而美的專欄供以學習哦。

C#（99）：C# 8.0 新特性( NET Framework 4.8 與 Visual Studio 2019 )

C#8.0 於 2019年4月隨 .NET Framework 4.8 與 Visual Studio 2019 一同釋出使用VS2019體檢C#8.0新功能：編輯.csproj檔案，新增如下程式碼<PropertyGroup>

C#（99）：C# 7.0 新特性Tuple元組、 ValueTuple 值元組詳解

一、Tuple元組Tuple是C# 4.0時出的新特性，.Net Framework 4.0以上版本可用。元組是一種資料結構，具有特定數量和元素序列，與陣列不同，元祖中的元素可以不同的資料型別。比如設計一個三元組資料結構用於儲存學生資

C#（99）：C# 6.0 新特性(.NET Framework 4.6 與 Visual Studio 2015 )

C#6.0 在 2015 年7月隨著.NET Framework 4.6 一同釋出，後期釋出了.NET Framework 4.6.1，4.6.2。一、自動屬性初始化(Auto-property initializers)public class Account

C#（99）：C# 7.0 新特性(.NET Framework 4.7 與 Visual Studio 2017 )

C#7.0 於 2017年3月隨 .NET 4.7 和 VS2017 釋出。一. out 變數（out variables）以前我們使用out變數必須在使用前進行宣告，C# 7.0 給我們提供了一種更簡潔的語法 “使用時進行內聯宣告” 。如下所示：var input =

C#（99）：C# 9.0 新特性( NET Framework 5.0 與 Visual Studio ? )

原文：https://blog.csdn.net/csdnnews/article/details/106345959微軟正在推進C# 9.0的開發，C# 9.0 將成為.NET 5 開發平臺的一部分，預計於 11 月釋出。微軟.NET團隊C#首席設計師Mads Torgersen表示，C# 9.0已初具

C# 9.0新特性詳解系列之一：只初始化設定器（init only setter)

1、背景與動機自C#1.0版本以來，我們要定義一個不可變資料型別的基本做法就是：先宣告欄位為readonly，再宣告只包含get訪問器的屬性。例子如下：

C# 9.0新特性詳解系列之二：擴充套件方法GetEnumerator支援foreach迴圈

1.介紹我們知道，我們要使一個型別支援foreach迴圈，就需要這個型別滿足下面條件之一：

C#9.0新特性之四：頂級程式語句（Top-Level Programs)

1 背景與動機通常，如果只想用C#在控制檯上列印一行“Hello World！”，這可不是Console.WriteLine(\"Hello World!\");一條語句就可以搞定的，還涉及到其他必要基礎程式碼（如定義類和入口函式Main），例如下面：

C# 9.0新特性詳解系列之五：記錄(record)和with表示式

1 背景與動機傳統面向物件程式設計的核心思想是一個物件有著唯一標識，表現為物件引用，封裝著隨時可變的屬性狀態，如果你改變了一個屬性的狀態，這個物件還是原來那個物件，就是物件引用沒有因為狀態的改變而改變，

② 初識vue3.0：新特性講解

1 vue3 新特性巡禮

1.1 效能提升

1.2 Composition API

1.3 其他新增特性

1.4 更好的 ts 支援

2 為什麼會有 vue3

1. 隨著功能的增長，複雜元件的程式碼變得難以維護

2. 隨著複雜度的上升，帶來的問題

mixin 的解決方案

mixin 的缺點

3. vue2 對於 ts 的支援非常有限

3 vue3 - ref 的妙用

4 更近一步 - reactive

5 vue3 響應式物件的新花樣

響應式原理

6 老瓶新酒 - 生命週期

在 setup 中使用的 hook 名稱和原來生命週期的對應關係

7 偵測變化 - watch

8 模組化開發 -- 滑鼠追蹤器

hooks > useMousePosition.ts

App.vue

優點

9 模組化難度上升 - useURLLoader

hooks > useURLLoader.ts

App.vue

10 模組化結合 typescript - 泛型改造

hooks > useURLLoader.ts

App.vue

11 Typescript 對 vue3 的加持

使用 defineComponent 包裹元件 + setup 函式引數

12 元件 Teleport - 瞬間移動

12.1 原始 modal 元件

1. components > Modal.vue

2. App.vue

3. public > index.html

4. 渲染結果

12.2 實現 modal 的開啟關閉

1. components > Modal.vue

2. App.vue

13 元件 Suspense - 非同步請求好幫手

13.1 簡單用法

1. components > AsyncShow.vue

2. App.vue

13.2 使用 async await

1. components > DogShow.vue

2. App.vue

13.3 Suspense 中的錯誤捕獲

14 Provide / Inject

14.1 父子元件傳值 -- prop

14.2 解決多層級傳值 -- Provide/Inject

1. provide -- 提供

2. inject -- 注入

3. 使用響應性

15 全域性 API 修改

15.1 入口檔案

1. vue2 的全域性配置

不足

2. vue3 的全域性配置

15.2 全域性配置 Vue.config -> app.config

15.3 全域性註冊類 API

15.4 行為擴充套件類

15.5 Global API Treeshaking

1. vue2

2. vue3

相關推薦

12.1 原始 `modal` 元件

12.2 實現 `modal` 的開啟關閉