Vue3快速上手

一、Vue3快速上手

(一) Vue3簡介

• 2020年9月18日，Vue.js釋出3.0版本，代号：One Piece（海賊王）
• 耗時2年多、2600+次送出、30+個RFC、600+次PR、99位貢獻者
• github上的tags位址：

  https://github.com/vuejs/vue-next/releases/tag/v3.0.0

(一) Vue3帶來了什麼

1. 性能的提升

• 打包大小減少41%
• 初次渲染快55%, 更新渲染快133%

• 記憶體減少54%

  …

2.源碼的更新

• 使用

  Proxy

  代替defineProperty實作響應式

• 重寫虛拟DOM的實作和Tree-Shaking

  …

3.擁抱TypeScript

• Vue3可以更好的支援

  TypeScript

4.新的特性

1. Composition API（組合API）😍
   • setup配置
   • ref與reactive
   • watch與watchEffect
   • provide與inject
   • …
2. 新的内置元件😍
   • Fragment
   • Teleport
   • Suspense
3. 其他改變😍
   • 新的生命周期鈎子
   • data 選項應始終被聲明為一個函數
   • 移除keyCode支援作為 v-on 的修飾符
   • …

一、建立Vue3.0工程

1.使用 vue-cli 建立

官方文檔：

https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 檢視@vue/cli版本，確定@vue/cli版本在4.5.0以上
vue --version
## 安裝或者更新你的@vue/cli
npm install -g @vue/cli
## 建立
vue create vue_test
## 啟動
cd vue_test
npm run serve
           

2.使用 vite 建立

官方文檔：

https://v3.cn.vuejs.org/guide/installation.html#vite

vite官網：

https://vitejs.cn

• 😥什麼是vite?—— 新一代前端建構工具😎。
• 優勢如下：
  • 開發環境中，無需打包操作，可快速的冷啟動。
  • 輕量快速的熱重載（HMR）。
  • 真正的按需編譯，不再等待整個應用編譯完成。
• 傳統建構 與 vite建構對比圖

  

## 建立工程
npm init [email protected] 
## 建立項目名
<project-name>
## 進入工程目錄
cd <project-name>
## 安裝依賴
npm install
## 運作
npm run dev
           

3. 分析工程結構

vue2的main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

vue3的main.js

//引入的不再是Vue構造函數了，引入的是一個名為createApp的工廠函數
import { createApp } from 'vue'
import App from './App.vue'

//建立應用執行個體對象——app(類似于之前Vue2中的vm，但app比vm更“輕”)
const app = createApp(App)

//挂載
app.mount('#app')
           

二、常用 Composition API

官方文檔:

https://v3.cn.vuejs.org/guide/composition-api-introduction.html

1. 拉開序幕的setup

1. 了解：Vue3.0中一個新的配置項，值為一個

   函數

   。
2. setup是所有

   Composition API（組合API）

   “ 表演的舞台 ”。
3. 元件中所用到的：資料、方法等等，均要配置在setup中。
4. setup函數的兩種傳回值：
   1. 若傳回一個對象，則對象中的屬性、方法, 在模闆中均可以直接使用。（重點關注！）
   2. 若傳回一個渲染函數：則可以自定義渲染内容。（了解）
5. 注意點：
   1. 盡量不要與Vue2.x配置混用
      • Vue2.x配置（data、methos、computed…）中

        可以通路到

        setup中的屬性、方法。
      • 但在setup中

        不能通路到

        Vue2.x配置（data、methos、computed…）。
      • 如果有重名, setup優先。
   2. setup不能是一個async函數，因為傳回值不再是return的對象, 而是promise, 模闆看不到return對象中的屬性。（後期也可以傳回一個Promise執行個體，但需要Suspense和異步元件的配合）

setup函數的兩種傳回值

<template>
	<div>
		<h1>一個人的資訊</h1>
		<h2>姓名：{{ name }}</h2>
		<h2>年齡：{{ age }}</h2>
		<button @click="sayHello">說話</button>
	</div>
</template>

<script>
// import {h} from 'vue'
export default {
	name: 'App',
	//此處隻是測試一下setup，暫時不考慮響應式的問題。
	// setup:function(){}
	setup() {
		//資料
		let name = '張三'
		let age = 18

		//方法
		function sayHello() {
			alert(`我叫${name}，我${age}歲了，你好啊！`)
		}

		//傳回一個對象（常用）
		return {
			name, age, sayHello,
		}

		//傳回一個函數（渲染函數）
		// return ()=> h('h1','尚矽谷')
	}
}
</script>
           

