vueWatch

简单讲讲vue3的watch函数和:deep伪类选择器

watch 函数说明

1. watch 是 Vue 3 的组合式 API 之一，用于监听响应式数据的变化
2. 它接收两个主要参数：
   • 第一个参数：要监听的数据源（这里是一个返回 route.params.id 的箭头函数）
   • 第二个参数：当数据变化时触发的回调函数

watch(
  () => route.params.id,  // 监听路由参数中的id变化
  (newId) => {           // newId 是变化后的新值
    if (newId) {
      fetchData()        // 当id变化时重新获取数据
      console.log("重新获取推荐视频")
    }
  }
)

const fetchData = () => {
  axios({
    url: '/videoDetail',
    method: 'get',
    params: { id: route.params.id }
  }).then(({ data }) => {
    videoInfo.value = data.result
    console.log('视频详情数据', data.result)
  })
}

这是一个典型的用例，常用于需要根据路由参数重新获取数据的场景。

• newId 在这里指的是路由参数中的 id 的新值
• 这段代码的作用是监听视频的 ID 变化（通常在 URL 中），当用户切换到不同的视频时：
  1. 路由参数 id 发生变化
  2. watch 检测到变化，触发回调函数
  3. 执行 fetchData() 获取新视频的推荐内容

key动态监测变化，自动重新渲染组件

• 接着上面的例子，当检测到路由id变化后通过fetchData重新获数据后，还需要通过组件标签中的key属性实现组件自动重新渲染；如下例子所示，路由变化后嵌入的视频会自动更新；

   <div class="video-play">
        <iframe
       :key="videoInfo.videoSrc"
        :src="videoInfo.videoSrc"
      >
      </iframe>
  </div>

:deep() 选择器

:deep() 是 Vue 3 中的深度选择器，用于穿透 scoped CSS 的作用域限制。

1. 当使用 <style scoped> 时，Vue 会为组件的元素添加一个唯一的属性（如 data-v-hash）
2. 样式会被编译为带有这个属性选择器的形式，从而将样式限制在当前组件内
3. 但有时我们需要修改子组件或第三方组件的内部元素样式，这时就需要 :deep()

• 另外值得注意的事，:deep属性最好选择class，不要选择组件名
• 使用示例

  // 不使用 :deep 时（只能影响当前组件的元素）
  .tabs .van-tab {
    color: red;
  }
  
  // 使用 :deep 后（可以影响子组件内部元素）
  .tabs :deep(.van-tab) {
    color: red;
  }

  比如说在vue项目中修改组件中引入的vant组件：:deep(.van-tab--active) 就是为了修改 Vant 组件库中 Tab 组件的激活状态样式。