vue3基礎語法學習

前言:vue2中復雜組件的代碼變得越來越難以維護,缺少一種在多個組件之間提取和復用邏輯的機制,現在的重用機制又存在一些弊端,所以vue3中隆重推出了Composition API。
關于Composition API:
一、ref和reactive
1.ref:
作用:用于定義基本類型數據,例如:String,Number,Boolean等,將其轉換為一個帶有響應式特性的數據類型
語法:const x = ref(100)
訪問:在setup中使用.value訪問,在模板中讀取時,不需要使用.value

<script lang="ts" setup>
import { ref} from 'vue'
const count = ref(9)
const increase = () => {
  count.value++
}
const decrease = () => {
  count.value--
}
</script>
<template>
  <div>
    <h1> count is a number {{ count }}</h1>
    <div>
      <button @click="increase">count +1</button>
      <button @click="decrease">count -1</button>
    </div>
  </div>
</template>

2.reactive
作用:用于定義引用數據類型,例如:數組,對象等,將其轉換為一個帶有響應式特性的數據類型
語法:const info = reactive( { count: 0 } )
注意:響應式轉換是深層的,它會影響所有嵌套的屬性;若要避免深層響應式的轉換,只想保留對這個對象頂層次訪問的響應性,請使用ShallowReactive()

<script lang="ts" setup>
import { reactive} from 'vue'
const data = reactive({
  count: 5
})
const increase = () => {
  data.count++
}
const decrease = () => {
  data.count--
}
</script>
<template>
  <div class="about">
    <h1> count is a number {{ data.count }}</h1>
    <div>
      <button @click="increase">count +1</button>
      <button @click="decrease">count -1</button>
    </div>
  </div>
</template>

上述示例中,如果將reactive對象中的屬性解構后單獨拿出來使用,則會失去響應性,比如:
const {count} = data
官方推薦我們使用toRefs()來解構reactive對象,使其展開的每個屬性都是響應式的;
const {count} = toRefs(data)
二、computed和watch
1.computed
作用:描述依賴響應式狀態的復雜邏輯;會自動追蹤響應式依賴。
用法:computed()方法接收一個getter函數作為參數,返回值為一個計算屬性ref,即可以通過.value訪問計算結果,在模板表達式中無需添加.value

<script lang="ts" setup>
import { reactive, computed, toRefs } from 'vue'
const data = reactive({
  count: 5
})
const { count } = toRefs(data)
const doubleCount = computed(() => {
  return count.value * 2
})
 
const increase = () => {
  count.value++
  console.log(doubleCount.value)
}
const decrease = () => {
  count.value--
  console.log(doubleCount.value)
}
</script>
<template>
  <div class="about">
    <h1>count is a number {{ count }}</h1>
    <div>
      <button @click="increase">count +1</button>
      <button @click="decrease">count -1</button>
    </div>
    <h1>this is doubleCount{{ doubleCount }}</h1>
  </div>
</template>

計算屬性vs方法:
不同點:
計算屬性值會基于其響應式依賴被緩存,即一個計算屬性僅會在其響應式依賴更新時才重新計算;而方法調用總是會在重新渲染發生時再次執行函數。
2.watch
作用:用于監聽響應式變量的變化
語法:watch(x,(new, old) => {})
watch的第一個參數可以是:一個ref(包括計算屬性)、一個響應式對象、一個getter函數、或多個數據源組成的數組

const { count } = ref(3)
const doubleCount = computed(() => {
  return count.value * 2
})
 
watch(doubleCount, (newValue, oldValue) => {
  console.log('new', newValue)
  console.log('old', oldValue)
})

注意:不能直接偵聽響應式對象的屬性值!!
而是 需要返回該屬性的getter函數:

const data = reactive({
  count: 5
})
// 提供一個getter函數
watch(
  () => data.count,
  (count) => {
    console.log('count is', count)
  }
)

三、新的生命周期函數
1.選項式的beforeCreatecreated,被setup替代了,setup表示組件被創建之前,props被解析之后執行,它是組合式API的入口
2.選項式的beforeDestroydestroyed被更名為beforeUnmountunmounted

vue 2.x vue 3.x
beforeCreate setup
created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted

四、自定義函數-Hooks函數
新建hooks/useXXX.ts文件,將邏輯代碼都放在函數里:

hooks/useMousePosition.ts
import {ref,onMounted,onUnmounted} from 'vue'
function useMousePosition () {
    const x = ref(0)
    const y = ref(0)
    const updateMouse = (event:MouseEvent) => {
        x.value = event.pageX
        y.value = event.pageY
    }
    onMounted(() => {
        document.addEventListener('click', updateMouse)
    })
    onUnmounted(() => {
        document.removeEventListener('click', updateMouse)
    })
    return {
        x,
        y
    }
}
export default useMousePosition
xxx.vue
<script setup lang="ts">
    import useMousePosition from './hooks/useMousePosition'
    const { x, y } = useMousePosition()
</script>

優點:

  1. 清楚x,y變量來源
  2. 可以給x,y設置別名,這樣的話可以避免命名沖突的風險
  3. 邏輯可以脫離組件存在,和組件本身的實現沒有任何關系,不需要添加任何組件實現的功能,完美實現了邏輯重用
    五、其他新增特性:
    ? Teleport-瞬移組件的位置,"傳送"
    作用:把指定的元素或組件渲染到任意父級作用域的其它DOM節點上
    應用場景:常用于封裝Modal彈框組件
    語法:<Teleport> 接收一個 to prop 來制定傳送的目標。to 的值可以是一個 CSS 選擇器(如:to=".box"、to="#box"),也可以是一個 DOM 元素對象(如:to="body"
Modal.vue
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['cancel'])
const closeModal = () => {
  emit('cancel')
}
</script>

 
<template>
  <!-- 當Modal彈窗顯示時,將其插入到<body>標簽中去 -->
  <teleport to="body">
    <div class="modal-layer" v-if="visible">
      <div class="modal">
        <header @click="closeModal" class="close">X</header>
        <main>
          <slot></slot>
        </main>
        <footer></footer>
      </div>
    </div>
  </teleport>
</template>

defineProps 用于接收父組件傳遞過來的自定義屬性
defineEmits 用于聲明父組件傳遞過來的自定義事件;子組件通過 defineEmits 獲取 emit 對象(因為沒有 this)

Page.vue
<script lang="ts" setup>
import { ref } from 'vue'
import Modal from '../components/Modal.vue'
const isShow = ref(false)
const openModal = () => {
  isShow.value = true
}
const closeModal = () => {
  isShow.value = false
}
</script>
 
 
<template>
  <div class="page">
    <Modal :visible="isShow" @cancel="closeModal">
      <div>彈框主體內容</div>
    </Modal>
    <button @click="openModal" class="btn">打開彈窗</button>
  </div>
</template>

? Suspense-異步加載組件
作用:常用于給異步組件加載時,顯示loading

xxx.vue
<script lang="ts" setup>
// import AsyncCom from '../components/AsyncCom.vue'
import { defineAsyncComponent } from 'vue'
const AsyncCom = defineAsyncComponent(() => import('../components/AsyncCom.vue'))
</script>
 
 
<template>
  <div class="my">
    <Suspense>
      <!-- 具有深層異步依賴的組件 -->
      <AsyncCom></AsyncCom>
 
      <!-- 在fallback插槽中顯示'正在加載中' -->
      <template #fallback> Loading... </template>
    </Suspense>
  </div>
</template>
AsyncCom.vue
<script lang="ts" setup>
import { ref } from 'vue'
const data = ref(null)
function delay(ms, value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(value)
    }, ms)
  })
}
data.value = await delay(1000, 3)
</script>
 
 
<template>
  <div class="child">
    <h1>child page{{ data }}</h1>
  </div>
</template>

監控Suspense出現的錯誤:使用onErrorCaptured() 生命周期鉤子函數,返回一個boolean

const error = ref(null)
onErrorCaptured((e) => {
    error.value = e
    // return true 表示錯誤是否向上傳遞
    return true
)

? 全局API的修改和優化
全局配置Vue.configapp.config
全局注冊類API:Vue.componentapp.component
全局指令:Vue.directiveapp.directive
行為擴展類API:Vue.mixinapp.mixin
安裝全局插件 Vue.useapp.use
nextTick()observable() ...
? 直接使用script添加一個setup屬性就可以直接使用Composition API

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容