注意

<template>
	<div>
		<button @click="sayHello">說話(Vue3所配置的——sayHello)</button> <br>
		<button @click="sayWelcome">說話(Vue2所配置的——sayWelcome)</button> <br>
		<button @click="test1">測試一下在Vue2的配置中去讀取Vue3中的資料、方法</button> <br>
		<button @click="test2">測試一下在Vue3的setup配置中去讀取Vue2中的資料、方法</button> <br>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			name: '張三',
			age: 18
		}
	},
	methods: {
		sayWelcome() {
			alert('歡迎來到尚矽谷學習')
		},
		test1() {
			console.log(this.name)
			console.log(this.age)
			console.log(this.sayHello)
			console.log(this.sayWelcome)
		}
	},
	//此處隻是測試一下setup，暫時不考慮響應式的問題。
	setup() {
		//資料
		let name = '李四'
		let age = 20

		//方法
		function sayHello() {
			alert(`我叫${name}，我${age}歲了，你好啊！`)
		}
		function test2() {
			console.log(name)
			console.log(age)
			console.log(sayHello)
			console.log(this.sayWelcome)
		}

		//傳回一個對象（常用）
		return {
			name, age, sayHello, test2
		}
	}
}
</script>
           

2.ref函數

• 作用: 定義一個響應式的資料
• 文法:

  const xxx = ref(initValue)

  • 建立一個包含響應式資料的引用對象（reference對象，簡稱ref對象）。
  • JS中操作資料：

    xxx.value

  • 模闆中讀取資料: 不需要.value，直接：

    <div>{{xxx}}</div>

• 備注：
  • 接收的資料可以是：基本類型、也可以是對象類型。
  • 基本類型的資料：響應式依然是靠

    Object.defineProperty()

    的

    get

    與

    set

    完成的。
  • 對象類型的資料：内部 “ 求助 ” 了Vue3.0中的一個新函數——

    reactive

    函數。

<template>
	<div>
		<h1>一個人的資訊</h1>
		<h2>姓名：{{ name }}</h2>
		<h2>年齡：{{ age }}</h2>
		<h3>工作種類：{{ job.type }}</h3>
		<h3>工作薪水：{{ job.salary }}</h3>
		<button @click="changeInfo">修改人的資訊</button>
	</div>
</template>

<script>
import { ref } from 'vue'
export default {
	name: 'App',
	setup() {
		//資料
		let name = ref('張三')
		let age = ref(18)
		let job = ref({
			type: '前端工程師',
			salary: '30K'
		})

		//方法
		function changeInfo() {
			name.value = '李四'
			age.value = 48
			job.value.type = 'Java工程師'
			job.value.salary = '60K'
			console.log(name,age)
			console.log(job.value)
		}

		//傳回一個對象（常用）
		return {
			name,age,job,changeInfo
		}
	}
}
</script>
           

3.reactive函數

• 作用: 定義一個對象類型的響應式資料（基本類型不要用它，要用

  ref

  函數）
• 文法：

  const 代理對象= reactive(源對象)

  接收一個對象（或數組），傳回一個代理對象（Proxy的執行個體對象，簡稱proxy對象）
• reactive定義的響應式資料是“深層次的”。
• 内部基于 ES6 的 Proxy 實作，通過代理對象操作源對象内部資料進行操作。

<template>
	<div>
		<h1>一個人的資訊</h1>
		<h2>姓名：{{ person.name }}</h2>
		<h2>年齡：{{ person.age }}</h2>
		<h3>工作種類：{{ person.job.type }}</h3>
		<h3>工作薪水：{{ person.job.salary }}</h3>
		<h3>愛好：{{ person.hobby }}</h3>
		<h3>測試的資料c：{{ person.job.a.b.c }}</h3>
		<button @click="changeInfo">修改人的資訊</button>
	</div>
</template>

