Summary of common knowledge points in Vue.js development
This time I will bring you a summary of common knowledge points in Vue.js development. What are the notes on common knowledge points in Vue.js development? Here are practical cases, let’s take a look.
For most people, after mastering a few basic APIs of Vue.js, they can already develop front-end websites normally. But if you want to use Vue to develop more efficiently and become a Vue.js master, then you must seriously study the five tricks I will teach you below.
The first move: Watchers that simplify complexity
Scene restoration:
created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } }
When the component is created, we get the list once and listen to the input at the same time Frame, it is very common to re-obtain the filtered list every time a change occurs. Is there any way to optimize it?
Move analysis:
First of all, 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></baseinput> <basebutton> <baseicon></baseicon> </basebutton>
We wrote a bunch of basic UI components, and then every time we When you need to use these components, you have to import them first and then declare the components, which is very tedious! 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 achieve 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 manually introducing them.
Third move: Router key that pulls out all the stops
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 monitor 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() { this.loading = false this.error = null this.post = null this.getPost(this.$route.params.id) }, getPost(id){ } }
The bug is solved, but is it too inelegant to write like this every time? Adhering to the principle of being lazy if you can, 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 such an effect? The answer is to add a router-view unique key, so that even if it is a public component, as long as the URL changes, the component will be recreated. (Although some performance is lost, infinite bugs are avoided). 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></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> <router-link> {{ 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 a way to resolve it? The answer is yes, but this time we need Use the render() function to create HTML, not 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 instruction API with limited functions, such as v-for and v-if. (reactjs completely discards the template)
functional: true, render(h, { props }) { return props.routes.map(route =>
The fifth move: high-level components that can win without any moves
Key points: This move is infinitely powerful, please Be sure to understand
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> </baseinput> //子组件 <template> <label> {{ label }} <input> </label> </template>
has the following optimization points:
1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来,我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子,无需声明。方法如下:
<input>
$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。
2.注意到子组件的@focus=$emit('focus', $event)"其实什么都没做,只是把event传回给父组件而已,那其实和上面类似,我完全没必要显式地申明:
<input> 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中文网其它相关文章!
推荐阅读:
The above is the detailed content of Summary of common knowledge points in Vue.js development. For more information, please follow other related articles on the PHP Chinese website!

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Linux new version
SublimeText3 Linux latest version

Atom editor mac version download
The most popular open source editor

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 Mac version
God-level code editing software (SublimeText3)