代码地址：https://gitee.com/zzhua195/easyblog-web-vuee

Framework.vue

在这个布局组件中，监听main的滚动事件，获取滚动的距离，将它存入store，以便其它组件能够共享，监听到

Blog.vue

1. 先给main-body-right动态绑定sitcky的类名，在这个类名下，先设置好固定定位的样式
2. 监听store里的滚动距离，如果大于这个距离，就给main-body-right添加sticky这个类名，如果小于就删除这个类名
3. 第三步也是最麻烦的，我们需要动态的获取到teamUserRef这个dom距离它的定位父元素的高度，不想写死这个高度。有几个坑踩过了：
   1. 不能直接在onMounted中获取mainRef距离它最近的定位父元素的高度，因为onMounted是在组件挂载完后执行，注意到，在setup里面，是通过promise发的异步请求，数据还没返回来，这个时候setup已经执行完了，用的是定义的最初的数据就进行了渲染
   2. 不能直接在then的回调中直接去拿mainRef距离它最近的定位父元素的高度，因为（js单线程），等到数据回来了（事件循环任务队列），执行完then回调后（整个then执行完），再执行的渲染，应该是要等到到渲染完毕，才能获取到这个距离，要放到nextTick里面才行。
   3. 因为在setup里面有获取专栏和专题这2个数据，也不知道谁先谁后，所以两个地方都写吧
   4. mainRef刚开始是直接写在BlogItem组件上的，发现拿到的是undefined，是因为vue3需要使用defineExpose把组件需要的东西暴露出来，才能拿到，拿到的也不是dom。我以为拿到的是dom，这是错的！
   5. 也可以监听BlogItem的finished事件，来获取这个高度，但是触发事件时也必须写在onUpdated里面，
   6. 下面是执行的打印情况，也可以从中看出vue它的执行过程，可以看到三个子组件先onMounted了，然后父组件就onMounted了，然后专栏的数据响应回来了，先把回调全部执行完（专栏同步），然后触发子组件更新，updated回调，然后nextTick就执行了，专题也是一样。
      
      
      

BlogItem.vue