學(xué)習(xí)vue3的過(guò)程,個(gè)人覺(jué)得vue3有好多很棒的優(yōu)點(diǎn)或者寫(xiě)作規(guī)范,記錄下來(lái),方便復(fù)習(xí)
setup,reactive這種入門(mén)的就不記錄了

1.更徹底的關(guān)注和邏輯點(diǎn)分離

舉個(gè)例子,父組件login里面有一個(gè)彈窗子組件toast.
彈窗需要通過(guò)v-if來(lái)開(kāi)關(guān),還支持自定義內(nèi)容展示

vue2的寫(xiě)法:
v-if的變量放在父組件中,父組件還要提供一個(gè)函數(shù)來(lái)控制v-if的變量和彈窗組件的消息變量

vue3:
子組件

<template>
    <div>{{message}}</div>
</template>
<script>
import {reactive} from 'vue'
export default {
    props:['message'],
    setup() {
        
    },
}

export const useToastEffect = ()=>{
   const toastData = reactive({
       showToast:false,
       toastMessage:''
   })

   const showToast = (message)=>{
       toastData.showToast = true
       toastData.toastMessage = message

       setTimeout(()=>{
            toastData.showToast = false
       toastData.toastMessage = ''
       },2000)
   }

   return {toastData,showToast}
}

</script>

父組件

<template>
  <div class="wrapper">
    <div class="wrapper_input">
      <input
        class="wrapper_input_content"
        v-model="userdata.username"
        placeholder="賬號(hào)"
      />
    </div>

    <div class="wrapper_input">
      <input
        class="wrapper_input_content"
        v-model="userdata.password"
        placeholder="密碼"
        type="password"
      />
    </div>

    <div class="wrapper_login-button" @click="handleLogin">登陸</div>

    <div class="wrapper_login-link">立即注冊(cè)</div>

    <Toast v-if="toastData.showToast" :message="toastData.toastMessage" />
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { login } from "@/api/login";
import Toast, { useToastEffect } from "@/components/Toast";
export default {
  name: "login",
  components: {
    Toast,
  },
  setup() {
    const router = useRouter();
    const userdata = reactive({
      username: "",
      password: "",
    });
    const { toastData, showToast } = useToastEffect();

    const handleLogin = async () => {
      let { data } = await login({
        username: userdata.username,
        password: userdata.password,
      });

      if (data.code === 0) {
        localStorage.isLogin = true;
        router.push({ name: "Home" });
      } else {
        showToast("登陸失敗");
      }
    };
    return { handleLogin, userdata, toastData };
  },
};
</script>

<style scoped lang="scss">
</style>

可以看到在vue3中,子組件的控制變量和控制函數(shù)由子組件引入.
如果這個(gè)彈窗被多個(gè)組件使用,代碼的維護(hù)性上就會(huì)好很多

2.toRefs
toRefs是個(gè)語(yǔ)法糖,用來(lái)結(jié)構(gòu)reactive遍歷的對(duì)象
沒(méi)有toRefs的時(shí)候,要把整個(gè)reactive的對(duì)象暴漏出去,使用的時(shí)候也要按照對(duì)象的方式使用,有點(diǎn)繁瑣

image.png

使用toRefs后的效果

image.png

3.ref
ref本質(zhì)就是reactive,最佳實(shí)踐:自定義的變量建議都由reactive來(lái)定義,那么ref用在什么場(chǎng)景呢?
a.用在開(kāi)始由一個(gè)常量初始化的場(chǎng)景

const categories = [
  {
    name: "全部商品",
    tab: "all",
  },
  {
    name: "秒殺",
    tab: "seckill",
  },
  {
    name: "新鮮水果",
    tab: "fruit",
  },
];

const currentTab = ref( categories[0].tab)