Vue.js。仅初始化数据绑定的最佳实践？

我有一个由Bootstrap管理的组件，特别是其中一个导航选项卡小部件，当您单击Bootstrap时，它会显示和隐藏

引导程序使用

.active

类跟踪单击的项目。在Vue中，我要将某个nav初始化为在页面加载时处于活动状态。但是，一旦完成，我希望Vue将

.active

类管理完全交给引导

<template>
<li class="nav-item"  v-if="toshow">
    <a class="nav-link" v-bind:id="'nav_' + link" 
    :class="{ active: isActive }" :aria-expanded="isActive"
    v-bind:href="'#'+link" data-toggle="tab" @click="onclick">
        {{label_}}
        <span v-if="badge" class="badge" :class="badge_level">{{badge}}</span>
        <span v-if="dynamic_badge" class="badge" :class="badge_level" >{{badge_value}}</span>
    </a>
</li>
</template>

v-once

不太合适，因为我只想禁用

.active

的计算（徽章子项需要实时更新）

这个组件可以正常工作。我认为主要是因为

这个.store.state.active_选项卡的值没有变化，所以Vue不会重新渲染。但充其量它看起来很脆

使用Vue仅设置某些变量的初始值，然后放弃控制，而不使用
v-once
，最佳做法是什么？
我只需访问
a.nav-link
元素，并将
.active
类直接添加到其
类列表中

您可以向
a.nav-lank
元素链接添加
ref
属性，以便：

<a class="nav-link" ref="link" ...>
  ...
</a>

但是Vue是否会在需要重新渲染时立即返回并抓取
数据.isActive
以填充
.active
？在我的例子中，我认为我可以接受这一点。但是，假设该组件有另一个绑定属性/值，例如，
{{record\u count}}
，该属性/值应保持活动并同步。如果更新了
record\u count
的基础数据或存储源，则组件将重新呈现为
record\u count
，这很好。但是
active
也会根据
数据再次更新。isActive
，不是吗？啊，好的，我现在明白了。您希望最初设置
活动
类，但不绑定它。看到我的最新答案了吗。因此，基本上，避免绑定这种类型的用例，并在
mounted
中初始化内容。有道理。
<a class="nav-link" ref="link" ...>
  ...
</a>

mounted() {
  if (this.link === this.$store.state.active_tab) {
    this.$refs.link.classList.add('active');
  }
}