格式，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, //是否首次进行监听，默认false
        deep: 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的值

//还可以设置set
const newTest3 = computed({
    get() {
        return test.value + 10
    },
    set(value) {
        //自己根据需要处理
        test.value = value - 10
    }
})

//直接计算 store的值
const store = useStore()
const menList = computed(() => store.state.menuList)