Vue 基础：重新探寻那些被忽视的知识，增长见识

Vue 基础：揭开鲜为人知的奥秘

作为 Vue.js 开发人员，我们经常专注于学习框架的最新特性和功能。然而，巩固基础知识同样至关重要，因为它们是我们构建强大、可维护应用程序的基础。本文将带你重新审视 Vue.js 的一些基本概念，并揭开一些鲜为人知的知识点，以加深你的理解并提升你的开发技能。

1. 计算属性与侦听器

计算属性和侦听器都是 Vue.js 中用于响应式数据绑定的强大工具。计算属性基于其他响应式属性计算出一个新的属性，而侦听器则在响应式属性值发生变化时执行回调函数。

计算属性：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

侦听器：

watch: {
  count(newValue, oldValue) {
    // 对 count 值的变化做出反应
  }
}

2. v-if 与 v-show

这两个指令可用于条件性地渲染元素，但它们的工作方式略有不同。v-if 会动态地添加或删除元素，而 v-show 只会切换元素的可见性。

v-if：

<div v-if="isVisible">...</div>

v-show：

<div v-show="isVisible">...</div>

3. v-for

v-for 指令用于遍历数组或对象并为每个元素渲染一个模板。它支持一系列修饰符，例如：

• key： 为列表中的每个元素指定唯一键
• in： 指定要遍历的数据源
• of： 分配列表项到当前作用域中的变量

4. 路由链接与 HTML 超链接

Vue.js 的 组件可用于在应用程序内导航。它与标准 HTML 超链接 类似，但提供了额外的功能，例如：

<router-link to="/home">主页</router-link>

<a href="/home">主页</a>