前言
記錄一下筆記,給各位小夥伴們分享一些常用的 Vue3 新特性及哪些方法發生了變更。
我這裏只寫一些常用的,更多請看Vue3官網這裏
組件v-model支持參數
在Vue2.x時,我們要想給子組件傳值,還得單獨傳入。Vue3.x直接以v-model:xxx
形式傳入參數,並且配合修飾符.sync進行數據同步更新。
App.vue
<template>
{{title}}
<Input v-model:title="title" />
</template>
<script>
import Input from "./components/Input"
export default {
name: 'App',
components: {
Input
},
data() {
return {
title: "蛙人",
}
},
}
</script>
Input.vue
<template>
<div class="Input">
<input type="text" @input="first" :value="title">
</div>
</template>
<script>
export default {
name: 'Input',
props: {
title: {
default: () => "蛙人"
}
},
methods: {
first(e) {
this.$emit("update:title", e.target.value)
},
},
}
</script>
效果
組件支持多個v-model
在Vue3.x中支持在單個組件上可以創建多個v-model綁定。
App.vue
<template>
{{title}}
{{name}}
<Input v-model:title="title" v-model:name="name"/>
</template>
<script>
import Input from "./components/Input"
export default {
name: 'App',
components: {
Input,
},
data() {
return {
title: "蛙人",
name: "www"
}
},
}
</script>
Input.vue
<template>
<div class="Input">
<input type="text" @input="first" :value="title">
<input type="text" @input="last" :value="name">
</div>
</template>
<script>
export default {
name: 'Input',
props: {
title: {
default: () => "蛙人"
},
name: {
default: () => "前端娛樂圈"
}
},
methods: {
first(e) {
this.$emit("update:title", e.target.value)
},
last(e) {
this.$emit("update:name", e.target.value)
}
}
}
</script>
效果
Setup
setup
函數是一個新的組件選項。作爲在組件內使用Composition Api
的入口點。下面我們分爲4個方面來講解它
-
調用時機 -
this指向 -
函數參數 -
返回值
調用時機
創建組件實例,然後初始化props
,緊接着就調用setup
函數。從生命週期的角度來看,它會在beforeCreate
之前執行。也就是創建組件先執行setup
、beforeCreate
、create
。
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
setup() {
console.log("hey 蛙人")
}
}
</script>
this指向
由於不能在setup
函數中使用data
、methods
,爲了避免使用Vue
出錯,所以把setup
函數中this
修改爲了undefined
。
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
setup() {
console.log(this); // undefined
}
}
</script>
函數參數
-
props -
context
props
接收組件傳遞過來的所有數據,並且都是響應式的。
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
props: {
title: {
type: String
}
},
setup(props) {
console.log(props.title)
}
}
</script>
注意一點,props數據不能使用解構,否則響應式數據失效
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
props: {
title: {
type: String
}
},
setup({ title }) {
console.log(title) // 這裏響應式數據將失效
}
}
</script>
context
該參數提供一個上下文對象,從原來的2.x中選擇性的暴露了一些屬性。
-
attrs -
slots -
emit
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
props: {
title: {
type: String
}
},
setup(props, { attrs, slots, emit } ) {
console.log(attrs)
}
}
</script>
上面,attrs
和slots
都是內部組件實例上對應項的代理,可以確保在更新後仍然還是最新的值。所以這裏可以使用解構語法。
返回值
可以將setup
函數返回值渲染到頁面上。但前提是,setup
返回值必須是一個對象,否則返回其它值則渲染無效。
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
props: {
title: {
type: String
}
},
setup() {
const name = "蛙人"
return {
name
}
}
}
</script>
Reactive
該方法接收一個參數{}
創建一個響應式對象。跟Vue2.x的Vue.observable
一樣。如果該參數不是對象的話,也可以渲染到模板上,但不是響應式的數據。
<template>
<div class="test">
姓名: {{ name.value }}
{{ test() }}
</div>
</template>
<script>
import { reactive } from "vue"
export default {
name: 'test',
data() {
return {
}
},
setup() {
let name = reactive({value: "蛙人"})
function test() {
name.value = "abc"; // 該方法測試響應式數據,可以看到執行完該方法視圖也會發生改變
}
return {
name,
test
}
}
}
</script>
Ref
該方法接收一個參數,可以是單個值,也可以是一個對象,並且都是響應式的數據。當傳入一個對象時{}
,內部將調用reactive
方法進行轉換爲響應式數據。返回值裏面帶有.value
屬性取值,當使用模板渲染的時候可省去.value
。
<template>
<div class="test">
姓名: {{ name }}
{{ test() }}
</div>
</template>
<script>
import { ref } from "vue"
export default {
name: 'test',
data() {
return {
}
},
setup() {
let name = ref("蛙人")
function test() {
name.value = "abc"; // 只是渲染模板可以省略.value,但是在邏輯中還得寫哦
}
return {
name,
test
}
}
}
</script>
Computed
該方法可以傳入一個函數,默認該函數就是getter
,不管getter
返回值爲一個ref
響應式數據還是一個普通變量
,數據都是只讀
不能改變。
<script>
import { ref, computed } from "vue"
export default {
name: 'test',
setup() {
let name = ref("蛙人")
let test = computed(() => name.value);
test.value = "123" // 修改無效,只能只讀
}
}
</script>
傳入一個對象set
和get
函數方法,這樣就可以修改啦
<script>
import { ref, computed } from "vue"
export default {
name: 'test',
setup() {
let name = ref("蛙人")
let test = computed({
get() {
return name.value;
},
set(val) {
return name.value = val;
}
});
test.value = "123"
}
}
</script>
Readonly
該方法接收傳入一個對象,默認是隻讀功能,是深層對象只讀,不管嵌套多少層的屬性都是隻讀狀態。
<script>
import { readonly } from "vue"
export default {
name: 'test',
setup() {
let obj = {
name: "蛙人",
sex: "male",
prodution: {
proName: "音響"
}
}
let only = readonly(obj)
only.name = "前端娛樂圈" // 修改無效
only.prodution.proName = "歡迎關注" // 修改無效
console.log(only)
}
}
</script>
WatchEffect
該方法接收一個函數並且立即執行,並當該函數裏的變量變更時,重新執行該函數。該方法無法獲取到原值,只能是改變之後的值。
如果要監聽哪個值,需要在該函數裏寫出來,否則監聽無效
import { ref, watchEffect } from "vue"
export default {
name: 'test',
setup() {
let name = ref("蛙人");
let age = ref(23);
watchEffect(() => {
name.value; // 監聽name
age.value; // 監聽age
console.log(name.value)
console.log(age.value)
})
setTimeout(() => {
name.value = "前端娛樂圈"
}, 5000)
setTimeout(() => {
age.value = 18
}, 1000)
}
}
</script>
取消監聽
有時候我們想在觸發一定的條件後取消監聽。這時可以執行watchEffect
的返回值。
import { ref, watchEffect } from "vue"
export default {
name: 'test',
setup() {
let name = ref("蛙人");
let age = ref(23);
let stop = watchEffect(() => {
name.value; // 監聽name
age.value; // 監聽age
console.log(name.value)
console.log(age.value)
})
setTimeout(() => {
name.value = "前端娛樂圈"
}, 5000)
setTimeout(() => {
age.value = 18;
setTimeout(stop, 300)
}, 1000)
}
}
</script>
Watch
watch
等同於Vue2.x中的this.$watch
,watch
需要監聽特定數據,默認情況是懶執行,也就是隻有當數據發生變化時才執行第二個參數函數。
對比WatchEffect
,Watch
允許我們
-
懶執行函數 -
更明確哪些狀態改變觸發監聽器 -
可以監聽獲取到變化前後的值
監聽單個值
<script>
import { ref, watch } from "vue"
export default {
name: 'test',
setup() {
let name = ref("蛙人");
watch(name, (newVal, oldVal) => {
console.log(newVal, oldVal) // 前端娛樂圈, 蛙人
})
setTimeout(() => {
name.value = "前端娛樂圈"
}, 1000)
}
}
</script>
監聽多個值
監聽多個值,返回的是一個數組對象。
<script>
import { ref, watch } from "vue"
export default {
name: 'test',
setup() {
let name = ref("蛙人");
let age = ref(23);
watch([name, age], (newVal, oldVal) => {
console.log(newVal, oldVal) // ["前端娛樂圈", 18], ["蛙人", 23]
})
setTimeout(() => {
name.value = "前端娛樂圈"
age.value = 18
}, 1000)
}
}
</script>
生命週期系列
在Vue3.X也可以在setup
函數下使用生命週期,這些鉤子函數寫法跟之前的生命週期寫法不同。
注意:這些生命週期寫法只能在
setup
函數下使用,在其它地方使用則會報錯。
與Vue2.x版本生命週期相對應的組合式Api
-
beforeCreate --> setup -
created --> setup -
beforeMount --> onBeforeMount -
mounted --> onMounted -
beforeUpdate --> onBeforeUpdate -
updated --> onUpdated -
beforeDestroy --> onBeforeUnmount -
destroyed --> onUnmount
下面我們來看一下這些鉤子的寫法。鉤子函數裏面是一個回調函數。
<script>
import { onMounted, onUpdated, onUnmounted } from "vue"
export default {
name: 'test',
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
}
}
</script>
Provide && Inject
該方法和Vue2.x的 provide
、inject
一樣的。但是Vue3新特性這倆方法只能在setup
中使用。
-
Provide:接收2個參數,第一個 key
值,第二個value
值,進行傳遞 -
Inject:接收2個參數,第一個是 provide
的key
值,默認第二個參數可選,可以設置默認值(當找不到key值,設置一個默認值)
App.vue
<script>
import test from "./components/test"
import { provide, ref } from "vue"
export default {
name: 'App',
components: {
test
},
setup() {
let name = ref("蛙人")
provide("name", name) // 傳入一個響應式數據
},
}
</script>
test.vue
<template>
{{ NAME }}
</template>
<script>
import { inject } from "vue"
export default {
name: 'test',
setup() {
let NAME = inject("name")
console.log(NAME) // 蛙人
let title = inject("key", 123)
console.log(title) // 這時就會觸發默認值,因爲這裏找不到這個key值
return {
NAME
}
}
}
</script>
Refs
該方法相當於Vue2.x的refs
一樣獲取元素,那麼在setup
中配合使用ref
對象進行獲取
<template>
<div class="test">
<p ref="el">123</p>
</div>
</template>
<script>
import { ref, onMounted } from "vue"
export default {
name: 'test',
setup() {
let el = ref(null)
onMounted(() => {
console.log(el) // p標籤元素
})
return {
el
}
}
}
</script>
isReadonly
用於檢測該數據是不是可讀數據。返回一個Boolean
類型。
<script>
import { isReadonly, readonly} from "vue"
export default {
name: 'test',
setup() {
let test = readonly({name: "蛙人"})
console.log(isReadonly(test)) // true
let test2 = readonly("蛙人")
console.log(isReadonly(test2)) // false, 這不是一個只讀數據
}
}
</script>
isRef
用於檢測該數據是不是ref響應式數據。返回一個Boolean
類型。
<script>
import { isRef, ref } from "vue"
export default {
name: 'test',
setup() {
let test = ref("公衆號:前端娛樂圈")
console.log(isRef(test)) // true
}
}
</script>
isReactive
用於檢測該數據是不是reacttive
響應式數據。返回一個Boolean
類型。
<script>
import { isReactive, reactive } from "vue"
export default {
name: 'test',
setup() {
let test = reactive({name: "蛙人"})
console.log(isReactive(test)) // true
let test2 = reactive("蛙人")
console.log(isReactive(test2)) // false, 這不是一個響應式數據
}
}
</script>
移除過濾器filters
在Vue3.x中移除過濾器,不在支持。建議使用computed
去替代。貼一個官網例子
<template>
<h1>Bank Account Balance</h1>
<p>{{ accountInUSD }}</p>
</template>
<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
computed: {
accountInUSD() {
return '$' + this.accountBalance
}
}
}
</script>
不再限制Template一個根節點
Vue3.x中將不在限制模板中只有一個根節點,根組件可以任意多個元素。
<template>
<div>首頁</div>
<div>新聞</div>
</template>
自定義v-model修飾符
Vue3.x中,添加了可以自定義修飾符,如Api提供的內置方法.trim
,新特性我們也可以自定義啦。下面就來演示一下寫一個轉換字符串大寫的修飾符。
App.vue
<template>
<Input v-model:str.capitalize="modelModifiers"/>
</template>
<script>
import Input from "./components/Input"
export default {
name: 'App',
components: {
Input
}
}
</script>
Input.vue
<template>
<div class="Input">
<input type="text" @input="send">
</div>
</template>
<script>
export default {
name: 'Input',
props: {
str: String,
strModifiers: {
default: () => ({})
}
},
methods: {
send(e) {
let value = e.target.value
if (this.strModifiers.capitalize) { // capitalize 這裏的值就是修飾符
value = value.toUpperCase()
console.log(value)
}
this.$emit("update:str", value)
}
}
}
</script>
上面方法,必須傳入props
值,Modifiers
必須寫定義爲一個空對象。
特別需要注意一點:如果你的
v-model
參數值爲str
,那麼組件裏面接收的值,全部爲str開頭,如:props裏面的 strModifiers,str
效果:
廢棄on,off,once實例方法
Vue3.x中 $on
,$off
和 $once
實例方法已被移除,應用實例不再實現事件觸發接口。
<script>
created() {
console.log(this.$on, this.$once, this.$off) // undefined undefined undefined
}
</script>
自定義指令更改
在Vue3.x中自定義指定寫法稍有更改,看下列。
-
bind --> beforeMount 指令綁定到元素後發生。只發生一次 -
inserted --> mounted 元素插入到父DOM後發生 -
beforeUpdate: Vue3.x新添加的,這是在元素更新之前調用, -
componentUpdated --> updated -
beforeUnmount : Vue3.x新添加的,將在卸載元素前調用 -
unbind --> unmounted
main.js
import { createApp } from 'vue'
import App from './App.vue'
let main = createApp(App)
main.directive("custom", {
beforeMount(el, attr) {
console.log(el, attr)
},
updated() {
console.log("updated")
},
unmounted() {
console.log("移除")
}
})
main.mount('#app')
App.vue
<template>
<p v-custom v-if="show"></p>
</template>
<script>
export default {
name: 'App',
data() {
return {
show: true
}
},
created() {
setTimeout(() => {
this.show = true;
}, 5000)
setTimeout(() => {
this.show = false
}, 3000)
}
}
</script>
最後
貓哥上週末又帶無人機在硇洲島玩了一圈,那是《隱祕的角落》的同款小島,風景也超讚哦~~
順便做了個有意思的視頻,分享給大家看看,預告一下,視頻裏,帥帥的貓哥有出鏡哦 😉
本文分享自微信公衆號 - 全棧修煉(QuanZhanXiuLian)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。