Vue3新特性

一文帶你掌握Vue3新特性

前言

記錄一下筆記，給各位小夥伴們分享一些經常使用的Vue3新特性及哪些方法發生了變動。

寫法採用vue3.x，固然目前vue3 版本時支持vue2.x的寫法的

我這裏只寫一些經常使用的，更多請看Vue3官網這裏

Setup

setup函數是一個新的組件選項。做爲在組件內使用Composition Api的入口點。下面咱們分爲4個方面來說解它

• 調用時機
• this指向
• 函數參數
• 返回值

調用時機

建立組件實例，而後初始化props，緊接着就調用setup函數。 從生命週期的角度來看，它會在beforeCreate以前執行。也就是建立組件先執行setup、beforeCreate、create。

蛙人

this指向

因爲不能在setup函數中使用data、methods，爲了不使用Vue出錯，因此把setup函數中this修改成了undefined。

蛙人

函數參數

• props
• context

props

接收組件傳遞過來的全部數據，而且都是響應式的。

蛙人

注意一點，props數據不能使用解構，不然響應式數據失效

蛙人

context

該參數提供一個上下文對象，從原來的2.x中選擇性的暴露了一些屬性。

• attrs
• slots
• emit

蛙人

上面，attrs和slots都是內部組件實例上對應項的代理，能夠確保在更新後仍然仍是最新的值。因此這裏可使用解構語法。

返回值

能夠將setup函數返回值渲染到頁面上。但前提是，setup返回值必須是一個對象，不然返回其它值則渲染無效。

蛙人

Reactive

該方法接收一個參數{}建立一個響應式對象。跟Vue2.x的Vue.observable同樣。若是該參數不是對象的話，也能夠渲染到模板上，但不是響應式的數據。

姓名:  {{ name.value }}
    {{ test() }}

Ref

該方法接收一個參數，能夠是單個值，也能夠是一個對象，而且都是響應式的數據。當傳入一個對象時{}，內部將調用reactive方法進行轉換爲響應式數據。返回值裏面帶有.value屬性取值，當使用模板渲染的時候可省去.value。

姓名:  {{ name }}
    {{ test() }}

Computed

該方法能夠傳入一個函數，默認該函數就是getter，無論getter返回值爲一個ref響應式數據仍是一個普通變量，數據都是隻讀不能改變。

 name.value);
    test.value = "123" // 修改無效，只能只讀
  }
}" _ue_custom_node_="true">

傳入一個對象set和get函數方法，這樣就能夠修改啦

Readonly

該方法接收傳入一個對象，默認是隻讀功能，是深層對象只讀，無論嵌套多少層的屬性都是隻讀狀態。

組件v-model支持參數

在Vue2.x時，咱們要想給子組件傳值，還得單獨傳入。Vue3.x直接以v-model:xxx形式傳入參數，進行數據同步更新。

App.vue

{{title}}

Input.vue

 "蛙人"
    }
  },
  setup(props,context) {
      function first(e) {
          context.$emit("update:title", e.target.value)
      },
      return {
          first
      }
  }      
}" _ue_custom_node_="true">

效果

組件支持多個v-model

在Vue3.x中支持在單個組件上能夠建立多個v-model綁定。

App.vue

{{title}}
  {{name}}

Input.vue

 "蛙人"
    },
    name: {
        default: () => "前端娛樂圈"
    }
  },
  setup(props,context) {
      function first(e) {
          context.$emit("update:title", e.target.value)
      },
      function last(e) {
          this.$emit("update:name", e.target.value)
      }
      return {
          first,
          last
      }
  }      
}" _ue_custom_node_="true">

效果

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

取消監聽

有時候咱們想在觸發必定的條件後取消監聽。這時能夠執行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)
  }
}

Watch

watch等同於Vue2.x中的this.$watch，watch須要監聽特定數據，默認狀況是懶執行，也就是隻有當數據發生變化時才執行第二個參數函數。

對比WatchEffect ，Watch容許咱們

• 懶執行函數
• 更明確哪些狀態改變觸發監聽器
• 能夠監聽獲取到變化先後的值

