溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關vue3的使用方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
經過了漫長的迭代，Vue 3.0終于在上2020-09-18發布了，帶了翻天覆地的變化，使用了Typescript 進行了大規模的重構，帶來了Composition API RFC版本，類似React Hook 一樣的寫Vue，可以自定義自己的hook ，讓使用者更加的靈活，接下來總結一下vue 3.0 帶來的部分新特性。
Vue2與Vue3的對比
一、setup 函數
setup() 函數是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統一的入口, setup 函數會在 beforeCreate 之后、created 之前執行, vue3也是取消了這兩個鉤子，統一用setup代替, 該函數相當于一個生命周期函數，vue中過去的data，methods，watch等全部都用對應的新增api寫在setup()函數中
setup(props, context) {
context.attrs
context.slots
context.parent
context.root
context.emit
context.refs
return {
}
}二、reactive 函數
reactive() 函數接收一個普通對象，返回一個響應式的數據對象, 想要使用創建的響應式數據也很簡單，創建出來之后，在setup中return出去，直接在template中調用即可
<template>
{{name}} // test
<template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
setup(props, context) {
let state = reactive({
name: 'test'
});
return state
}
});
</script>三、ref() 函數
ref() 函數用來根據給定的值創建一個響應式的數據對象，ref() 函數調用的返回值是一個對象，這個對象上只包含一個 value 屬性, 只在setup函數內部訪問ref函數需要加.value
<template>
<div class="mine">
{{count}} // 10
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const count = ref<number>(10)
// 在js 中獲取ref 中定義的值, 需要通過value屬性
console.log(count.value);
return {
count
}
}
});
</script>在 reactive 對象中訪問 ref 創建的響應式數據
<template>
<div class="mine">
{{count}} -{{t}} // 10 -100
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
setup() {
const count = ref<number>(10)
const obj = reactive({
t: 100,
count
})
// 通過reactive 來獲取ref 的值時,不需要使用.value屬性
console.log(obj.count);
return {
...toRefs(obj)
}
}
});
</script>四、isRef() 函數
isRef() 用來判斷某個值是否為 ref() 創建出來的對象
<script lang="ts">
import { defineComponent, isRef, ref } from 'vue';
export default defineComponent({
setup(props, context) {
const name: string = 'vue'
const age = ref<number>(18)
console.log(isRef(age)); // true
console.log(isRef(name)); // false
return {
age,
name
}
}
});
</script>五、toRefs() 函數
toRefs() 函數可以將 reactive() 創建出來的響應式對象，轉換為普通的對象，只不過，這個對象上的每個屬性節點，都是 ref() 類型的響應式數據
<template>
<div class="mine">
{{name}} // test
{{age}} // 18
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
setup(props, context) {
let state = reactive({
name: 'test'
});
const age = ref(18)
return {
...toRefs(state),
age
}
}
});
</script>六、computed()
該函數用來創造計算屬性，和過去一樣，它返回的值是一個ref對象。 里面可以傳方法，或者一個對象，對象中包含set()、get()方法
6.1 創建只讀的計算屬性
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
setup(props, context) {
const age = ref(18)
// 根據 age 的值，創建一個響應式的計算屬性 readOnlyAge,它會根據依賴的 ref 自動計算并返回一個新的 ref
const readOnlyAge = computed(() => age.value++) // 19
return {
age,
readOnlyAge
}
}
});
</script>6.2 通過set()、get()方法創建一個可讀可寫的計算屬性
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
setup(props, context) {
const age = ref<number>(18)
const computedAge = computed({
get: () => age.value + 1,
set: value => age.value + value
})
// 為計算屬性賦值的操作，會觸發 set 函數, 觸發 set 函數后，age 的值會被更新
age.value = 100
return {
age,
computedAge
}
}
});
</script>七、 watch() 函數
watch 函數用來偵聽特定的數據源，并在回調函數中執行副作用。默認情況是懶執行的，也就是說僅在偵聽的源數據變更時才執行回調。
7.1 監聽用reactive聲明的數據源
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
name: string,
age: number
}
export default defineComponent({
setup(props, context) {
const state = reactive<Person>({ name: 'vue', age: 10 })
watch(
() => state.age,
(age, preAge) => {
console.log(age); // 100
console.log(preAge); // 10
}
)
// 修改age 時會觸發watch 的回調, 打印變更前后的值
state.age = 100
return {
...toRefs(state)
}
}
});
</script>7.2 監聽用ref聲明的數據源
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
interface Person {
name: string,
age: number
}
export default defineComponent({
setup(props, context) {
const age = ref<number>(10);
watch(age, () => console.log(age.value)); // 100
// 修改age 時會觸發watch 的回調, 打印變更后的值
age.value = 100
return {
age
}
}
});
</script>7.3 同時監聽多個值
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
name: string,
age: number
}
export default defineComponent({
setup(props, context) {
const state = reactive<Person>({ name: 'vue', age: 10 })
watch(
[() => state.age, () => state.name],
([newName, newAge], [oldName, oldAge]) => {
console.log(newName);
console.log(newAge);
console.log(oldName);
console.log(oldAge);
}
)
// 修改age 時會觸發watch 的回調, 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執行watch的回調
state.age = 100
state.name = 'vue3'
return {
...toRefs(state)
}
}
});
</script>7.4 stop 停止監聽
在 setup() 函數內創建的 watch 監視，會在當前組件被銷毀的時候自動停止。如果想要明確地停止某個監視，可以調用 watch() 函數的返回值即可，語法如下：
<script lang="ts">
import { set } from 'lodash';
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
name: string,
age: number
}
export default defineComponent({
setup(props, context) {
const state = reactive<Person>({ name: 'vue', age: 10 })
const stop = watch(
[() => state.age, () => state.name],
([newName, newAge], [oldName, oldAge]) => {
console.log(newName);
console.log(newAge);
console.log(oldName);
console.log(oldAge);
}
)
// 修改age 時會觸發watch 的回調, 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執行watch的回調
state.age = 100
state.name = 'vue3'
setTimeout(()=> {
stop()
// 此時修改時, 不會觸發watch 回調
state.age = 1000
state.name = 'vue3-'
}, 1000) // 1秒之后講取消watch的監聽
return {
...toRefs(state)
}
}
});
</script>八、LifeCycle Hooks(新的生命后期)
新版的生命周期函數，可以按需導入到組件中，且只能在 setup() 函數中使用, 但是也可以在setup 外定義, 在 setup 中使用
<script lang="ts">
import { set } from 'lodash';
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated } from 'vue';
export default defineComponent({
setup(props, context) {
onBeforeMount(()=> {
console.log('beformounted!')
})
onMounted(() => {
console.log('mounted!')
})
onBeforeUpdate(()=> {
console.log('beforupdated!')
})
onUpdated(() => {
console.log('updated!')
})
onBeforeUnmount(()=> {
console.log('beforunmounted!')
})
onUnmounted(() => {
console.log('unmounted!')
})
onErrorCaptured(()=> {
console.log('errorCaptured!')
})
return {}
}
});
</script>九、Template refs
通過refs 來回去真實dom元素, 這個和react 的用法一樣,為了獲得對模板內元素或組件實例的引用，我們可以像往常一樣在setup()中聲明一個ref并返回它
<template>
<!--第一步：還是跟往常一樣，在 html 中寫入 ref 的名稱-->
<div class="mine" ref="elmRefs">
<span>1111</span>
</div>
</template>
<script lang="ts">
import { set } from 'lodash';
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
setup(props, context) {
// 獲取真實dom
const elmRefs = ref<null | HTMLElement>(null);
onMounted (() => {
console.log(elmRefs.value); // 得到一個 RefImpl 的對象, 通過 .value 訪問到數據
})
return {
elmRefs
}
}
});
</script>十、vue 的全局配置
通過vue 實例上config來配置,包含Vue應用程序全局配置的對象。您可以在掛載應用程序之前修改下面列出的屬性:
const app = Vue.createApp({})
app.config = {...}為組件渲染功能和觀察程序期間的未捕獲錯誤分配處理程序。錯誤和應用程序實例將調用處理程序
app.config.errorHandler = (err, vm, info) => {}可以在應用程序內的任何組件實例中訪問的全局屬性，組件的屬性將具有優先權。這可以代替Vue 2.xVue.prototype擴展：
const app = Vue.createApp({})
app.config.globalProperties.$http = 'xxxxxxxxs'可以在組件用通過 getCurrentInstance() 來獲取全局globalProperties 中配置的信息,getCurrentInstance 方法獲取當前組件的實例，然后通過 ctx 屬性獲得當前上下文，這樣我們就能在setup中使用router和vuex, 通過這個屬性我們就可以操作變量、全局屬性、組件屬性等等
setup( ) {
const { ctx } = getCurrentInstance();
ctx.$http
}十一、Suspense 組件
在開始介紹 Vue 的 Suspense 組件之前，我們有必要先了解一下 React 的 Suspense 組件，因為他們的功能類似。
React.lazy 接受一個函數，這個函數需要動態調用 import()。它必須返回一個 Promise，該 Promise 需要 resolve 一個 default export 的 React 組件。
import React, { Suspense } from 'react';
const myComponent = React.lazy(() => import('./Component'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<myComponent />
</Suspense>
</div>
);
}Vue3 也新增了 React.lazy 類似功能的 defineAsyncComponent 函數，處理動態引入（的組件）。defineAsyncComponent可以接受返回承諾的工廠函數。當您從服務器檢索到組件定義時，應該調用Promise的解析回調。您還可以調用reject(reason)來指示負載已經失敗
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
app.component('async-component', AsyncComp)Vue3 也新增了 Suspense 組件:
<template>
<Suspense>
<template #default>
<my-component />
</template>
<template #fallback>
Loading ...
</template>
</Suspense>
</template>
<script lang='ts'>
import { defineComponent, defineAsyncComponent } from "vue";
const MyComponent = defineAsyncComponent(() => import('./Component'));
export default defineComponent({
components: {
MyComponent
},
setup() {
return {}
}
})
</script>十二、vue 3.x 完整組件模版結構
一個完成的vue 3.x 完整組件模版結構包含了:組件名稱、 props、components、setup(hooks、computed、watch、methods 等)
<template>
<div class="mine" ref="elmRefs">
<span>{{name}}</span>
<br>
<span>{{count}}</span>
<div>
<button @click="handleClick">測試按鈕</button>
</div>
<ul>
<li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue';
interface IState {
count: 0,
name: string,
list: Array<object>
}
export default defineComponent({
name: 'demo',
// 父組件傳子組件參數
props: {
name: {
type: String as PropType<null | ''>,
default: 'vue3.x'
},
list: {
type: Array as PropType<object[]>,
default: () => []
}
},
components: {
/// TODO 組件注冊
},
emits: ["emits-name"], // 為了提示作用
setup (props, context) {
console.log(props.name)
console.log(props.list)
const state = reactive<IState>({
name: 'vue 3.0 組件',
count: 0,
list: [
{
name: 'vue',
id: 1
},
{
name: 'vuex',
id: 2
}
]
})
const a = computed(() => state.name)
onMounted(() => {
})
function handleClick () {
state.count ++
// 調用父組件的方法
context.emit('emits-name', state.count)
}
return {
...toRefs(state),
handleClick
}
}
});
</script>看完上述內容，你們對vue3的使用方法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