<script>
import { reactive } from 'vue'
export default {
	name: 'App',
	setup() {
		//資料
		let person = reactive({
			name: '張三',
			age: 18,
			job: {
				type: '前端工程師',
				salary: '30K',
				a: {
					b: {
						c: 666
					}
				}
			},
			hobby: ['抽煙', '喝酒', '燙頭']
		})

		//方法
		function changeInfo() {
			person.name = '李四'
			person.age = 48
			person.job.type = 'Java工程師'
			person.job.salary = '60K'
			person.job.a.b.c = 999
			person.hobby[0] = '學習'
			console.log('person', person);
		}

		//傳回一個對象（常用）
		return {
			person,changeInfo
		}
	}
}
</script>
           

4.Vue3.0中的響應式原理

4.1 vue2.x的響應式

• 實作原理：
  • 對象類型：通過

    Object.defineProperty()

    對屬性的讀取、修改進行攔截（資料劫持）。
  • 數組類型：通過重寫更新數組的一系列方法來實作攔截。（對數組的變更方法進行了包裹）。

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

• 存在問題：
  • 新增屬性、删除屬性, 界面不會更新。
  • 直接通過下标修改數組, 界面不會自動更新。

4.2 Vue3.0的響應式

• 實作原理:
  • 通過

    Proxy（代理）

    : 攔截對象中任意屬性的變化, 包括：屬性值的讀寫、屬性的添加、屬性的删除等。
  • 通過

    Reflect（反射）

    : 對源對象的屬性進行操作。
  • MDN文檔中描述的Proxy與Reflect：
    • Proxy：

      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    • Reflect：

      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

new Proxy(data, {
      	// 攔截讀取屬性值
          get (target, prop) {
          	return Reflect.get(target, prop)
          },
          // 攔截設定屬性值或添加新屬性
          set (target, prop, value) {
          	return Reflect.set(target, prop, value)
          },
          // 攔截删除屬性
          deleteProperty (target, prop) {
          	return Reflect.deleteProperty(target, prop)
          }
      })
      
      proxy.name = 'tom'   
           

模拟Vue2中實作響應式

//源資料
			let person = {
				name:'張三',
				age:18
			}

			//模拟Vue2中實作響應式
			let p = {}
			Object.defineProperty(p,'name',{
				configurable:true,
				get(){ //有人讀取name時調用
					return person.name
				},
				set(value){ //有人修改name時調用
					console.log('有人修改了name屬性，我發現了，我要去更新界面！')
					person.name = value
				}
			})
			Object.defineProperty(p,'age',{
				get(){ //有人讀取age時調用
					return person.age
				},
				set(value){ //有人修改age時調用
					console.log('有人修改了age屬性，我發現了，我要去更新界面！')
					person.age = value
				}
			})
           

如果我們想要修改對象中的值

• 讀寫操作

  

• 修改操作

  

• 删除操作

  

通過Object.defineProperty去操作

let obj = {a:1,b:2}
			//通過Object.defineProperty去操作
			 try {
				Object.defineProperty(obj,'c',{
					get(){
						return 3
					}
				})
				Object.defineProperty(obj,'c',{
					get(){
						return 4
					}
				})
			} catch (error) {
				console.log(error)
			} 
           

通過Reflect.defineProperty去操作

let obj = {a:1,b:2}
			//通過Reflect.defineProperty去操作
			const x1 = Reflect.defineProperty(obj,'c',{
				get(){
					return 3
				}
			})
			console.log(x1)
			
			const x2 = Reflect.defineProperty(obj,'c',{
				get(){
					return 4
				}
			}) 
			if(x2){
				console.log('某某某操作成功了！')
			}else{
				console.log('某某某操作失敗了！')
			} 
           

模拟Vue3中實作響應式

//源資料
			let person = {
				name:'張三',
				age:18
			}
			//模拟Vue3中實作響應式
			const p = new Proxy(person,{
				//有人讀取p的某個屬性時調用
				get(target,propName){
					console.log(`有人讀取了p身上的${propName}屬性`)
					return Reflect.get(target,propName)
				},
				//有人修改p的某個屬性、或給p追加某個屬性時調用
				set(target,propName,value){
					console.log(`有人修改了p身上的${propName}屬性，我要去更新界面了！`)
					Reflect.set(target,propName,value)
				},
				//有人删除p的某個屬性時調用
				deleteProperty(target,propName){
					console.log(`有人删除了p身上的${propName}屬性，我要去更新界面了！`)
					return Reflect.deleteProperty(target,propName)
				}
			})
           

5.reactive對比ref

