vue set of application skills

//*******************************************/

Lifecycle listener component

For example, has a parent component and subassembly Parent Child, listening to the child if the parent component assembly mounted on the mount to do some processing logic, conventional wording could be as follows:

 // Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

 

 In addition, there is a particularly simple manner, sub-assembly without any treatment, only when the parent component by reference to listen to @hook, code is as follows:

<Child @hook:mounted="doSomething" /> 
<Child @hook:updated="doSomething" />

 

//*******************************************/

The initial watch of immediate execution

When watch a variable, and initialization is not executed, as in the following example, when you need to call once created manually:

created() {
  this.getList();
},
watch: {
  keyWord: 'getList',
}

 Such practices above may be used, but a lot of trouble, we can add immediate property, so initialization time will automatically trigger (do not write created to call), then the above code can be simplified as:

watch: {
  keyWord: {
    handler: 'getList',
    immediate: true
  }
}

 watch has three parameters

• handler: The value is a callback function. That function when listening to the changes that should be executed
• deep: The value is either true or false; confirm whether the in-depth monitoring.
• immediate: The value is true or false, to confirm whether the handler function to the initial value of the current