个人经验仅供参考
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这种事情。