• 從定義資料角度對比：🥰
  • ref用來定義：基本類型資料。
  • reactive用來定義：對象（或數組）類型資料。
  • 備注：ref也可以用來定義對象（或數組）類型資料, 它内部會自動通過

    reactive

    轉為代理對象。
• 從原理角度對比：🥰
  • ref通過

    Object.defineProperty()

    的

    get

    與

    set

    來實作響應式（資料劫持）。
  • reactive通過使用

    Proxy

    來實作響應式（資料劫持）, 并通過

    Reflect

    操作

    源對象

    内部的資料。
• 從使用角度對比：🥰
  • ref定義的資料：操作資料需要

    .value

    ，讀取資料時模闆中直接讀取不需要

    .value

    。
  • reactive定義的資料：操作資料與讀取資料：均不需要

    .value

    。

6.setup的兩個注意點

• setup執行的時機
  • 在

    beforeCreate

    之前執行一次，

    this是undefined

    。
• setup的參數
  • props：值為對象，包含：元件外部傳遞過來，且元件内部聲明接收了的屬性。
  • context：上下文對象
    • attrs: 值為對象，包含：元件外部傳遞過來，但沒有在props配置中聲明的屬性, 相當于

      this.$attrs

      。
    • slots: 收到的插槽内容, 相當于

      this.$slots

      。
    • emit: 分發自定義事件的函數, 相當于

      this.$emit

      。

vue2中的$attrs和$slots

• 父元件給子元件傳值時，子組價沒有通過props接受，接受的值在 a t t r s 中。插槽定義的值，存儲到 attrs中。插槽定義的值，存儲到 attrs中。插槽定義的值，存儲到slots中
• 父元件：App元件

<template>
  <div class="app">
    <h1>我的是Vue2寫的效果</h1>
    <Demo msg="你好啊" school="尚矽谷">
      <template slot="test1">
        <span>青青子衿</span>
      </template>
      <template slot="test2">
        <span>悠悠我心</span>
      </template>
    </Demo>
  </div>
</template>

<script>
import Demo from './components/Demo.vue';
export default {
  components: {
    Demo
  }
}
</script>

<style scoped>
.app {
  background-color: skyblue;
  padding: 10px;
}
</style>
           

• 子元件：Demo元件

<template>
  <div class="demo">
    <h2>我是Demo組價</h2>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this);
  }
}
</script>

<style scoped>
.demo {
  background-color: orange;
  padding: 10px;
}
</style>
           

vue3說明

• 父元件：App元件

<template>
	<Demo @hello="showHelloMsg" msg="你好啊" school="尚矽谷">
		<template v-slot:qwe>
			<span>尚矽谷</span>
		</template>
		<template v-slot:asd>
			<span>尚矽谷</span>
		</template>
	</Demo>
</template>

<script>
	import Demo from './components/Demo.vue'
	export default {
		name: 'App',
		components:{Demo},
		setup(){
			function showHelloMsg(value){
				alert(`你好啊，你觸發了hello事件，我收到的參數是:${value}！`)
			}
			return {
				showHelloMsg
			}
		}
	}
</script>
           

• 子元件：Demo元件

<template>
	<div>
		<h1>一個人的資訊</h1>
		<h2>姓名：{{ person.name }}</h2>
		<h2>年齡：{{ person.age }}</h2>
		<button @click="test">測試觸發一下Demo元件的Hello事件</button>
	</div>
</template>

<script>
import { reactive } from 'vue'
export default {
	name: 'Demo',
	props: ['msg', 'school'],
	emits: ['hello'],
	setup(props, context) {
		console.log('---setup(props)',props)
		console.log('---setup(context)',context)
		console.log('---setup(context.attrs)',context.attrs) //相當與Vue2中的$attrs
		console.log('---setup(context.emit)',context.emit) //觸發自定義事件的。
		console.log('---setup(context.slots)', context.slots) //插槽
		//資料
		let person = reactive({
			name: '張三',
			age: 18
		})

		//方法
		function test() {
			context.emit('hello', 666)
		}

		//傳回一個對象（常用）
		return {
			person,test
		}
	}
}
</script>
           

7.計算屬性與監視

1. computed函數

• 與Vue2.x中computed配置功能一緻
• 寫法

  import {computed} from 'vue'
  
  setup(){
      ...
  	//計算屬性——簡寫
      let fullName = computed(()=>{
          return person.firstName + '-' + person.lastName
      })
      //計算屬性——完整
      let fullName = computed({
          get(){
              return person.firstName + '-' + person.lastName
          },
          set(value){
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
          }
      })
  }
             

