<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • <>二、常用 Composition API

    <>7. 計算屬性與監視

    <>7.1 computed函數

    * 與Vue2.x中computed配置功能一致
    * 寫法 <template> <h1>一個人的信息</h1> 姓:<input type="text" v-model=
    "person.firstName"> <br> <br> 名:<input type="text" v-model="person.lastName"> <
    br> <br> <span>全名:{{ person.fullName }}</span> <br> 全名:<input type="text" v-
    model="person.fullName"> </template> <script> import {reactive, computed} from
    'vue' export default { name: 'Demo', /* computed: { fullName(){ return
    this.person.firstName + '-' + this.person.lastName } }, */ //數據 setup(){ //數據
    let person = reactive({ firstName: '張', lastName: '三', })
    //計算屬性——簡寫(沒有考慮計算屬性被修改的情況) /* person.fullName = computed(() => { return
    person.firstName + '-' + person.lastName }) */ //計算屬性——完整寫法(考慮讀和寫) person.
    fullName= computed({ get(){ return person.firstName + '-' + person.lastName },
    set(value){ const newArr = value.split('-') person.firstName = newArr[0] person.
    lastName= newArr[1] } }) //返回一個對象(常用) return { person, } } } </script>
    <>7.2 watch函數

    * 與Vue2.x中watch配置功能一致
    * 兩個小“坑”:
    * 監視reactive定義的響應式數據時:oldValue無法正確獲取、強制開啟了深度監視(deep配置失效)。
    * 監視reactive定義的響應式數據中某個屬性時:deep配置有效。 <template> <h2>當前求和為:{{ sum }}</h2> <
    button @click="sum++">點我+1</button> <hr> <h2>當前的信息為:{{ msg }}</h2> <button
    @click="msg+='!'">修改信息</button> <hr> <h2>姓名:{{ person.name }}</h2> <h2>年齡:{{
    person.age }}</h2> <h2>薪資:{{ person.job.j1.salary }}</h2> <button @click=
    "person.name += '~'">修改姓名</button> <button @click="person.age++ ">增長年齡</button>
    <button @click="person.job.j1.salary++">漲薪</button> </template> <script> import
    {ref, reactive ,watch} from 'vue' export default { name: 'Demo', //Vue2
    //watch: { //簡寫 /* sum(newValue, oldValue){ console.log('sum的值變化了!', newValue,
    oldValue); } */ //完整 /* sum: { immediate: true, deep: true, handler(newValue,
    oldValue){ console.log('sum的值變化了!', newValue, oldValue); } } */ //}, //數據 setup(
    ){ //數據 let sum = ref(0) let msg = ref('你好啊') let person = reactive({ name: '張三'
    , age: 18, job: { j1: { salary: 20 } } }) //情況一:監視ref所定義的響應式數據 watch(sum, (
    newValue, oldValue) => { console.log('sum變了',newValue, oldValue); }, {immediate:
    true}) //情況二:監視ref所定義的多個響應式數據 watch([sum, msg], (newValue, oldValue) => {
    console.log('sum或msg變了', newValue, oldValue); },{immediate: true}) /*
    情況三:監視reactive所定義的一個響應式數據的全部屬性 1. 注意:此處無法正確的獲取oldValue 2.
    注意:強制開啟了深度監視(deep配置無效) */ watch(person, (newValue, oldValue) => { console.log(
    'person變化了', newValue, oldValue); }) //情況四:監視reactive所定義的一個響應式數據中的某個屬性 watch(()
    => person.age, (newValue, oldValue) => { console.log('person年齡變化了', newValue,
    oldValue); }) //情況五:監視reactive所定義的一個響應式數據中的某些屬性 watch([() => person.age, () =>
    person.name], (newValue, oldValue) => { console.log('person年齡或姓名變化了', newValue,
    oldValue); }) //特殊情況 watch(() => person.job, (newValue, oldValue) => { console.
    log('person的job變化了', newValue, oldValue); }, {deep: true})
    //此處由于監視的是reactive定義的對象中的某個屬性,所以deep配置有效 //返回一個對象(常用) return { sum, msg, person,
    } } } </script>
    <>7.3 watchEffect函數

    * watch的套路是:既要指明監視的屬性,也要指明監視的回調。
    * watchEffect的套路是:不用指明監視哪個屬性,監視的回調中用到哪個屬性,那就監視哪個屬性。
    * watchEffect有點像computed:
    * 但computed注重的計算出來的值(回調函數的返回值),所以必須要寫返回值。
    * 而watchEffect更注重的是過程(回調函數的函數體),所以不用寫返回值。
    //watchEffect所指定的回調中用到的數據只要發生變化,則直接重新執行回調。 watchEffect(() => { const x1 = sum.
    valueconst x2 = person.job.j1.salary console.log('watchEffect所指定的回調執行了'); })
    <>8. 生命周期

    * Vue3.0中可以繼續使用Vue2.x中的生命周期鉤子,但有有兩個被更名:
    * beforeDestroy改名為 beforeUnmount
    * destroyed改名為 unmounted
    * Vue3.0也提供了 Composition API 形式的生命周期鉤子,與Vue2.x中鉤子對應關系如下:
    * beforeCreate===>setup()
    * created=======>setup()
    * beforeMount ===>onBeforeMount
    * mounted=======>onMounted
    * beforeUpdate===>onBeforeUpdate
    * updated =======>onUpdated
    * beforeUnmount ==>onBeforeUnmount
    * unmounted =====>onUnmounted <template> <h2>當前求和為:{{ sum }}</h2> <button
    @click="sum++">點我+1</button> </template> <script> import {onBeforeMount, ref,
    onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
    export default { name: 'Demo', //通過配置項的形式使用生命周期鉤子 beforeCreate(){ console.log(
    '---beforeCreate---'); }, created(){ console.log('---created---'); },
    beforeMount(){ console.log('---beforeMount---'); }, mounted(){ console.log(
    '---mounted---'); }, beforeUpdate(){ console.log('---beforeUpdate---'); },
    updated(){ console.log('---updated---'); }, beforeUnmount() { console.log(
    '---beforeUnmount---'); }, unmounted(){ console.log('---unmounted---'); }, //數據
    setup(){ console.log('---setup---'); //數據 let sum = ref(0)
    //通過組合式API的形式去使用生命周期鉤子 onBeforeMount(() => { console.log('---onBeforeMount---');
    }) onMounted(() => { console.log('---onMounted---'); }) onBeforeUpdate(() => {
    console.log('---onBeforeUpdate---'); }) onUpdated(() => { console.log(
    '---onUpdated---'); }) onBeforeUnmount(() => { console.log(
    '---onBeforeUnmount---'); }) onUnmounted(() => { console.log('---onUnmounted---'
    ); }) //返回一個對象(常用) return { sum, } } } </script>
    <>9. 自定義hook函數

    * 什么是hook?
    ——本質是一個函數,把setup函數中使用的Composition API進行了封裝。
    * 類似于vue2.x中的mixin。
    * 自定義hook的優勢:復用代碼,讓setup中的邏輯更清楚易懂。
    usePoint.js
    import { reactive, onMounted, onBeforeUnmount } from 'vue' export default
    function (){ //實現鼠標打點的相關數據 let point = reactive({ x: 0, y: 0 }) //實現鼠標打點的方法
    function savePoint(e){ point.x = e.pageX point.y = e.pageY console.log(e.pageX,
    e.pageY); } //實現鼠標打點的相關的生命周期鉤子 onMounted(() => { window.addEventListener('click'
    , savePoint) }) onBeforeUnmount(() => { window.removeEventListener('click',
    savePoint) }) return point }
    App.vue
    <template> <button @click="isShowDemo = !isShowDemo">切換隱藏/顯示</button> <Demo v-
    if="isShowDemo"></Demo> <hr> <Test></Test> </template> <script> import {ref}
    from 'vue' import Demo from './components/Demo.vue' import Test from
    './components/Test.vue' export default { name: 'App', components: {Demo, Test},
    setup(){ let isShowDemo = ref(true) return {isShowDemo} } } </script>
    components/Demo.vue
    <template> <h2>當前求和為:{{ sum }}</h2> <button @click="sum++">點我+1</button> <hr> <
    h2>當前點擊時鼠標的坐標為: x: {{point.x}}, y: {{point.y}}</h2> </template> <script> import
    { ref } from 'vue' import usePoint from '../hooks/usePoint' export default {
    name: 'Demo', //數據 setup(){ //數據 let sum = ref(0) let point = usePoint()
    //返回一個對象(常用) return { sum, point } } } </script>
    <>10. toRef

    *
    作用:創建一個 ref 對象,其value值指向另一個對象中的某個屬性。

    *
    語法:const name = toRef(person,'name')

    *
    應用: 要將響應式對象中的某個屬性單獨提供給外部使用時。

    *
    擴展:toRefs與toRef功能一致,但可以批量創建多個 ref 對象,語法:toRefs(person)

    APP.vue
    <template> <h2>姓名:{{ name }}</h2> <h2>年齡:{{ age }}</h2> <h2>薪資:{{ job.j1.salary
    }}</h2> <button @click="name += '~'">修改姓名</button> <button @click="age++ ">增長年齡<
    /button> <button @click="job.j1.salary++">漲薪</button> </template> <script>
    import {ref, reactive, toRef, toRefs} from 'vue' export default { name: 'Demo',
    //數據 setup(){ //數據 let person = reactive({ name: '張三', age: 18, job: { j1: {
    salary: 20 } } }) // const name1 = person.name // console.log('%%%', name1); //
    const name2 = toRef(person, 'name') // console.log('###', name2); const x =
    toRefs(person) console.log('@@@', x); //返回一個對象(常用) return { // name:
    toRef(person, 'name'), // age: toRef(person, 'age'), // salary:
    toRef(person.job.j1, 'salary') ...toRefs(person) } } } </script>

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频