在线观看国产精品视频,操一操鲁一鲁,国产视频1区2区,三级草逼免费看,午夜精品成人,婷婷五月天亚洲,毛片网站在线观看,国产无码做爱

前言

記錄一下筆記，給各位小伙伴們分享一些常用的 Vue3 新特性及哪些方法發(fā)生了變更。

我這里只寫一些常用的，更多請(qǐng)看Vue3官網(wǎng)這里

點(diǎn)擊上方“全棧修煉”，選擇“設(shè)為星標(biāo)”

第一時(shí)間推送新姿勢(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>

效果

組件支持多個(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: () => "前端娛樂(lè)圈"
    }
  },
  methods: {
      first(e) {
          this.$emit("update:title", e.target.value)
      },
      last(e) {
          this.$emit("update:name", e.target.value)
      }
  }
}
</script>

效果

Setup

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

調(diào)用時(shí)機(jī)
this指向
函數(shù)參數(shù)
返回值

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

創(chuàng)建組件實(shí)例，然后初始化props，緊接著就調(diào)用setup函數(shù)。從生命周期的角度來(lái)看，它會(huì)在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

接收組件傳遞過(guò)來(lái)的所有數(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è)上下文對(duì)象，從原來(lái)的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í)例上對(duì)應(yīng)項(xiàng)的代理，可以確保在更新后仍然還是最新的值。所以這里可以使用解構(gòu)語(yǔ)法。

返回值

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

<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)式對(duì)象。跟Vue2.x的Vue.observable一樣。如果該參數(shù)不是對(duì)象的話，也可以渲染到模板上，但不是響應(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"; // 該方法測(cè)試響應(yīng)式數(shù)據(jù)，可以看到執(zhí)行完該方法視圖也會(huì)發(fā)生改變
    }
    return {
        name,
        test
    }
  }
}
</script>

Ref

該方法接收一個(gè)參數(shù)，可以是單個(gè)值，也可以是一個(gè)對(duì)象，并且都是響應(yīng)式的數(shù)據(jù)。當(dāng)傳入一個(gè)對(duì)象時(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" // 修改無(wú)效，只能只讀
  }
}
</script>

傳入一個(gè)對(duì)象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è)對(duì)象，默認(rèn)是只讀功能，是深層對(duì)象只讀，不管嵌套多少層的屬性都是只讀狀態(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 = "前端娛樂(lè)圈" // 修改無(wú)效
    only.prodution.proName = "歡迎關(guān)注" // 修改無(wú)效
    console.log(only) 
  }
}
</script>

WatchEffect

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

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

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 = "前端娛樂(lè)圈"
    }, 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 = "前端娛樂(lè)圈"
    }, 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ù)。

對(duì)比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) // 前端娛樂(lè)圈， 蛙人
    })

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

  }
}
</script>

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

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

<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) // ["前端娛樂(lè)圈", 18], ["蛙人", 23]
    })
    
    setTimeout(() => {
        name.value = "前端娛樂(lè)圈"
        age.value = 18
    }, 1000)

  }
}
</script>

生命周期系列

在Vue3.X也可以在setup函數(shù)下使用生命周期，這些鉤子函數(shù)寫法跟之前的生命周期寫法不同。

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

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

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

下面我們來(lái)看一下這些鉤子的寫法。鉤子函數(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í)就會(huì)觸發(fā)默認(rèn)值，因?yàn)檫@里找不到這個(gè)key值
      
    return {
        NAME
    }
  }
}
</script>

Refs

該方法相當(dāng)于Vue2.x的refs一樣獲取元素，那么在setup中配合使用ref對(duì)象進(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

用于檢測(cè)該數(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

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

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

isReactive

用于檢測(cè)該數(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>

移除過(guò)濾器filters

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

<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一個(gè)根節(jié)點(diǎn)

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

<template>
    <div>首頁(yè)</div>
    <div>新聞</div>
</template>

自定義v-model修飾符

Vue3.x中，添加了可以自定義修飾符，如Api提供的內(nèi)置方法.trim，新特性我們也可以自定義啦。下面就來(lái)演示一下寫一個(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è)空對(duì)象。

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

效果：

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

最后

貓哥上周末又帶無(wú)人機(jī)在硇洲島玩了一圈，那是《隱秘的角落》的同款小島，風(fēng)景也超贊哦~~

順便做了個(gè)有意思的視頻，分享給大家看看，預(yù)告一下，視頻里，帥帥的貓哥有出鏡哦 ??

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

前言

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

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

Setup

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

this指向

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

props

context

返回值

Reactive

Ref

Computed

Readonly

WatchEffect

取消監(jiān)聽

Watch

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

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

生命周期系列

Provide && Inject

Refs

isReadonly

isRef

isReactive

移除過(guò)濾器filters

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

自定義v-model修飾符

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

自定義指令更改

最后