Filter filter

filter

Function: Can be used for some common text formatting

Usage: Adds to the end of a JavaScript expression, indicated by the “pipe” symbol

  • Global registration (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 component vue.use (Button); Vue.use(Modal); Filter ('translate', function(value) {return translate(value, APPID); }); new Vue({ render: h => h(Demo) }).$mount('#app');

  • Local registration

    <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>

Local filters are used when global and local filters have the same name.

Q: Why use filter when methods can do the same thing?

A: Filters can be in series

{{ message | filterA | filterB }}

Filtera is defined as a filter function that accepts a single argument, to which the value of the expression message is passed as an argument. It then proceeds to call FilterB, the filter function also defined to take a single argument, passing the result of Filtera to FilterB.

Computed attribute

computed

Function: Packaging and reuse of complex logical packaging

Usage: Bind compute properties in templates

<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: Why use computed when methods do the same thing?

A: Calculated properties are cached based on their reactive dependencies, and they are re-evaluated only when the associated reactive dependencies change. This means that as long as the message has not changed, multiple visits to the ReversedMessage evaluation property will immediately return the result of the previous evaluation without having to execute the function again.

In contrast, the calling method will always execute the function again every time a renderer is triggered.

Code demo:

// 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>

The listener watch

watch

Function: You can monitor the transformation of a value and call the method that needs to be executed because of the change. The state of the association can be dynamically changed through Watch

<template> <div> <h2>fullname: {{fullname}}</h2> <p>firstName: <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>

The handler method and the immediate property

In the example above, watch executes only when the value changes. We want the value to be executed initially by using the handler and immediate attribute

<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; }, immediate: true}}; // execute the handler method immediately after firstName is declared in wacth. If false is set, the effect is the same as in the example immediate: true}}}; </script>

Deep property (deep listening, often used to change properties under an object)

<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>