監聽單個值

 {
        console.log(newVal, oldVal) // 前端娛樂圈， 蛙人
    })

    setTimeout(() => {
        name.value = "前端娛樂圈"
    }, 1000)

  }
}" _ue_custom_node_="true">

監聽多個值

監聽多個值，返回的是一個數組對象。

 {
        console.log(newVal, oldVal) // ["前端娛樂圈", 18], ["蛙人", 23]
    })
    
    setTimeout(() => {
        name.value = "前端娛樂圈"
        age.value = 18
    }, 1000)

  }
}" _ue_custom_node_="true">

生命週期系列

在Vue3.X也能夠在setup函數下使用生命週期，這些鉤子函數寫法跟以前的生命週期寫法不一樣。

注意：這些生命週期寫法只能在setup函數下使用，在其它地方使用則會報錯。

與Vue2.x版本生命週期相對應的組合式Api

• beforeCreate --> setup
• created --> setup
• beforeMount --> onBeforeMount
• mounted --> onMounted
• beforeUpdate --> onBeforeUpdate
• updated --> onUpdated
• beforeDestroy --> onBeforeUnmount
• destroyed --> onUnmount

下面咱們來看一下這些鉤子的寫法。鉤子函數裏面是一個回調函數。

 {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
    
  }
}" _ue_custom_node_="true">

Provide && Inject

該方法和Vue2.x的 provide、inject同樣的。可是Vue3新特性這倆方法只能在setup中使用。

• Provide：接收2個參數，第一個key值，第二個value值，進行傳遞
• Inject：接收2個參數，第一個是provide的key值，默認第二個參數可選，能夠設置默認值(當找不到key值，設置一個默認值)

App.vue

test.vue

	{{ NAME }}

Refs

該方法至關於Vue2.x的refs同樣獲取元素，那麼在setup中配合使用ref對象進行獲取

123 {
         console.log(el) // p標籤元素
    })
    return {
        el
    }
    
  }
}" _ue_custom_node_="true">

isReadonly

用於檢測該數據是否是可讀數據。返回一個Boolean類型。

isRef

用於檢測該數據是否是ref響應式數據。返回一個Boolean類型。

isReactive

用於檢測該數據是否是reacttive響應式數據。返回一個Boolean類型。

移除過濾器filters

在Vue3.x中移除過濾器，不在支持。建議使用computed去替代。貼一個官網例子

Bank Account Balance{{ accountInUSD }}

再也不限制Template一個根節點

Vue3.x中將不在限制模板中只有一個根節點，根組件能夠任意多個元素。

首頁新聞

自定義v-model修飾符

Vue3.x中，添加了能夠自定義修飾符，如Api提供的內置方法.trim，新特性咱們也能夠自定義啦。下面就來演示一下寫一個轉換字符串大寫的修飾符。

App.vue

Input.vue

 ({})
      }
  },
      
  methods: {
      send(e) {
          let value = e.target.value
          if (this.strModifiers.capitalize) { // capitalize 這裏的值就是修飾符
            value = value.toUpperCase()
            console.log(value)
          }
          this.$emit("update:str", value)
      }
  }
}" _ue_custom_node_="true">

上面方法，必須傳入props值，Modifiers必須寫定義爲一個空對象。

特別須要注意一點：若是你的v-model參數值爲str，那麼組件裏面接收的值，所有爲str開頭，如：props裏面的 strModifiers，str

效果：

廢棄on，off，once實例方法

Vue3.x中 $on，$off 和 $once 實例方法已被移除，應用實例再也不實現事件觸發接口。

自定義指令更改

在Vue3.x中自定義指定寫法稍有更改，看下列。

• bind --> beforeMount 指令綁定到元素後發生。只發生一次
• inserted --> mounted 元素插入到父DOM後發生
• beforeUpdate: Vue3.x新添加的，這是在元素更新以前調用，
• componentUpdated --> updated
• beforeUnmount : Vue3.x新添加的，將在卸載元素前調用
• unbind --> unmounted