Summary of several points you must know to improve Vue.js

This time I will bring you some summary of what you must know about improving Vue.js. What are the precautions for improving Vue.js? Here are practical cases, let’s take a look.

The first trick: Watchers who simplify complexity

Scene restoration:

created(){
  this.fetchPostList()
},
watch: {
  searchInputValue(){
    this.fetchPostList()
  }
}

When the component is created, we obtain the list once and monitor the input box at the same time. Whenever a change occurs, we obtain the filtered list again. This scenario is very common. Is there any way to optimize it?

Move analysis:

First, in watchers, you can directly use the literal name of the function ; secondly, declaring immediate:true means that it will be executed immediately when the component is created.

watch: {
  searchInputValue:{
    handler: 'fetchPostList',
    immediate: true
  }
}

Second move: Once and for all component registration

Scene restoration:

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default {
 components: {
  BaseButton,
  BaseIcon,
  BaseInput
 }
}

<BaseInput
 v-model="searchText"
 @keydown.enter="search"
/>
<BaseButton @click="search">
 <BaseIcon name="search"/>
</BaseButton>

We wrote a bunch of basic UI components, and every time we need to use these components, we have to import them first and then declare the components, which is very cumbersome! Adhering to the principle of being lazy if you can, we must find ways to optimize!

Move analysis:

We need to use the artifact webpack to create our own (module) context using the require.context() method to implement automatic dynamic require components. This method requires 3 parameters: the folder directory to be searched, whether its subdirectories should also be searched, and a regular expression that matches the file.

We add a file called global.js in the components folder, and use webpack to dynamically package all the required basic components in this file.

import Vue from 'vue'
function capitalizeFirstLetter(string) {
 return string.charAt(0).toUpperCase() + string.slice(1)
}
const requireComponent = require.context(
 '.', false, /\.vue$/
  //找到components文件夹下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
 const componentConfig = requireComponent(fileName)
 const componentName = capitalizeFirstLetter(
  fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
 )
 Vue.component(componentName, componentConfig.default || componentConfig)
})

Finally, we import 'components/global.js' in main.js, and then we can use these basic components anytime and anywhere without having to introduce them manually.

Third move: Router key that pulls out all the firepower

Scene restoration:

The following scene really broke the hearts of many programmers... First of all, by default, everyone uses Vue-router to implement routing control.

Suppose we are writing a blog website and the requirement is to jump from /post-page/a to /post-page/b. Then we surprisingly discovered that the data was not updated after the page jumped? ! The reason is that vue-router "intelligently" discovered that this is the same component, and then it decided to reuse this component, so the method you wrote in the created function was not executed at all. The usual solution is to listen for changes in $route to initialize data, as follows:

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
}, 
watch: {
 '$route': {
  handler: 'resetData',
  immediate: true
 }
},
methods: {
 resetData() {
  this.loading = false
  this.error = null
  this.post = null
  this.getPost(this.$route.params.id)
 },
 getPost(id){
 }
}

The bug has been solved, but isn’t it too inelegant to write like this every time? Adhering to the principle of being lazy if you can be lazy, we hope that the code will be written like this:

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
},
created () {
 this.getPost(this.$route.params.id)
},
methods () {
 getPost(postId) {
  // ...
 }
}

Move analysis:

So how can we achieve this effect? ​​The answer is to add a unique key to router-view, so that even if it is a public component, as long as the URL changes, the component will be recreated. (Although it loses a bit of performance, it avoids infinite bugs). At the same time, note that I set the key directly to the full path of the route, killing two birds with one stone.

<router-view :key="$route.fullpath"></router-view>

The fourth trick: the omnipotent render function

Scene restoration:

Vue requires that each component can only have one root element. When you have multiple root elements, Vue will report an error to you

<template>
 <li
  v-for="route in routes"
  :key="route.name"
 >
  <router-link :to="route">
   {{ route.title }}
  </router-link>
 </li>
</template>
 ERROR - Component template should contain exactly one root element. 
  If you are using v-if on multiple elements, use v-else-if 
  to chain them instead.

Move analysis:

Is there any way to solve it? The answer is yes, but at this time we need to use the render() function to create HTML instead of template. In fact, the advantage of using js to generate html is that it is extremely flexible and powerful, and you do not need to learn to use vue’s limited-function instruction API, such as v-for, v-if. (reactjs completely discards template)

functional: true,
render(h, { props }) {
 return props.routes.map(route =>
  <li key={route.name}>
   <router-link to={route}>
    {route.title}
   </router-link>
  </li>
 )
}

Fifth move: High-end components that can win without any move

Important points: This move is extremely powerful, please be sure to master it

When we write components, we usually need to pass a series of props from the parent component to the child component, and at the same time, the parent component listens to a series of events emitted from the child component. For example:

//父组件
<BaseInput 
  :value="value"
  label="密码" 
  placeholder="请填写密码"
  @input="handleInput"
  @focus="handleFocus>
</BaseInput>
//子组件
<template>
 <label>
  {{ label }}
  <input
   :value="value"
   :placeholder="placeholder"
   @focus=$emit(&#39;focus&#39;, $event)"
   @input="$emit(&#39;input&#39;, $event.target.value)"
  >
 </label>
</template>

There are several optimization points as follows:

1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来，我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子，无需声明。方法如下：

<input
   :value="value"
   v-bind="$attrs"
   @input="$emit(&#39;input&#39;, $event.target.value)"
  >

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

2.注意到子组件的@focus=$emit('focus', $event)"其实什么都没做，只是把event传回给父组件而已，那其实和上面类似，我完全没必要显式地申明：

<input
  :value="value"
  v-bind="$attrs"
  v-on="listeners"
>
computed: {
 listeners() {
  return {
   ...this.$listeners,
   input: event => 
    this.$emit('input', event.target.value)
  }
 }
}

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

3.需要注意的是，由于我们input并不是BaseInput这个组件的根节点，而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false，这些默认行为将会被去掉, 以上两点的优化才能成功。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue的新手入门教程

Vue项目怎样分环境打包

The above is the detailed content of Summary of several points you must know to improve Vue.js. For more information, please follow other related articles on the PHP Chinese website!