VUE指令、computed计算属性和watch 侦听器（附带详细案例）

在Vue.js中，指令(directives)、计算属性(computed properties)和侦听器(watch)是常用的三个功能，它们各有特色，可以根据不同的场景选择使用。

1. 指令(Directives): 指令是带有v-前缀的特殊属性，用于指示Vue.js进行特定的操作。例如，v-if、v-for、v-bind等。

<!-- 条件渲染 -->
<div v-if="isCondition">条件为true时显示</div>
 
<!-- 列表渲染 -->
<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>
 
<!-- 绑定属性 -->
<img v-bind:src="imageSrc">

2. 计算属性(Computed Properties): 用于依赖响应式地响应数据变化并缓存计算结果的对象。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
});

3. 侦听器(Watch): 用于观察Vue实例上的数据变动，当数据变化时，watch中的函数会被执行。

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName;
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val;
    }
  }
});

以上是Vue指令、计算属性和侦听器的简单介绍和使用案例。在实际开发中，可以根据数据依赖关系和需要的响应式行为选择合适的工具。