知识记录：

1.ref 和 reactive的区别

reactive 定义 基本类型的话 是不能修改的 是一个常量

@1从定义数据方面：

ref通常用来定义基本类型数据
reactive用来定义：引用类型数据
ref也可以用来定义对象或者数组类型的数据，内部会通过reactive转为代理对象
2、从原理方面：
ref通过Object.defineProperty()的get和set实现数据代理。
reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。

————————————————
版权声明：本文为CSDN博主「项哈哈想做前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45780818/article/details/119081706
————————————————
版权声明：本文为CSDN博主「一路向阳~负责的男人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43416349/article/details/120360330



1.  路由传参（2种方式）

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
routes：[
 {
        path: '/posts/:id', name: 'Details', component: Details, props: true
    },
]
props :true 用来传递参数
第一种：
在组件中使用props接收参数
// const props = defineProps({
//   id: Number
// })
const id = props.id;
 
第二种：通过当前路由接收参数
import {  useRoute } from "vue-router";
const id = route.params.id
 

2. 路由跳转
编程方式
import { useRouter} from "vue-router";
const router = useRouter();
const handleClick = () => {
  router.push('/')
}
 
3. 监听watch
import { watch, watchEffect } from 'vue';
watch([searchName, names], ([newSearch, newNames], [preSearch, preNames]) => {
  console.log('watch函数触发了', newSearch, newNames, preSearch, preNames)
})
 
watchEffect(() => {
  // 最开始就会执行一次，不需要触发
  // 不需要指定 只要回调里面使用到了 就会触发
  console.log('watchEffect执行了', searchName.value)
})
 
停止监听
const stopWatch = watch([searchName, names], ([newSearch, newNames], [preSearch, preNames]) => {
  console.log('watch函数触发了', newSearch, newNames, preSearch, preNames)
})
 
const stopEffect = watchEffect(() => {
  console.log('watchEffect执行了', searchName.value)
})
 
 
 
const handleStop = () => {
  stopWatch();
  stopEffect();
}