vue3.0

生命周期

1. 寫法一 和vue2.x 一致 區別在于（beforeUnmount、unmount）名稱不一樣
2. 寫法二 在setup 中使用， 需要引用
   如： import { onBeforeMount } from ‘vue’
   Setup(){ onBeforeMount( () =>

Hook

Hook：是一個函數、把setup函數中的組合api進行了封裝，類似于vue2中的mixin，
Src目錄下新建hooks文件夾 里面寫各種邏輯的hook

toRef 和 torefs

在使用 reactive 創建對象后， 在模板中使用對象中的屬性， 會多次書寫 對象的名稱。可以使用這兩個api 來把要使用的 單獨定義出來

const hero = reactive({
  name: 'zhangsan',
  age: 23,
  family: {
    mather: 'dd'
  }
})
const name = toRef(hero, 'name')
const namgChange = () => {
  hero.name = 'lisi'
}

<h1>{{hero.name}}</h1>
<h1>{{name}}</h1>
<button @click="namgChange">
  變化
</button>

上面列子中對hero.name 修改和對 name修改時同等效果的
上面toRef 一次只能處理一個屬性

toRefs 一次能處理多個屬性

import { toRefs } from "vue";
 setup() {
return {
     ...toRefs(Hero)
    }
}

toRaw

操作場景 用于讀取響應式數據，后續操作不會引起頁面數據變化
將一個由reactive生成的響應式對象轉為普通對象（ref生成的不行）

markRaw

標記一個對象永遠不作為響應式對象
用法 markRaw(需要標記的對象)

customRef

創建一個自定義的ref，并對其依賴項跟蹤和更新觸發進行顯式控制，customRef里面需要寫一個函數，函數接收兩個參數，并且應該返回一個帶有 get 和 set 的對象
track () 在get中通知vue追蹤return出去的數據變化
tigger() 在set中改完數據后 通知vue重新解析模板

<template>
  <input v-model="keyword" />
  <h3>{{keyword}}</h3>
</template>

<script>
import { customRef } from "vue";
export default {
  name: 'Testvue',
  setup() {
    function myref(value,time = 1000) {
      let timer;
      return customRef((track, tigger) => {
        return {
          get() {
            track() // 通知vue追蹤value的變化
            return value
          },
          set(newValue) {
            clearTimeout(timer)
            timer = setTimeout(() =>{
              value = newValue
              tigger() // 改完數據后 通知vue重新解析模板
            }, time)
          }
        }
      })
    }
    let keyword = myref('hello', 500)
    return {
      keyword
    }
  }
};
</script>

provide 和 inject

父組件用provide提供數據 后代組件用inject使用數據
父組件

<template>
  <input v-model="keyword" />
  <h3>{{keyword}}</h3>
  <hellochild></hellochild>
</template>

<script>
import { customRef, provide } from "vue";
import hellochild from './hellochild.vue'
export default {
  name: 'Testvue',
  components: {
    hellochild
  },
  setup() {
    function myref(value,time = 1000) {
      let timer;
      return customRef((track, tigger) => {
        return {
          get() {
            track() // 通知vue追蹤value的變化
            return value
          },
          set(newValue) {
            clearTimeout(timer)
            timer = setTimeout(() =>{
              value = newValue
              tigger() // 改完數據后 通知vue重新解析模板
            }, time)
          }
        }
      })
    }
    let keyword = myref('hello', 500)
    provide('keyword', keyword)
    return {
      keyword
    }
  }
};
</script>

子組件

<template>
  <div>
    我是組件件， 看下 父組件的 keyword {{keyword}}
  </div>
</template>
<script setup>
import {inject} from 'vue'
let keyword = inject('keyword')
</script>

Computed計算屬性

有簡寫和完整寫法之分，完整寫法考慮讀寫

   // 計算屬性 簡寫 -- 單純的讀取
    person.fullName = computed(() => {
      return person.firstName + person.lastName
    })

    // 計算屬性完整寫法 --- 考慮修改
    person.fullName = computed({
      get() {
        return person.firstName + person.lastName
      },
      set(value) {
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })

watchEffect

不用指明監聽那個屬性的變化，回調函數中用到哪個屬性，就監聽那個屬性變化

watch監聽

監聽ref所定義的一個響應式數據

1. 監聽誰
2. 回調函數
3. 配置對象

<template>
  <h3>當前數值：{{ sum }}</h3>
  <button @click="sum++">增加</button>
</template>
<script>
import { ref, watch } from "@vue/runtime-core";
export default {
  setup() {
    let sum = ref(0);
    watch(
      sum,
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即監聽
        deep: true, // 深度監聽
      }
    );
    return {
      sum,
    };
  },
};
</script>

監聽ref 所定義的多個響應式數據

當監聽多個響應式數據時，將多個數據放在一個數組里面，這樣監聽的newValue和oldValue都也都是也數組的形式呈現

<template>
  <h3>當前數值：{{ sum }}</h3>
  <button @click="sum++">增加</button>
  <h3>標題：{{ title }}</h3>
  <button @click="title+='~'">增加</button>
</template>
<script>
import { ref, watch } from "@vue/runtime-core";
export default {
  setup() {
    let sum = ref(0);
let title = ref("hi~");
// 監聽多個
watch(
      [sum,title],
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即監聽
        deep: true, // 深度監聽
      }
    )
    return {
      sum,
      title,
    };
  },
};
</script>

監聽reactive 所定義的響應式數據的全部屬性

無法正確獲取oldValue，并且強制開啟了深度監聽。

監聽reactive 所定義的某個屬性

第一個參數要以回調函數返回寫法

<template>
  <h3>姓名：{{Hero.username}}</h3>
  <h3>年齡：{{Hero.age}}</h3>
  <button @click="Hero.age++">改變年齡</button>
  <button @click="Hero.username += '~'">改變姓名</button>
</template>
<script>
import { reactive, watch } from "@vue/runtime-core";
export default {
  setup() {
    let Hero = reactive({
      username: '李四',
      age: 18,
      job: {
        j1: {
          speak: '你好'
        }
      }
    })
    // reactive所定義的響應式數據的某個屬性
    watch(
      ()=>Hero.age, // 以回調形式拿到監聽的屬性
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即監聽
        deep: true, // 深度監聽
      })
    return {
     Hero
    };
  },
};
</script>

監聽reactive 所定義的數據的多個屬性

如果監聽的屬性嵌套層次比較深 則需要開啟深度監聽

watch(
      [()=>Hero.username, ()=>Hero.age, () =>Hero.job], // 以回調形式拿到監聽的屬性
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即監聽
        deep: true, // 深度監聽
    })