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

过滤器 filter

filter

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

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

• 全局注册(main.js)

  // main.jsimport 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);// 多语言 filterVue.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>