名字案例

• 父元件：App元件

<template>
	<Demo/>
</template>

<script>
	import Demo from './components/Demo.vue'
	export default {
		name: 'App',
		components:{Demo},
	}
</script>
           

• 子元件：Demo元件

<template>
	<div>
		<h1>一個人的資訊</h1>
		姓：<input type="text" v-model="person.firstName"><br>
		名：<input type="text" v-model="person.lastName"><br>
		<span>全名：{{ person.fullName }}</span><br>
		全名：<input type="text" v-model="person.fullName">
	</div>
</template>

<script>
import { reactive, computed } from 'vue'
export default {
	name: 'Demo',
	setup() {
		//資料
		let person = reactive({
			firstName: '張',
			lastName: '三'
		})
		//計算屬性——簡寫（沒有考慮計算屬性被修改的情況）
		/* person.fullName = computed(()=>{
			return person.firstName + '-' + person.lastName
		}) */

		//計算屬性——完整寫法（考慮讀和寫）
		person.fullName = computed({
			get() {
				return person.firstName + '-' + person.lastName
			},
			set(value) {
				const nameArr = value.split('-')
				person.firstName = nameArr[0]
				person.lastName = nameArr[1]
			}
		})

		//傳回一個對象（常用）
		return {
			person
		}
	}
}
</script>
           

2. watch函數

• 與Vue2.x中watch配置功能一緻
• 兩個小“坑”：
  • 監視

    reactive

    定義的響應式資料時：

    oldValue

    無法正确擷取、強制開啟了

    深度監視

    （deep配置失效）。
  • 監視reactive定義的響應式資料中某個屬性時：

    deep配置有效。

Vue3中的watch

• 情況一：監視ref定義的響應式資料🤣

watch(sum,(newValue,oldValue)=>{
  	console.log('sum變化了',newValue,oldValue)
  },{immediate:true})
           

• 情況二：監視多個ref定義的響應式資料🤣

watch([sum,msg],(newValue,oldValue)=>{
  	console.log('sum或msg變化了',newValue,oldValue)
  }) 
           

• 情況三：監視reactive定義的響應式資料🤣

• 若watch監視的是reactive定義的響應式資料，則無法正确獲得oldValue！！
• 若watch監視的是reactive定義的響應式資料，則強制開啟了深度監視

watch(person,(newValue,oldValue)=>{
  	console.log('person變化了',newValue,oldValue)
  },{immediate:true,deep:false}) //此處的deep配置不再奏效
           

• 情況四：監視reactive定義的響應式資料中的某個屬性🤣

watch(()=>person.job,(newValue,oldValue)=>{
  	console.log('person的job變化了',newValue,oldValue)
  },{immediate:true,deep:true}) 
           

• 情況五：監視reactive定義的響應式資料中的某些屬性🤣

watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
  	console.log('person的job變化了',newValue,oldValue)
  },{immediate:true,deep:true})
           

• 特殊情況😅

watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job變化了',newValue,oldValue)
  },{deep:true}) //此處由于監視的是reactive素定義的對象中的某個屬性，是以deep配置有效
           

Vue2中的watch

<template>
  <div>
    <h2>目前求和為：{{ sum }}</h2>
    <button @click="sum++">點我+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 0
    }
  },
  watch: {
    // 簡單寫法
    /* sum(newVal, oldVal) {
      console.log('sum的值變化了:', newVal, oldVal);
    } */

    sum: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        console.log('sum的值變化了:', newVal, oldVal);
      }
    }
  }
}
</script>
           

watch時value的的問題

