vue中的常用特性

一、计算属性computed

模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计 算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一 个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

<template>
  <div>
    计算属性
    <!-- 可以直接使用 -->
    {{arrLength}}
  </div>
</template>
<script>
  export default {

    data () {
      return {
        arr: [1,2,3,4]
      }
    },

    /**
   * 计算属性放在computed对象里面
   * 里面存放的是方法 方法的名字就是这个计算属性的名字
   * 方法的返回值就是计算属性的返回值
   * 只有内部数据变化才会重新计算
   */
    computed: {
      /**
     * 计算arr数组的length
     */
      arrLength () {
        // return的值就是arrLength的值
        return this.arr.length
      }
    }
  }
</script>

可修改的计算属性

<template>
  <div>
    计算属性
    <!-- 可以直接使用 -->
    {{ name }}
    <button @click="updateName">修改名字</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "张",
      lastName: '三'
    };
  },

  /**
   * 可写计算属性
   * 计算属性默认是只读的。
   * 当你尝试修改一个计算属性时，你会收到一个运行时警告。
   * 只在某些特殊场景中你可能才需要用到“可写”的属性，
   * 你可以通过同时提供 getter 和 setter 来创建
   * 不推荐直接使用
   */
  computed: {
    /**
     * 计算arr数组的length
     */
    name: {
      // getter
      get() {
        return this.firstName + " " + this.lastName;
      },
      // setter
      set(newValue) {
        // 注意：我们这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split(" ");
      },
    },
  },

  methods: {
    updateName () {
      this.name = '李 四'
    }
  }
};
</script>

二、watch监听器

使用watch来侦听数据的变化，watch的数据都是响应式的数据

<template>
  <div>监听器</div>
  <button @click="num += 1">+1</button>
  {{ num }}
  <div>
  <button @click="add">添加子元素</button>
    <div v-for="(item, index) in arr" :key="index">
      {{ item.name }}
      <div
        v-for="(child, childIndex) in item.childs"
        :key="index + '' + childIndex"
      >
        {{ child.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 1,
      arr: [
        {
          name: "张三",
          childs: [{ name: "李四" }],
        },
      ],
    };
  },

  /**
   * 所有的监听器都放在watch里面
   * 里面存放的是方法 方法名就是要监听的数据
   *
   */
  watch: {
    /**
     * 监听num的变化
     */
    num(newVal, oldVal) {
      console.log("每num次数据变化都会执行");
    },

    /**
     * watch 默认是浅层的：被侦听的属性，
     * 仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。
     * 如果想侦听所有嵌套的变更，你需要深层侦听器
     */
    arr: {
      handler (newValue, oldValue) {
        console.log("每次arr变化")
      },
      // 打开深度监听
      deep: true,

      // 如果immediate设置为true则初始化的时候也会触发一次
      // immediate: true
    }
  },

  methods: {
    add () {
      this.arr[0].childs.push({name: '王五'})
    }
  }
};
</script>

三、过滤器（已废弃）

在 2.x 中，开发者可以使用过滤器来处理通用文本格式。

<p>{{ accountBalance | currencyUSD }}</p>

filters: {
	currencyUSD(value) {
  	return '$' + value
  }
}

虽然这看起来很方便，但它需要一个自定义语法，打破了大括号内的表达式“只是 JavaScript”的假设，这不仅有学习成本，而且有实现成本。

在 3.x 中，过滤器已移除，且不再支持。取而代之的是，我们建议用方法调用或计算属性来替换它们。