关于Vue中的计算属性和监听属性详解

Vue是一个非常流行的前端框架，在Vue的组件中，常常会有需要根据其他数据属性计算出新的属性值供模板渲染的情况。这时候就需要使用Vue提供的计算属性。此外，Vue还提供了监听属性，用于监听数据属性的变化。

计算属性

计算属性的本质就是一个函数，可以接受其他数据属性作为其参数，根据这些参数执行一定的计算逻辑，最终得出一个新的值。计算属性一般用于复杂的计算处理，比如格式化时间、对数组进行过滤等。

计算属性的定义采用computed关键字，在Vue的组件中，一般需要将计算属性定义在computed对象中，如下所示：

<template>
  <div>
    <p>{{message}}</p>
    <p>{{computedMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World',
      };
    },
    computed: {
      computedMessage() {
        return this.message.split('').reverse().join('');
      },
    },
  };
</script>

上述代码中，定义了一个计算属性computedMessage，它依赖于数据属性message，并对message进行了反转的操作。在模板中渲染时，可以直接使用computedMessage属性。

需要注意的是，计算属性是基于它的依赖缓存的。也就是说，只要计算属性所依赖的数据属性没有发生变化，该计算属性就不会重新计算。这也是计算属性比较高效的一点。

监听属性

监听属性用于监听数据属性的变化，并在变化时执行一些特定的逻辑，比如ajax请求等。使用watch关键字可以定义一个监听属性。在Vue的组件中，一般需要将监听属性定义在watch对象中，如下所示：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World',
        newMessage: '',
      };
    },
    watch: {
      message(newValue, oldValue) {
        console.log('message has been changed', newValue, oldValue);
        this.newMessage = 'new message is: ' + newValue;
      },
    },
  };
</script>

上述代码中，使用watch定义了一个监听属性message。在message属性发生变化时，会触发watch中定义的回调函数，并传入该属性的新旧值。

需要注意的是，监听属性的回调函数中可以访问到实例上下文this，并可以修改实例上的其他数据属性。同时，需要注意在回调函数中避免无限递归的情况。

示例说明

计算属性

在一个列表页面中，需要对分类进行过滤。可以定义一个计算属性，对原始数据进行过滤，并将过滤后的列表返回给模板进行渲染。

<template>
  <div>
    <ul>
      <li v-for="item in filteredList">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {name: 'Apple', category: 'fruit'},
          {name: 'Banana', category: 'fruit'},
          {name: 'Carrot', category: 'vegetable'},
        ],
        filterCategory: 'fruit',
      };
    },
    computed: {
      filteredList() {
        return this.list.filter(item => item.category === this.filterCategory);
      },
    },
  };
</script>

上述代码中，定义了一个list数组，其中包含了水果和蔬菜两种类别的物品，还定义了一个filterCategory数据属性表示当前选中的分类。在模板中，使用计算属性filteredList对list数组进行过滤，并返回过滤后的物品列表。这样，在切换分类时，页面中会自动更新渲染。

监听属性

在一个编辑页面中，需要在表单提交前校验表单数据是否合法。可以定义一个监听属性，监听表单中某些数据属性的变化，并执行校验逻辑。

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="name" type="text" placeholder="name">
      <input v-model="mobile" type="text" placeholder="mobile">
      <input v-model="email" type="text" placeholder="email">
      <button type="submit">submit</button>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        mobile: '',
        email: '',
      };
    },
    watch: {
      name() {
        this.validateForm();
      },
      mobile() {
        this.validateForm();
      },
      email() {
        this.validateForm();
      },
    },
    methods: {
      handleSubmit() {
        // submit form data
      },
      validateForm() {
        // validate form data, e.g. check if name, mobile and email are not null
      },
    },
  };
</script>

上述代码中，定义了一个表单，包含name、mobile和email这三个数据属性。同时，定义了一个监听属性，用于监听表单中这三个数据属性的变化，并执行回调函数validateForm()进行表单校验。在表单提交时，会触发handleSubmit()函数。

这样，在用户修改表单中数据属性时，监听属性会自动检测并执行回调函数，帮助用户在表单提交前快速发现表单数据是否正确。