Vue学习笔记（3）

3.1 计算属性和监视属性

3.1.1 计算属性

计算属性是一种计算值的方式，可以根据其他属性的值来动态地计算新的属性值。计算属性可以缓存计算结果，当依赖的属性发生改变时，才会重新计算。在Vue中，可以使用computed选项来定义计算属性，例如：

<template>
  <div>{{ fullName }}div>
template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + '-' + this.lastName
    }
  }
}
script>

3.1.2 监视属性

监视属性用于监听一个属性的变化，并在变化时执行相应的操作。在Vue中，可以使用watch选项来定义监视属性，例如：

<template>
  <div>{{ message }}div>
template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: ''
    }
  },
  watch: {
    count(newValue, oldValue) {
      this.message = 'Count changed from ' + oldValue + ' to ' + newValue
    }
  }
}
script>

3.1.3 两个属性的异同

相同点：

1. 都是处理响应式数据的方法，可以实时监控数据变化并做出相应的响应。
2. 都可以依赖于其他数据（data 中的属性、计算属性、甚至是其他监视属性），当这些数据变化时，计算属性和监视属性都会重新计算/执行。

不同点：

1. 计算属性是根据它的依赖属性（data 中的属性、计算属性）动态计算而来，它会根据依赖属性的变化自动重新计算；而监视属性是在某个属性变化时执行一段特定的代码，可以用来处理一些复杂的业务逻辑。
2. 计算属性可以缓存计算结果，当依赖的属性没有发生变化时，会直接返回之前缓存的计算结果，提高了性能；而监视属性不能缓存计算结果，每次依赖属性变化时都会重新计算。
3. 计算属性可以直接在模板中使用，不需要手动调用；而监视属性只能通过代码来触发执行。

3.1.4 使用场景

计算属性的使用场景：

1. 需要根据多个依赖属性计算得出一个属性值的场景，如一个购物车的总价。
2. 需要对某个属性进行复杂的逻辑计算，如对一个列表进行排序、筛选等操作。
3. 需要对模板中的数据进行格式化，如将时间戳转化为日期格式。
4. 需要对数据进行缓存，避免频繁计算，如根据条件过滤后的结果。

监视属性的使用场景：

1. 当需要在某个属性发生变化时执行一些操作，如发送 Ajax 请求、更新本地存储、修改其他数据等。
2. 当需要监听一个复杂对象或数组的变化时，如监听一个表单对象的变化，可以使用深度监视。
3. 当需要在组件加载时或销毁时执行一些操作时，如在组件加载时获取数据、在组件销毁时清除定时器。

总的来说，计算属性适合处理复杂的属性计算和数据格式化等场景，而监视属性适合监听数据的变化和执行一些特定的操作等场景，需要根据具体的业务需求来选择使用哪个特性。

3.2 v-show和v-if

3.2.1 作用

v-show 和v-if是 Vue.js 框架中的指令，都用于控制元素的显示与隐藏。使用 v-show 或v-if指令，将其添加到需要控制显示与隐藏的元素上，例如：

<div v-show="isVisible">Hello, World!div>
<div v-if="isVisible">Hello, World!div>

isVisible是一个布尔类型元素，当 isVisible 的值为 true 时，元素会显示出来，当 isVisible 的值为 false 时，元素会隐藏起来。

3.2.2 区别

1. v-show 通过 CSS 样式的控制来显示或隐藏元素。当 v-show 的值为 true 时，元素会被设置为 display: block，显示出来；当 v-show 的值为 false 时，元素会被设置为 display: none，隐藏起来。这种方式虽然不需要重新渲染 DOM，但是元素依然存在于页面中，可能会影响页面布局和性能。
2. v-if 是基于条件判断的动态组件，它会根据条件动态地添加或删除元素，以实现显示或隐藏的效果。当 v-if 的值为 true 时，元素会被添加到 DOM 中，显示出来；当 v-if 的值为 false 时，元素会从 DOM 中移除，隐藏起来。这种方式虽然需要重新渲染 DOM，但是可以更好地控制页面的布局和性能。

3.2.3 使用场景

1. v-show 适用于需要频繁切换显示与隐藏的元素，因为它的切换速度比 v-if 快，不需要重新渲染 DOM。但是，如果需要在初始渲染时就确定元素是否需要显示，应该优先考虑使用 v-if 指令，因为它可以在元素的添加和删除之间切换，可以更好地控制 DOM 的渲染和销毁。
2. v-if 适用于需要根据条件动态地添加或删除元素的场景，例如当数据满足一定条件时才需要显示某个元素。但是，如果需要频繁切换元素的显示与隐藏，应该优先考虑使用 v-show 指令，因为它的切换速度更快，不需要重新渲染 DOM。

3.3 过滤器

Vue.js 中的过滤器（filters）是一种用于格式化文本输出的工具，可以在模板中使用 {{ }} 插值表达式和 v-bind 指令中使用。它可以将原始数据进行处理和转换，生成一个新的值，然后输出到视图中显示给用户。

Vue.js 中的过滤器可以通过全局过滤器和局部过滤器两种方式来定义。全局过滤器可以在任何 Vue 实例中使用，而局部过滤器只能在定义它的组件实例中使用。

下面是使用全局过滤器的例子：

<script>
Vue.filter('uppercase', function(value) {
 return value.toUpperCase();
});
script>

<div>{{ message | uppercase }}div>

上面的例子中，我们定义了一个名为 uppercase 的全局过滤器，用于将字符串转换为大写格式。在模板中，我们使用 | 管道符将需要过滤的数据 message 与过滤器名称 uppercase 进行连接，输出的结果将是 message 中的字符串全部大写。

除了字符串转换，过滤器还可以进行格式化日期、数字、货币等各种类型的数据。Vue.js 内置了一些常用的过滤器，如 capitalize（将首字母转换为大写）、currency（将数字格式化为货币格式）等，也可以通过自定义过滤器来满足特定的需求。