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

  • <>computed 計算屬性

    計算屬性是指 基于現有狀態派生 (演變) 出新的狀態,現有狀態發生變化,派生狀態重新計算。
    computed 接收回調函數作為參數,基于回調函數中使用的響應式數據進行計算屬性的創建,回調函數的返回值就是基于現有狀態演變出的新狀態。
    // 定義一個數據 const num = ref(0); // result 通過計算num動態獲得 const result = computed(()
    => num.value * 2);
    * 完整寫法 import { ref, computed } from 'vue'; export default { setup() { //
    響應式數據 const firstName = ref('張'); const lastName = ref('三'); // 計算屬性(完整寫法,考慮讀和寫)
    const fullName = computed({ get() { return firstName.value + lastName.value; },
    set (value) { const nameArr = value.split('-'); firstName.value = nameArr[0];
    lastName.value = nameArr[1]; }, }); // 返回所有的數據和方法,才能使用 return { firstName,
    lastName, fullName } } }
    案例:動態顯示名字。
    <template> <input type="text" v-model="firstName" /> <input type="text"
    v-model="lastName" /> <div>姓名:{{ name }}</div> </template> <script> import {
    ref, computed } from 'vue'; export default { setup() { const firstName =
    ref(''); const lastName = ref(''); // 姓名通過計算屬性獲得 const name = computed(() =>
    firstName.value + lastName.value); return { firstName, laseName, name } } }
    </script>
    <>watch 監聽狀態

    watch 方法用于監聽響應式數據的變化,數據發生變化時觸發。
    Vue2 的 watch 是一個配置項,Vue3 的 watch 是一個方法。
    # 語法格式 watch([監視對象], fn{監視的回調}, {監視的配置});
    <>監聽 ref 的響應式數據

    監聽 ref 數據時,不能使用 .value,因為監聽的是 value 的值,而不是 ref 數據。

    * 監聽多個值時,newValue 和 oldValue 會接收一個數組,參數是監聽的每一項。

    使用 watch 方法監聽基于 ref 創建的響應式數據 (基本數據類型)。
    <template> <input type="text" v-model="str"> </template> <script> import {
    ref, watch } from 'vue'; export default { setup() { const str ref(''); //
    監聽表單內容 str watch(str, (newValue, oldValue) => { console.log(newValue,
    oldValue); }, { // 監聽的配置 immediate: true, deep: true }); // 返回所有的數據和方法,才能使用
    return { str } } } </script>
    使用 watch 監聽基于 ref 創建的響應式數據 (引用數據類型)。
    import { ref, watch } from "vue"; export default { setup() { const person = ref
    ({ name: '張三' }); // 監聽 watch(person.value, (newValue, oldValue) => { console.
    log(newValue, oldValue); }, { // 監聽的配置 immediate: true, deep: true }); //
    返回所有的數據和方法,才能使用 return { person } }, };
    使用 watch 監聽響應式數據內部的具體屬性 (基本數據類型)
    import { ref, watch } from "vue"; export default { setup() { const person = ref
    ({ name: '張三' }); // 監聽 watch( () => person.value.name, (newValue, oldValue) =>
    { console.log(newValue, oldValue); } ); // 返回所有的數據和方法,才能使用 return { person } },
    };
    <>監聽 reactive 的響應式數據
    import { ref, watch } from "vue"; export default { setup() { const person =
    reactive({ name: '張三' }); // 監聽 watch(person, (newValue, oldValue) => { console.
    log(newValue, oldValue); }); // 返回所有的數據和方法,才能使用 return { person } }, };
    <>監聽 reactive 時存在的問題

    坑:監聽 reactive 時,oldValue 無法正確獲取,都是最新值。(Vue3的遺留問題)

    * 解決方案:
    watch 的 參數1 使用 () => 對象名.屬性名 監聽單個屬性,但是要使用 deep 深度監聽。(雖然麻煩,但是有效)
    const person = ref({ name: '張三', age: 18 }); watch( // 參數一寫法解決 oldValue 值無法獲取 [
    () => person.name, () => person.age], (newValue, oldValue) => { console.log(
    newValue, oldValue); } );
    坑:使用 reactive 時,強制開啟 deep 深度監視,且 deep 無法被關閉。(Vue3的遺留問題)

    import { ref, watch } from "vue"; export default { setup() { const person =
    reactive({ name: '張三' }); // 監聽 watch(person, (newValue, oldValue) => { console.
    log(newValue, oldValue); }, { deep: false, // 無效,無法關閉 }); // 返回所有的數據和方法,才能使用
    return { person } }, };
    <>watchEffect 監聽狀態

    watchEffect 函數在頁面加載完成后和數據更新時調用。
    watch 和 watchEffect 的區別:

    * watch:既要指明監視的屬性,也要指明監視的回調。
    * watchEffect:不用指明監視哪個屬性,監視的回調中用到哪個屬性,就監聽哪個屬性。
    watchEffect 和 computed 的區別:

    * computed 注重計算出來的值(回調函數的返回值),所以必須要寫返回值。
    * watchEffect 更注重的是過程(回調函數的函數),所以不用寫返回值。 # 語法格式 watchEffect(() => { console.
    log('watchEffect 函數執行了'); }) <template> <h1>{{ person.name }}</h1> <button
    @click="updatePerson">點擊更新名字</button> </template> <script> import { reactive,
    watchEffect } from "vue"; export default { setup() { // 響應式數據 let person =
    reactive({ name: "張三", age: 18, job: { j1: { salary: 20, }, }, }); // 監視
    watchEffect(() => { console.log("watchEffect執行了"); console.log(person.name);
    }); // 更新名字 const updatePerson = () => { person.name = "李四"; }; return {
    person, updatePerson }; }, }; </script>
    <>toRef 函數

    創建一個 ref 對象,其 value 值指向另一個對象中的某個屬性。
    大白話解釋:toRef
    方法用于將響應式數據內部的普通數據轉化為響應式數據,并且轉換后的數據和原始數據存在引用關系,存在引用關系意味著當原始數據發生變化后,toRefs
    轉換后的數據也會跟著變化。
    應用:要將響應式對象中的某個屬性單獨提供給外部使用時。
    // 語法 const name = toRef(對象名, '屬性名') <template> <h1>{{ name }}</h1> <h1>{{ age
    }}</h1> <h1>{{ salary }}</h1> </template> <script> import { reactive, toRef }
    from 'vue' export default { name: 'App', setup() { let person = reactive({
    name: '張三', age: 18, job: { j1: { salary: 20 } } }) return { pname:
    toRef(person, 'name'), age: toRef(person, 'age'), salary: toRef(person.job.j1,
    'salary') } }, } </script>
    <>toRefs 函數

    toRefs方法接收引用數據類型的響應式數據,它可以將數據中的第一層屬性全部轉換為響應式數據,返回值是一個對象,對象中存儲了所有轉換之后的響應式數據。
    export default { setup() { const person = reactive({ name: "張三", brand: { title
    : "寶馬", year: 1 } }); return { ...toRefs(person), ...toRefs(person.brand) //
    轉換第二層數據為響應式 } } }

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