Preface
This article is a sharing of Vue source code contribution value Chris Fritz in public. I feel that there are many things worth learning from in the sharing. Although I do the same in my work, I will translate the master's ppt here, hoping to bring some help to my friends.
1. Make good use of the immediate attribute of watch
I also wrote this in the project. For example, if a request needs to be executed once again before it is initialized, then listen to its changes. Many people write this:
created(){
()
},
watch: {
searchInputValue(){
()
}
}
We can write the above writing method completely as follows:
watch: {
searchInputValue:{
handler: 'fetchPostList',
immediate: true
}
}
2. Component registration is worth learning from
Generally speaking, our components are written as follows:
import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
<BaseInput v-model="searchText" @="search" />
<BaseButton @click="search"> <BaseIcon name="search"/></BaseButton>
There are generally three steps.
The first step is to introduce
Step 2 Registration
The third step is formal use.
This is also the most common and common way of writing. However, this writing style is based on classics, and there are many components that need to be introduced many times and registered many times, which feels very annoying.
We can use webpack and use () Methods to create your own (module) context, thus implementing automatic dynamic require components.
The idea is: under the src folder, use webpack to dynamically package all the required basic components.
The code is as follows:
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
// Require in a base component context
const requireComponent = (
‘./components', false, /base-[\w-]+\.vue$/
)
().forEach(fileName => {
// Get component config
const componentConfig = requireComponent(fileName)
// Get PascalCase name of component
const componentName = upperFirst(
camelCase((/^\.\//, '').replace(/\.\w+$/, ''))
)
// Register component globally
(componentName, || componentConfig)
})
In this way, we only need the third step to introduce components:
<BaseInput v-model="searchText" @="search" /> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton>
3. Simplify the introduction of modules for vuex
For vuex, we output the store as follows:
import auth from './modules/auth'
import posts from './modules/posts'
import comments from './modules/comments'
// ...
export default new ({
modules: {
auth,
posts,
comments,
// ...
}
})
There are many modules to be introduced and then register to
The streamlined approach is similar to the above, and it also uses () to read files, with the code as follows:
import camelCase from 'lodash/camelCase'
const requireModule = ('.', false, /\.js$/)
const modules = {}
().forEach(fileName => {
// Don't register this file as a Vuex module
if (fileName === './') return
const moduleName = camelCase(
(/(\.\/|\.js)/g, '')
)
modules[moduleName] = {
namespaced: true,
...requireModule(fileName),
}
})
export default modules
In this way, we just need the following code:
import modules from './modules'
export default new ({
modules
})
4. Latency loading of routes
Regarding the introduction of vue, I have also mentioned this in the key points and summary of the vue project reconstruction technology. Components can be loaded dynamically through the require method or import() method.
{
path: '/admin',
name: 'admin-dashboard',
component:require('@views/admin').default
}
or
{
path: '/admin',
name: 'admin-dashboard',
component:() => import('@views/admin')
}
Load the route.
5. Router key component refresh
The following scene really hurts the hearts of many programmers... First, we default to using Vue-router to achieve routing control. Suppose we are writing a blog website, and the requirement is to jump from /post-haorooms/a to /post-haorooms/b. Then we were surprised to find that the data was not updated after the page jumped? ! The reason is that vue-router "intelligently" discovers that this is the same component, and then it decides to reuse the component, so the method you wrote in the created function is not executed at all. The usual solution is to listen for changes in $route to initialize the data, as follows:
data() {
return {
loading: false,
error: null,
post: null
}
},
watch: {
'$route': {
handler: 'resetData',
immediate: true
}
},
methods: {
resetData() {
= false
= null
= null
(this.$)
},
getPost(id){
}
}
The bug was solved, but it is too inelegant to write like this every time, right? Adhering to the principle of being lazy, we hope that the code will be written like this:
data() {
return {
loading: false,
error: null,
post: null
}
},
created () {
(this.$)
},
methods () {
getPost(postId) {
// ...
}
}
Solution: Add a unique key to router-view, so that even a common component will definitely recreate the component as long as the URL changes.
<router-view :key="$"></router-view>
Note: My personal experience, this is generally applied in subroutines, so that a large number of redraws can be avoided. Assuming that this attribute is added to the root directory, then the redraw will be redrawn every time you click to change the address, which is not worth the effort!
6. Unique component root element
The scenario is as follows:
(Emitted value instead of an instance of Error)
Error compiling template:<div></div>
<div></div>- 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.
There can only be one div in the template, and there cannot be two divs parallel as above.
For example, the following code:
<template>
<li
v-for="route in routes"
:key=""
>
<router-link :to="route">
{{ }}
</router-link>
</li>
</template>
An error will be reported!
We can use the render function to render
functional: true,
render(h, { props }) {
return (route =>
<li key={}>
<router-link to={route}>
{}
</router-link>
</li>
)
}
7. Component packaging and event attribute penetration issues
When we write components, we usually need to pass a series of props from the parent component to the child component, and the parent component listens for a series of events coming from the child component emitted. Give an example:
// Parent component<BaseInput
:value="value"
label="password"
placeholder="Please fill in your password"
@input="handleInput"
@focus="handleFocus>
</BaseInput>
//Subcomponent<template>
<label>
{{ label }}
<input
:value="value"
:placeholder="placeholder"
@focus=$emit('focus', $event)"
@input="$emit('input', $)"
>
</label>
</template>
This is not simple to write. Many attributes and events are defined manually. We can write as follows:
<input
:value="value"
v-bind="$attrs"
v-on="listeners"
>
computed: {
listeners() {
return {
...this.$listeners,
input: event =>
this.$emit('input', )
}
}
}
$attrs contains attribute bindings in the parent scope that are not recognized (and obtained) as props (except class and style). When a component does not declare any prop, it will contain all parent scope bindings and can be used v-bind="$attrs" Pass into internal components.
$listeners contains the v-on event listener in the parent scope (excluding .native modifiers). It can be passed v-on="$listeners" Pass into internal components.
Summarize
The above are 7 secrets that you may not know about vue technology that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!