0625-碎碎念

为什么访问 url 指向 相同的子组件,它不更新. 子组件更新 原理是什么啊? 有相关数据发生改变 相关数据必须是一个 响应式对象(proxy对象) 因为这个对象上有一个 get\set 拦截器 当某一个数据发生set 设置值 这种情况发生的时候 它就要知道，这个相关的数据 发生了改变 我的页面也跟着更新。 proxy 里边的 set() 这个拦截器 里边一定有这么一句话 set() { 清除现在 |子组件| 中的所有VNode元素，执行 render函数 创建新的VNode元素 } $route 这个属性是从哪来的? vue 里边来的? 它是在 app.use(route_app) 时，在 app.config.globalProperties 上定义的. 定义的时候，它是有一个固定的对象的. 里边的数据是随着 window.location.pathname 发生改变，将解析后的 数据挂载到自身属性上。$route 它不是一个新对象，它是在 app.use() 期间就已经挂载上了。 为了让这个$route 与后面我们挂载上的 component 子组件之间产生联系，那我们就必须使用一个 侦听函数去 侦听它。 在这个变量发生改变的时候，我们就 更新当前子组件自身。

定义要监视的对象 是一个地址yo~

const page_data = ref({user_id: route.params.id, class_id: route.params.class_id});

监视的时候，也是以地址为单位，直接替换原始地址

watch(() => ({ user_id: route.params.id, class_id: route.params.class_id }), (newValue) => {
  page_data.value = newValue;})

如果设置为reactive的话：

let page_data_example = reactive({ user_id: route.params.id, class_id: route.params.class_id });

watch(()=>({ user_id: route.params.id, class_id: route.params.class_id }),
(newValue)=>{
    page_data_example.value.user_id = newValue.user_id;
    page_data_example.value.class_id = newValue.class_id;
})

其实说实话,它两个值更新时间很短, 所以说 proxy 代理它也会检测 update 子组件的刷新(更新)频率,在两个定义 很短的时间内,它决对不会 重复更新两次. 但是这么写 真没必要. 如果你传递10个参数呢?