vue3 学习笔记

学习vue3的过程,个人觉得vue3有好多很棒的优点或者写作规范,记录下来,方便复习
setup,reactive这种入门的就不记录了

1.更彻底的关注和逻辑点分离

举个例子,父组件login里面有一个弹窗子组件toast.
弹窗需要通过v-if来开关,还支持自定义内容展示

vue2的写法:
v-if的变量放在父组件中,父组件还要提供一个函数来控制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="账号"
      />
    </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">立即注册</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中,子组件的控制变量和控制函数由子组件引入.
如果这个弹窗被多个组件使用,代码的维护性上就会好很多

2.toRefs
toRefs是个语法糖,用来结构reactive遍历的对象
没有toRefs的时候,要把整个reactive的对象暴漏出去,使用的时候也要按照对象的方式使用,有点繁琐

image.png

使用toRefs后的效果

image.png

3.ref
ref本质就是reactive,最佳实践:自定义的变量建议都由reactive来定义,那么ref用在什么场景呢?
a.用在开始由一个常量初始化的场景

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

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