setup() {
		//資料
		let sum = ref(0)
		let msg = ref('你好啊')
		let person = ref({
			name: '張三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		})
		
		watch(sum, (newValue, oldValue) => {
			console.log('sum的值變化了', newValue, oldValue)
		})

		watch(person, (newValue, oldValue) => {
			console.log('person的值變化了', newValue, oldValue)
		}, { deep: true })
           

3.watchEffect函數

• watch的套路是

  ：既要指明監視的屬性，也要指明監視的回調。

• watchEffect的套路是

  ：不用指明監視哪個屬性，監視的回調中用到哪個屬性，那就監視哪個屬性。

• watchEffect有點像computed

  ：
  • 但computed注重的計算出來的值（回調函數的傳回值），是以必須要寫傳回值。
  • 而watchEffect更注重的是過程（回調函數的函數體），是以不用寫傳回值。

//watchEffect所指定的回調中用到的資料隻要發生變化，則直接重新執行回調。
  watchEffect(()=>{
      const x1 = sum.value
      const x2 = person.age
      console.log('watchEffect配置的回調執行了')
  })
           

8.生命周期

• vue2.x的生命周期

• vue3.0的生命周期

  

• Vue3.0中可以繼續使用Vue2.x中的生命周期鈎子，但有有兩個被更名：

  • beforeDestroy

    改名為

    beforeUnmount

  • destroyed

    改名為

    unmounted

• Vue3.0也提供了 Composition API 形式的生命周期鈎子，與Vue2.x中鈎子對應關系如下：

  • beforeCreate

    ===>

    setup()

  • created

    =======>

    setup()

  • beforeMount

    ===>

    onBeforeMount

  • mounted

    =======>

    onMounted

  • beforeUpdate

    ===>

    onBeforeUpdate

  • updated

    =======>

    onUpdated

  • beforeUnmount

    ==>

    onBeforeUnmount

  • unmounted

    =====>

    onUnmounted

9.自定義hook函數

• 什麼是hook？——

  本質是一個函數，把setup函數中使用的Composition API進行了封裝。

• 類似于vue2.x中的mixin。
• 自定義hook的優勢: 複用代碼, 讓setup中的

  邏輯更清楚易懂

  。

10.toRef

• 作用：建立一個 ref 對象，其value值指向另一個對象中的某個屬性。
• 文法：

  const name = toRef(person,'name')

• 應用: 要将響應式對象中的某個屬性單獨提供給外部使用時。
• 擴充：

  toRefs

  與

  toRef

  功能一緻，但可以批量建立多個 ref 對象，文法：

  toRefs(person)

三、其它 Composition API

1.shallowReactive 與 shallowRef

• shallowReactive：隻處理

  對象最外層屬性

  的響應式（淺響應式）。
• shallowRef：隻處理

  基本資料類型

  的響應式, 不進行對象的響應式處理。
• 什麼時候使用?
  • 如果有一個對象資料，結構比較深, 但變化時隻是外層屬性變化 ===> shallowReactive。
  • 如果有一個對象資料，後續功能不會修改該對象中的屬性，而是生新的對象來替換 ===> shallowRef。

2.readonly 與 shallowReadonly

• readonly: 讓一個響應式資料變為隻讀的

  （深隻讀）

  。
• shallowReadonly：讓一個響應式資料變為隻讀的

  （淺隻讀）

  。
• 應用場景:

  不希望資料被修改時。

3.toRaw 與 markRaw

• toRaw：
  • 作用：将一個由

    reactive

    生成的響應式對象轉為普通對象。
  • 使用場景：用于讀取響應式對象對應的普通對象，對這個普通對象的所有操作，不會引起頁面更新。
• markRaw：
  • 作用：标記一個對象，使其永遠不會再成為響應式對象。
  • 應用場景:
    1. 有些值不應被設定為響應式的，例如複雜的第三方類庫等。
    2. 當渲染具有不可變資料源的大清單時，跳過響應式轉換可以提高性能。

4.customRef

• 作用：建立一個自定義的 ref，并對其依賴項跟蹤和更新觸發進行顯式控制。
• 實作防抖效果：

<template>
  	<input type="text" v-model="keyword">
  	<h3>{{keyword}}</h3>
  </template>
  
  <script>
  	import {ref,customRef} from 'vue'
  	export default {
  		name:'Demo',
  		setup(){
  			// let keyword = ref('hello') //使用Vue準備好的内置ref
  			//自定義一個myRef
  			function myRef(value,delay){
  				let timer
  				//通過customRef去實作自定義
  				return customRef((track,trigger)=>{
  					return{
  						get(){
  							track() //告訴Vue這個value值是需要被“追蹤”的
  							return value
  						},
  						set(newValue){
  							clearTimeout(timer)
  							timer = setTimeout(()=>{
  								value = newValue
  								trigger() //告訴Vue去更新界面
  							},delay)
  						}
  					}
  				})
  			}
  			let keyword = myRef('hello',500) //使用程式員自定義的ref
  			return {
  				keyword
  			}
  		}
  	}
  </script>
           

5.provide 與 inject

• 作用：實作祖與後代元件間通信
• 套路：父元件有一個

  provide

  選項來提供資料，後代元件有一個

  inject

  選項來開始使用這些資料
• 具體寫法：
  1. 祖元件中：

     setup(){
     	......
         let car = reactive({name:'奔馳',price:'40萬'})
         provide('car',car)
         ......
     }
                

  2. 後代元件中：

     setup(props,context){
     	......
         const car = inject('car')
         return {car}
     	......
     }
                

6.響應式資料的判斷

• isRef: 檢查一個值是否為一個 ref 對象
• isReactive: 檢查一個對象是否是由

  reactive

  建立的響應式代理
• isReadonly: 檢查一個對象是否是由

  readonly

  建立的隻讀代理
• isProxy: 檢查一個對象是否是由

  reactive

  或者

  readonly

  方法建立的代理

四、Composition API 的優勢

1.Options API 存在的問題

使用傳統OptionsAPI中，新增或者修改一個需求，就需要分别在data，methods，computed裡修改 。

2.Composition API 的優勢

• 我們可以更加優雅的組織我們的代碼，函數。讓相關功能的代碼更加有序的組織在一起。

五、新的元件

1.Fragment

• 在Vue2中: 元件必須有一個根标簽
• 在Vue3中: 元件可以沒有根标簽, 内部會将多個标簽包含在一個Fragment虛拟元素中
• 好處: 減少标簽層級, 減小記憶體占用

2.Teleport

• 什麼是Teleport？——

  Teleport

  是一種能夠将我們的元件html結構移動到指定位置的技術。

  <teleport to="移動位置">
  	<div v-if="isShow" class="mask">
  		<div class="dialog">
  			<h3>我是一個彈窗</h3>
  			<button @click="isShow = false">關閉彈窗</button>
  		</div>
  	</div>
  </teleport>
             

3.Suspense

• 等待異步元件時渲染一些額外内容，讓應用有更好的使用者體驗
• 使用步驟：
  • 異步引入元件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
               

  • 使用

    Suspense

    包裹元件，并配置好

    default

    與

    fallback

    <template>
    	<div class="app">
    		<h3>我是App元件</h3>
    		<Suspense>
    			<template v-slot:default>
    				<Child/>
    			</template>
    			<template v-slot:fallback>
    				<h3>加載中.....</h3>
    			</template>
    		</Suspense>
    	</div>
    </template>
               

六、其他

1.全局API的轉移

• Vue 2.x 有許多全局 API 和配置。
  • 例如：注冊全局元件、注冊全局指令等。

    //注冊全局元件
    Vue.component('MyButton', {
      data: () => ({
        count: 0
      }),
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    
    //注冊全局指令
    Vue.directive('focus', {
      inserted: el => el.focus()
    }
               

• Vue3.0中對這些API做出了調整：
  • 将全局的API，即：

    Vue.xxx

    調整到應用執行個體（

    app

    ）上

    2.x 全局 API（ Vue ）	3.x 執行個體 API ( app )
    Vue.config.xxxx	app.config.xxxx
    Vue.config.productionTip	移除
    Vue.component	app.component
    Vue.directive	app.directive
    Vue.mixin	app.mixin
    Vue.use	app.use
    Vue.prototype	app.config.globalProperties

2.其他改變

• data選項應始終被聲明為一個函數。
• 過度類名的更改：
  • Vue2.x寫法

    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-leave,
    .v-enter-to {
      opacity: 1;
    }
               

  • Vue3.x寫法

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }
    
    .v-leave-from,
    .v-enter-to {
      opacity: 1;
    }
               

• 移除keyCode作為 v-on 的修飾符，同時也不再支援

  config.keyCodes

• 移除

  v-on.native

  修飾符
  • 父元件中綁定事件

    <my-component
      v-on:close="handleComponentEvent"
      v-on:click="handleNativeClickEvent"
    />
               

  • 子元件中聲明自定義事件

    <script>
      export default {
        emits: ['close']
      }
    </script>
               

• 移除過濾器（filter）

  過濾器雖然這看起來很友善，但它需要一個自定義文法，打破大括号内表達式是 “隻是 JavaScript” 的假設，這不僅有學習成本，而且有實作成本！建議用方法調用或計算屬性去替換過濾器。

• …