vue中如何编写可复用的组件?

Posted 2023-05-18

参考技术A vue中如何编写可复用的组件?
1、组件命名
组件的命名应该跟业务无关。应该依据组件的功能为组件命名。
​2、组件业务数据无关
可复用组件只负责 UI 上的展示和一些交互以及动画，如何获取数据跟它无关，因此不要在组件内部去获取数据，以及任何与服务端打交道的操作。可复用组件只实现 UI 相关的功能。
​3、组件职责
约束好组件的职责，能让组件更好地解耦，知道什么功能是组件实现的，什么功能不需要实现。
组件可以分为通用组件（可复用组件）和业务组件（一次性组件）。
​可复用组件实现通用的功能（不会因组件使用的位置、场景而变化）：
（1）UI 的展示
（2）与用户的交互（事件）
（3）动画效果
​业务组件实现偏业务化的功能：
（1）获取数据
（2）和 vuex 相关的操作
（3）埋点
（4）引用可复用组件
​可复用组件应尽量减少对外部条件的依赖，所有与 vuex 相关的操作都不应在可复用组件中出现。
​组件应当避免对其父组件的依赖，不要通过 this. children 来引用子组件的示例，而是通过子组件的接口与之交互。

Vue-router 组件复用

【中文标题】Vue-router 组件复用

【英文标题】：Vue-router component reusing

【发布时间】：2019-03-01 11:42:30

【问题描述】：

我想知道如何在 Vue-router 中停止组件重用。

我正在构建一个简单的页面应用程序，但我无法在单击同一链接两次后更新数据。

是否有可能以某种方式强制重新加载或在我的情况下最佳做法是什么？

【参考方案1】：

使用router-view 上的key 属性设置为当前网址。它是内置的，因此无需编写任何代码。

<router-view :key="$route.fullPath"></router-view>

【讨论】：

这是否意味着每个组件总是在路由更改时重新渲染？

当路径（URL）改变时，整个视图被重新渲染。

【参考方案2】：

Vue 路由器重用相同的组件，因此不会调用挂载的钩子。如文档中所述：

相同的组件实例将被重用[...]组件的生命周期钩子不会被调用。

如果您想更新数据，您有两种选择：

观察 $route 对象

const User = 
  template: '...',
  watch: 
    '$route' (to, from) 
      // react to route changes...
    
  

使用 beforeRouteUpdate 导航保护

const User = 
  template: '...',
  beforeRouteUpdate (to, from, next) 
    // react to route changes...
    // don't forget to call next()
  

有关更详细的说明，您可以查看 Vue 路由器文档的响应参数更改部分：https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes。

【参考方案3】：

一种方法是在router-view 上放置一个键，并将时间戳查询字符串附加到您的router-link

const Home = 
    template: '<div>Home</div>',
    created() 
        console.log('This should log everytime you click home.');
    ,
;

const router = new VueRouter(
    mode: 'history',
    routes: [
         path: '/', component: Home ,
    ]
);

new Vue(
    router,
    el: '#app',
);

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<div id="app">
  <router-link :to="`/?q=$Date.now()`">/home</router-link>
  <router-view :key="$route.fullPath"></router-view>
</div>

不这样做的一个原因是因为它会强制重新渲染您可能希望重用的组件，例如像

这样的路由 /posts/1 /posts/2

【讨论】：

澄清一下...当我向我的 API 发送删除另一台设备上的帖子的请求，同时我在另一台设备上打开了所有帖子时会怎样？预期的行为（至少在我的情况下）是当我再次单击同一链接时，数据应该重新加载。但是什么也没发生。

@user8540556 您的数据是存储在组件本地还是 vuex 中？ GET 请求是在组件中发送还是在其他地方发送？

本地存储。请求在组件的mounted()方法中发送。

@user8540556 您是否看到单击链接时再次发送请求？如果是，返回的数据是否正确？