一文帶你掌握Vue3新特性，不再怕面試官啦~

前言

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

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

> 有興趣的能夠關注公衆號：前端娛樂圈前端

組件v-model支持參數

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

App.vuejava

<template>
  <div>
  {{title}} 
  <input v-model:title="title">
  </div>
</template>
<script>
import Input from "./components/Input"
export default {
  name: 'App',
  components: {
    Input
  },
  data() {
    return {
      title: "蛙人",
    }
  },
}
</script>

Input.vuereact

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

效果git

組件支持多個v-model

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

App.vuenpm

<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.vueapi

<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(() =&gt; {
        name.value; // 監聽name
        age.value;  // 監聽age
        
        console.log(name.value)
        console.log(age.value)
    })
    
    setTimeout(() =&gt; {
        name.value = "前端娛樂圈"
    }, 5000)

    setTimeout(() =&gt; {
        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(() =&gt; {
        name.value; // 監聽name
        age.value;  // 監聽age
        
        console.log(name.value)
        console.log(age.value)
    })
    
    setTimeout(() =&gt; {
        name.value = "前端娛樂圈"
    }, 5000)

    setTimeout(() =&gt; {
        age.value = 18;
        setTimeout(stop, 300)
    }, 1000)
  }
}

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>

感謝

謝謝你讀完本篇文章，但願對你能有所幫助，若有問題歡迎各位指正。

我是蛙人(✿◡‿◡)，若是以爲寫得能夠的話，請點個贊吧❤。

感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論

寫做不易，「點贊」+「在看」+「轉發」 謝謝支持❤

往期好文

《聊聊在Vue項目中使用Decorator裝飾器》

《分享15個Webpack實用的插件！！！》

《手把手教你寫一個Vue組件發佈到npm且可外鏈引入使用》

《分享12個Webpack中經常使用的Loader》

《聊聊什麼是CommonJs和Es Module及它們的區別》

《這些工做中用到的JavaScript小技巧你都知道嗎？》

《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》

參考

https://v3.cn.vuejs.org/