Vue3 路由监听watch 和 computed
Published on:2022-05-09
格式,demo需要是ref/reactive响应式类型的
watch(demo, () => {})
watch(() => demo.name, () => {})
监听路由方式
1.router
import { watch } from 'vue'import { useRoute, useRouter } from 'vue-router'const router = useRouter()//监听路由变化watch(router.currentRoute, (newRouter, oldRouter) => {console.log(newRouter.path)})
2.route
import { watch } from 'vue'import { useRoute, useRouter } from 'vue-router'const route = useRoute()//console.log(route)// {path: ComputedRefImpl, name: ComputedRefImpl, params: ComputedRefImpl, query: ComputedRefImpl}//可以监听 route.path,route.params route.query等等,方式如下watch(() => route.params,(newPath, oldPath) => {console.log(newPath)},{immediate: true, //是否首次进行监听,默认falsedeep: true //是否开启深度监听})
computed
const test = ref(1)const newTest = computed(() => {return test.value + 10})//直接箭头函数,等价于下面const newTest2 = computed({get() {return test.value + 10}})//设置 newTest2.value =xxx 不会修改test的值//还可以设置setconst newTest3 = computed({get() {return test.value + 10},set(value) {//自己根据需要处理test.value = value - 10}})//直接计算 store的值const store = useStore()const menList = computed(() => store.state.menuList)
留言列表(0)
加载更多
留言
开源项目
- B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
- B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
- B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
- B5GoCmf:gin + sqlx +bootstrap 实现后端管理系统
- See also:gitee.com@b5net
最新评论
pcy
:前排围观
Louis
:冰舞的博客使用yii框架做的吧,B5ThinkCMF在本地部署后,登录系统的响应时间要比B5YiiCMF的登录时间长,还有一些Bug待修复
w1
on Electron+vue搭建项目或将vue项目转为electron
:大佬
34
:感谢你的开源项目
奥德赛
on Electron+vue搭建项目或将vue项目转为electron
:大声道奥术大师大声道
cmf
:你好 你的B5ThinkCMF下载后有点问题 能帮忙解决下么?
laravel新手
:您好,laravel9+bootstrap3实现的快速开发后台,下载部署后,刷新加载,F12我看了下,我部署的是240毫秒左右,您部署的测试版本只有50毫秒左右,能辛苦指导下,如何优化lv吗,谢谢
瀑布
:你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
瀑布
:你好,今天看到你的开源项目,很喜欢,感谢你的开源
冰舞
on Laravel定时任务的实现
:测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试
文章分类
标签