Vue使用总结-包括Vue2和Vue3

API开发风格

1. 选项式

2. 组合式

计算属性: computed

使用计算属性可以避免重复计算。计算属性和methods中方法的区别就是：计算属性中方法返回的值会基于其响应式依赖被缓存，而普通方法会每次重新执行不缓存。

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

类与样式绑定: v-bind

绑定到模板

<div :class="{ active: isActive }"></div>
<!-- 绑定多个class，就需绑定数组 -->
<div :class="[activeClass, errorClass]"></div>

// 对应的data()
data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

绑定到组件

<MyComponent :class="{ active: isActive }" />

条件渲染：v-if、v-show

v-if

• v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

<h1 v-if="awesome">Vue is awesome!h1>

• 可结合v-else-if、v-else使用

<div v-if="type === 'A'">
  A
div>
<div v-else-if="type === 'B'">
  B
div>
<div v-else-if="type === 'C'">
  C
div>
<div v-else>
  Not A/B/C
div>

• v-if可作用于