欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue3有哪些新特性

本篇內(nèi)容介紹了“Vue3有哪些新特性”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比灤南網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式灤南網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋灤南地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

組件v-model支持參數(shù)

在Vue2.x時(shí)，我們要想給子組件傳值，還得單獨(dú)傳入。Vue3.x直接以v-model:xxx形式傳入?yún)?shù)，并且配合修飾符.sync進(jìn)行數(shù)據(jù)同步更新。

App.vue

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

Input.vue

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

效果

Vue3有哪些新特性

組件支持多個(gè)v-model

在Vue3.x中支持在單個(gè)組件上可以創(chuàng)建多個(gè)v-model綁定。

App.vue

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

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

效果

 Vue3有哪些新特性

Setupsetup

函數(shù)是一個(gè)新的組件選項(xiàng)。作為在組件內(nèi)使用Composition Api的入口點(diǎn)。下面我們分為4個(gè)方面來講解它

  • 調(diào)用時(shí)機(jī)

  • this指向

  • 函數(shù)參數(shù)

  • 返回值

調(diào)用時(shí)機(jī)

創(chuàng)建組件實(shí)例，然后初始化props，緊接著就調(diào)用setup函數(shù)。從生命周期的角度來看，它會在beforeCreate之前執(zhí)行。也就是創(chuàng)建組件先執(zhí)行setup、beforeCreate、create。

<template>   <div>蛙人</div> </template> <script> export default {   name: 'App',   setup() {     console.log("hey 蛙人")   } } </script>

this指向

由于不能在setup函數(shù)中使用data、methods，為了避免使用Vue出錯(cuò)，所以把setup函數(shù)中this修改為了undefined。

