【Vue3+js+vite】vue3项目实战部署+新api 持续更新~~（setup）

个人经验仅供参考

Setup+新生命周期

概念性质的请各位去官网查看官方文档，本文只分享开发经验。

在我理解看来setup是用来代替vue原来响应式数据定义（data）与函数定义(methods&生命周期)，我们可以在setup中完成变量初始化定义，对这些变量进行操作以及定义函数方法。

同样这些变量也是响应式数据，不过要使用API把他们转换成响应式数据

ref
接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

toRef
可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

import { ref,onMounted } from "vue";
//这里是我在setup中定义用于面包屑的路由参数
setup() {
    const routes = ref([
      {
        path: "/clientList",
        breadcrumbName: "客户列表",
      },
    ]);
    onMounted(() => {
      console.log('Component is mounted!')
    })
    return {
      routes,
    };
 }

通过return出来之后就可以像原来调用data中的数据一样调用了，同样也可以被修改。

如果要在setup中执行生命周期钩子函数，那我们也要把它引入。

个人理解：setup中可以同时进行逻辑运算以及定义响应式数据，使用的是面向对象式编程，但是如果我们舍弃了data，methods，watch等API把所有的东西都在setup中处理，我认为会使代码非常的难以维护，我还是习惯于把函数逻辑运算写在methods中，data中定义响应式数据，setup中可以处理一些原来我们在生命周期中处理的事情，比如把从父组件中传递来的数据进行一些筛选以及处理，添加key或value这种事情。