关于vue.js:彻底搞懂-filterwatchcomputed

过滤器 filter

filter

作用：可被用于一些常见的文本格式化

应用形式：增加在 JavaScript 表达式的尾部，由“管道”符号批示

• 全局注册(main.js)

  // main.js
  import Vue from 'vue';
  import Demo from './demo.vue';
  import {Button, Modal} from 'ant-design-vue';
  import {translate} from '@ctrip/ebk-utils';
  import {APPID} from '@/service/config';
  
  Vue.config.productionTip = false;
  // antdv 组件
  Vue.use(Button);
  Vue.use(Modal);
  
  // 多语言 filter
  Vue.filter('translate', function(value) {return translate(value, APPID);
  });
  
  new Vue({render: h => h(Demo)
  }).$mount('#app');
  

• 部分注册

  <template>
    <p>{{'Key.Comment.174' | translate}}</p>
  </template>
  <script>
  import {translate} from '@ctrip/ebk-utils';
  import {APPID} from '@/service/config';
  export default {data() {return {};
    },
    filters: {translate(val) {return translate(value, APPID);
      }
    }
  };
  </script>
  

当全局过滤器和部分过滤器重名时，会采纳部分过滤器。

Q：methods 能实现同样性能，为啥还要用filter？

A: 过滤器能够串联

{{message | filterA | filterB}}

filterA 被定义为接管单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。而后持续调用同样被定义为接管单个参数的过滤器函数 filterB，将 filterA 的后果传递到 filterB 中。

计算属性 computed

computed

作用：简单逻辑包装的包装和复用

用法：在模板中绑定计算属性

<template>
  <div>
    <p>Original message: "{{message}}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
  </div>
</template>
<script>

export default {data() {
    return {message: 'hello'};
  },
  computed: {reversedMessage: function () {return this.message.split('').reverse().join('')
    }
  }
};
</script>

Q: methods 能实现同样性能，为啥还要用computed？

A：计算属性是基于它们的响应式依赖进行缓存的，只在相干响应式依赖产生扭转时它们才会从新求值。这就意味着只有 message 还没有产生扭转，屡次拜访 reversedMessage 计算属性会立刻返回之前的计算结果，而不用再次执行函数。

相比之下，每当触发从新渲染时，调用办法将 总会 再次执行函数。

代码演示：

// index.vue
<template>
  <div>
    <p>Original message: "{{msg}}"</p>
    <button @click="handleClick">change msg</button>
    
    <Computed :message="msg" />
    
    <Method :message="msg" />
  </div>
</template>
<script>
import Computed from './components/computed';
import Method from './components/method';
export default {data() {
    return {msg: 'hello'};
  },
  components: {
    Computed,
    Method
  },
  methods: {handleClick() {this.msg = `hello${Math.random()}`;
    }
  }
};
</script>

// components/compute
<template>
  <div>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
  </div>
</template>
<script>
export default {props: ['message'],

  computed: {reversedMessage: function() {console.log('computed was called');
      return this.message
        .split('')
        .reverse()
        .join('');
    }
  }
};
</script>

// components/method
<template>
  <div>
    <p>Methods reversed message: "{{reversedMessage() }}"</p>
    <p>Methods reversed message: "{{reversedMessage() }}"</p>
    <p>Methods reversed message: "{{reversedMessage() }}"</p>
  </div>
</template>
<script>
export default {props: ['message'],
  data() {return {};
  },
  methods: {reversedMessage: function() {console.log('methods was called');
      return this.message
        .split('')
        .reverse()
        .join('');
    }
  }
};
</script>

侦听器 watch

watch

作用：能够监控一个值的变换，并调用因为变动须要执行的办法。能够通过 watch 动静扭转关联的状态

// 当 firstName 值变动时，watch 监听到并且执行
<template>
  <div>
    <h2>fullname：{{fullName}}</h2>
    <p>firstName：<input type="text" v-model="firstName" /></p>
  </div>
</template>
<script>
export default {data() {
    return {
      firstName: '',
      lastName: 'Morgan',
      fullName: ''
    };
  },
  watch: {firstName(newValue) {this.fullName = `${newValue} ${this.lastName}`;
    }
  }
};
</script>

handler 办法和 immediate 属性

下面的例子是值变动时候，watch 才执行，咱们想让值最后时候 watch 就执行就用到了 handler 和immediate属性

<template>
  <div>
    <h2>fullName：{{fullName}}</h2>
    <p>firstName：<input type="text" v-model="firstName" /></p>
  </div>
</template>
<script>
export default {data() {
    return {
      firstName: '',
      lastName: 'Morgan',
      fullName: ''
    };
  },
  watch: {
    firstName: {handler(newName) {this.fullName = newName + ' ' + this.lastName;},
      // 代表在 wacth 里申明了 firstName 这个办法之后立刻先去执行 handler 办法，如果设置了 false，那么成果和上边例子一样
      immediate: true
    }
  }
};
</script>

deep 属性（深度监听，常用语对象上面属性的扭转）

<template>
  <div>
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a" /></p>
  </div>
</template>
<script>
export default {data() {
    return {
      obj: {a: 123}
    };
  },
  watch: {
    obj: {handler(newVal) {console.log(newVal, 'obj.a changed');
      },
      immediate: true,
      deep: true
    }
  }
};
</script>