<template>   <div>蛙人</div> </template> <script> export default {   name: 'App',   setup() {     console.log(this); // undefined   } } </script>

函數(shù)參數(shù)props

  • context

  • props

接收組件傳遞過來的所有數(shù)據(jù)，并且都是響應(yīng)式的。

<template>   <div>蛙人</div> </template> <script> export default {   name: 'App',   props: {       title: {           type: String       }   },   setup(props) {     console.log(props.title)   } } </script>

注意一點(diǎn)，props數(shù)據(jù)不能使用解構(gòu)，否則響應(yīng)式數(shù)據(jù)失效

<template>   <div>蛙人</div> </template> <script> export default {   name: 'App',   props: {       title: {           type: String       }   },   setup({ title }) {     console.log(title) // 這里響應(yīng)式數(shù)據(jù)將失效   } } </script>

context

該參數(shù)提供一個(gè)上下文對象，從原來的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都是內(nèi)部組件實(shí)例上對應(yīng)項(xiàng)的代理，可以確保在更新后仍然還是最新的值。所以這里可以使用解構(gòu)語法。

返回值

可以將setup函數(shù)返回值渲染到頁面上。但前提是，setup返回值必須是一個(gè)對象，否則返回其它值則渲染無效。

<template>   <div>蛙人</div> </template> <script> export default {   name: 'App',   props: {       title: {           type: String       }   },   setup() {     const name = "蛙人"     return {        name     }   } } </script>

Reactive

該方法接收一個(gè)參數(shù){}創(chuàng)建一個(gè)響應(yīng)式對象。跟Vue2.x的Vue.observable一樣。如果該參數(shù)不是對象的話，也可以渲染到模板上，但不是響應(yīng)式的數(shù)據(jù)。

<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"; // 該方法測試響應(yīng)式數(shù)據(jù)，可以看到執(zhí)行完該方法視圖也會發(fā)生改變     }     return {         name,         test     }   } } </script>

Ref

該方法接收一個(gè)參數(shù)，可以是單個(gè)值，也可以是一個(gè)對象，并且都是響應(yīng)式的數(shù)據(jù)。當(dāng)傳入一個(gè)對象時(shí){}，內(nèi)部將調(diào)用reactive方法進(jìn)行轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)。返回值里面帶有.value屬性取值，當(dāng)使用模板渲染的時(shí)候可省去.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

該方法可以傳入一個(gè)函數(shù)，默認(rèn)該函數(shù)就是getter，不管getter返回值為一個(gè)ref響應(yīng)式數(shù)據(jù)還是一個(gè)普通變量，數(shù)據(jù)都是只讀不能改變。

<script> import { ref, computed } from "vue" export default {  name: 'test',  setup() {     let name = ref("蛙人")     let test = computed(() => name.value);     test.value = "123" // 修改無效，只能只讀   } } </script>

傳入一個(gè)對象set和get函數(shù)方法，這樣就可以修改啦

<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

該方法接收傳入一個(gè)對象，默認(rèn)是只讀功能，是深層對象只讀，不管嵌套多少層的屬性都是只讀狀態(tài)。

<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 = "歡迎關(guān)注" // 修改無效     console.log(only)    } } </script>

Vue3有哪些新特性

WatchEffect

該方法接收一個(gè)函數(shù)并且立即執(zhí)行，并當(dāng)該函數(shù)里的變量變更時(shí)，重新執(zhí)行該函數(shù)。該方法無法獲取到原值，只能是改變之后的值。

如果要監(jiān)聽哪個(gè)值，需要在該函數(shù)里寫出來，否則監(jiān)聽無效

import { ref, watchEffect } from "vue" export default {  name: 'test',   setup() {     let name = ref("蛙人");     let age = ref(23);     watchEffect(() => {         name.value; // 監(jiān)聽name         age.value;  // 監(jiān)聽age                  console.log(name.value)         console.log(age.value)     })          setTimeout(() => {         name.value = "前端娛樂圈"     }, 5000)      setTimeout(() => {         age.value = 18     }, 1000)   } } </script>

取消監(jiān)聽

有時(shí)候我們想在觸發(fā)一定的條件后取消監(jiān)聽。這時(shí)可以執(zhí)行watchEffect的返回值。

import { ref, watchEffect } from "vue" export default {  name: 'test',   setup() {     let name = ref("蛙人");     let age = ref(23);     let stop = watchEffect(() => {         name.value; // 監(jiān)聽name         age.value;  // 監(jiān)聽age                  console.log(name.value)         console.log(age.value)     })          setTimeout(() => {         name.value = "前端娛樂圈"     }, 5000)      setTimeout(() => {         age.value = 18;         setTimeout(stop, 300)     }, 1000)   } } </script>

Watch

watch等同于Vue2.x中的this.$watch，watch需要監(jiān)聽特定數(shù)據(jù)，默認(rèn)情況是懶執(zhí)行，也就是只有當(dāng)數(shù)據(jù)發(fā)生變化時(shí)才執(zhí)行第二個(gè)參數(shù)函數(shù)。

對比WatchEffect ，Watch允許我們

  • 懶執(zhí)行函數(shù)

  • 更明確哪些狀態(tài)改變觸發(fā)監(jiān)聽器

  • 可以監(jiān)聽獲取到變化前后的值

監(jiān)聽單個(gè)值

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

監(jiān)聽多個(gè)值

監(jiān)聽多個(gè)值，返回的是一個(gè)數(shù)組對象。

<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函數(shù)下使用生命周期，這些鉤子函數(shù)寫法跟之前的生命周期寫法不同。

  • 注意：這些生命周期寫法只能在setup函數(shù)下使用，在其它地方使用則會報(bào)錯(cuò)。

與Vue2.x版本生命周期相對應(yīng)的組合式Api

  • beforeCreate --> setup

  • created --> setup

  • beforeMount --> onBeforeMount

  • mounted --> onMounted

  • beforeUpdate --> onBeforeUpdate

  • updated --> onUpdated

  • beforeDestroy --> onBeforeUnmount

  • destroyed --> onUnmount

下面我們來看一下這些鉤子的寫法。鉤子函數(shù)里面是一個(gè)回調(diào)函數(shù)。

<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個(gè)參數(shù)，第一個(gè)key值，第二個(gè)value值，進(jìn)行傳遞

  • Inject：接收2個(gè)參數(shù)，第一個(gè)是provide的key值，默認(rèn)第二個(gè)參數(shù)可選，可以設(shè)置默認(rèn)值(當(dāng)找不到key值，設(shè)置一個(gè)默認(rèn)值)

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) // 傳入一個(gè)響應(yīng)式數(shù)據(jù)   }, } </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) // 這時(shí)就會觸發(fā)默認(rèn)值，因?yàn)檫@里找不到這個(gè)key值            return {         NAME     }   } } </script>

Refs

該方法相當(dāng)于Vue2.x的refs一樣獲取元素，那么在setup中配合使用ref對象進(jìn)行獲取

<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標(biāo)簽元素     })     return {         el     }        } } </script>

isReadonly

用于檢測該數(shù)據(jù)是不是可讀數(shù)據(jù)。返回一個(gè)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， 這不是一個(gè)只讀數(shù)據(jù)   } } </script>

isRef

用于檢測該數(shù)據(jù)是不是ref響應(yīng)式數(shù)據(jù)。返回一個(gè)Boolean類型。

<script> import { isRef, ref } from "vue" export default {  name: 'test',   setup() {     let test = ref("公眾號：前端娛樂圈")     console.log(isRef(test)) // true   } } </script>

isReactive

用于檢測該數(shù)據(jù)是不是reacttive響應(yīng)式數(shù)據(jù)。返回一個(gè)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, 這不是一個(gè)響應(yīng)式數(shù)據(jù)   } } </script>

移除過濾器filters

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

<template>   <h2>Bank Account Balance</h2>   <p>{{ accountInUSD }}</p> </template>  <script>   export default {     props: {       accountBalance: {         type: Number,         required: true       }     },     computed: {       accountInUSD() {         return '$' + this.accountBalance       }     }   } </script>

不再限制Template一個(gè)根節(jié)點(diǎn)

Vue3.x中將不在限制模板中只有一個(gè)根節(jié)點(diǎn)，根組件可以任意多個(gè)元素。

<template>     <div>首頁</div>     <div>新聞</div> </template>

自定義v-model修飾符

Vue3.x中，添加了可以自定義修飾符，如Api提供的內(nèi)置方法.trim，新特性我們也可以自定義啦。下面就來演示一下寫一個(gè)轉(zhuǎn)換字符串大寫的修飾符。

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必須寫定義為一個(gè)空對象。

  • 特別需要注意一點(diǎn)：如果你的v-model參數(shù)值為str，那么組件里面接收的值，全部為str開頭，如：props里面的  strModifiers，str

效果：

 Vue3有哪些新特性

廢棄on，off，once實(shí)例方法

Vue3.x中 $on，$off 和 $once 實(shí)例方法已被移除，應(yīng)用實(shí)例不再實(shí)現(xiàn)事件觸發(fā)接口。

<script>  created() {         console.log(this.$on, this.$once, this.$off) // undefined undefined undefined  } </script>

自定義指令更改

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

  • bind --> beforeMount 指令綁定到元素后發(fā)生。只發(fā)生一次

  • inserted --> mounted 元素插入到父DOM后發(fā)生

  • beforeUpdate: Vue3.x新添加的，這是在元素更新之前調(diào)用，

  • componentUpdated --> updated

  • beforeUnmount : Vue3.x新添加的，將在卸載元素前調(diào)用

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

“Vue3有哪些新特性”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁標(biāo)題：Vue3有哪些新特性
文章出自：http://chinadenli.net/article12/geocdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、外貿(mào)建站、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、微信小程序、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營