vue3的使用方法

發(fā)布時間：2020-10-27 14:48:30 來源：億速云閱讀：299 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)vue3的使用方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

經(jīng)過了漫長的迭代，Vue 3.0終于在上2020-09-18發(fā)布了，帶了翻天覆地的變化，使用了Typescript 進行了大規(guī)模的重構(gòu)，帶來了Composition API RFC版本，類似React Hook 一樣的寫Vue，可以自定義自己的hook ，讓使用者更加的靈活，接下來總結(jié)一下vue 3.0 帶來的部分新特性。

setup()
ref()
reactive()
isRef()
toRefs()
computed()
watch()
LifeCycle Hooks(新的生命周期)
Template refs
globalProperties
Suspense

Vue2與Vue3的對比

對TypeScript支持不友好（所有屬性都放在了this對象上，難以推倒組件的數(shù)據(jù)類型）
大量的API掛載在Vue對象的原型上，難以實現(xiàn)TreeShaking。
架構(gòu)層面對跨平臺dom渲染開發(fā)支持不友好
CompositionAPI。受ReactHook啟發(fā)
更方便的支持了 jsx
Vue 3 的 Template 支持多個根標簽，Vue 2 不支持
對虛擬DOM進行了重寫、對模板的編譯進行了優(yōu)化操作...

一、setup 函數(shù)

setup() 函數(shù)是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統(tǒng)一的入口, setup 函數(shù)會在 beforeCreate 之后、created 之前執(zhí)行, vue3也是取消了這兩個鉤子，統(tǒng)一用setup代替, 該函數(shù)相當于一個生命周期函數(shù)，vue中過去的data，methods，watch等全部都用對應的新增api寫在setup()函數(shù)中

setup(props, context) {
  context.attrs
  context.slots
  context.parent
  context.root
  context.emit
  context.refs
  
  return {
    
  }
 }

props: 用來接收 props 數(shù)據(jù)
context 用來定義上下文, 上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到, 在 setup() 函數(shù)中無法訪問到 this，是個 undefined
返回值: return {}, 返回響應式數(shù)據(jù), 模版中需要使用的函數(shù)

二、reactive 函數(shù)

reactive() 函數(shù)接收一個普通對象，返回一個響應式的數(shù)據(jù)對象, 想要使用創(chuàng)建的響應式數(shù)據(jù)也很簡單，創(chuàng)建出來之后，在setup中return出去，直接在template中調(diào)用即可

<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() 函數(shù)

ref() 函數(shù)用來根據(jù)給定的值創(chuàng)建一個響應式的數(shù)據(jù)對象，ref() 函數(shù)調(diào)用的返回值是一個對象，這個對象上只包含一個 value 屬性, 只在setup函數(shù)內(nèi)部訪問ref函數(shù)需要加.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 創(chuàng)建的響應式數(shù)據(jù)

<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() 函數(shù)

isRef() 用來判斷某個值是否為 ref() 創(chuàng)建出來的對象

<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() 函數(shù)

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

<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()

該函數(shù)用來創(chuàng)造計算屬性，和過去一樣，它返回的值是一個ref對象。里面可以傳方法，或者一個對象，對象中包含set()、get()方法

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

import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  const age = ref(18)

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

  return {
   age,
   readOnlyAge
  }
 }
});
</script>

6.2 通過set()、get()方法創(chuàng)建一個可讀可寫的計算屬性

<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
  })
  // 為計算屬性賦值的操作，會觸發(fā) set 函數(shù), 觸發(fā) set 函數(shù)后，age 的值會被更新
  age.value = 100
  return {
   age,
   computedAge
  }
 }
});
</script>

七、 watch() 函數(shù)

watch 函數(shù)用來偵聽特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用。默認情況是懶執(zhí)行的，也就是說僅在偵聽的源數(shù)據(jù)變更時才執(zhí)行回調(diào)。

7.1 監(jiān)聽用reactive聲明的數(shù)據(jù)源

<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 時會觸發(fā)watch 的回調(diào), 打印變更前后的值
  state.age = 100
  return {
   ...toRefs(state)
  }
 }
});
</script>

7.2 監(jiān)聽用ref聲明的數(shù)據(jù)源

<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 時會觸發(fā)watch 的回調(diào), 打印變更后的值
  age.value = 100
  return {
   age
  }
 }
});
</script>

7.3 同時監(jiān)聽多個值

<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 時會觸發(fā)watch 的回調(diào), 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執(zhí)行watch的回調(diào)
  state.age = 100
  state.name = 'vue3'
  return {
   ...toRefs(state)
  }
 }
});
</script>

7.4 stop 停止監(jiān)聽

在 setup() 函數(shù)內(nèi)創(chuàng)建的 watch 監(jiān)視，會在當前組件被銷毀的時候自動停止。如果想要明確地停止某個監(jiān)視，可以調(diào)用 watch() 函數(shù)的返回值即可，語法如下：

<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 時會觸發(fā)watch 的回調(diào), 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執(zhí)行watch的回調(diào)
  state.age = 100
  state.name = 'vue3'

  setTimeout(()=> { 
   stop()
   // 此時修改時, 不會觸發(fā)watch 回調(diào)
   state.age = 1000
   state.name = 'vue3-'
  }, 1000) // 1秒之后講取消watch的監(jiān)聽
  
  return {
   ...toRefs(state)
  }
 }
});
</script>

八、LifeCycle Hooks(新的生命后期)

新版的生命周期函數(shù)，可以按需導入到組件中，且只能在 setup() 函數(shù)中使用, 但是也可以在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 的用法一樣,為了獲得對模板內(nèi)元素或組件實例的引用，我們可以像往常一樣在setup()中聲明一個ref并返回它

還是跟往常一樣，在 html 中寫入 ref 的名稱
在steup 中定義一個 ref
steup 中返回 ref的實例
onMounted 中可以得到 ref的RefImpl的對象, 通過.value 獲取真實dom

<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 訪問到數(shù)據(jù)
  })

  return {
   elmRefs
  }
 }
});
</script>

十、vue 的全局配置

通過vue 實例上config來配置,包含Vue應用程序全局配置的對象。您可以在掛載應用程序之前修改下面列出的屬性:

const app = Vue.createApp({})

app.config = {...}

為組件渲染功能和觀察程序期間的未捕獲錯誤分配處理程序。錯誤和應用程序?qū)嵗龑⒄{(diào)用處理程序

app.config.errorHandler = (err, vm, info) => {}

可以在應用程序內(nèi)的任何組件實例中訪問的全局屬性，組件的屬性將具有優(yōu)先權(quán)。這可以代替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 接受一個函數(shù)，這個函數(shù)需要動態(tài)調(diào)用 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 函數(shù)，處理動態(tài)引入（的組件）。defineAsyncComponent可以接受返回承諾的工廠函數(shù)。當您從服務器檢索到組件定義時，應該調(diào)用Promise的解析回調(diào)。您還可以調(diào)用reject(reason)來指示負載已經(jīng)失敗

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 完整組件模版結(jié)構(gòu)

一個完成的vue 3.x 完整組件模版結(jié)構(gòu)包含了:組件名稱、 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',
 // 父組件傳子組件參數(shù)
 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 ++
   // 調(diào)用父組件的方法
   context.emit('emits-name', state.count)
  }
 
  return {
   ...toRefs(state),
   handleClick
  }
 }
});
</script>

看完上述內(nèi)容，你們對vue3的使用方法有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細節(jié)

vue3的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