SegmentFault Technology Weekly - How Much Do You Know About Vue?

This issue of Technology Weekly is exclusive to Vue, welcome to read~

文章推荐

Why is it not recommended to use index as key in Vue?

Vue defaults to an "in-place update" strategy to update the list of elements rendered via v-for. When the order of data items changes, Vue doesn't move the order of DOM elements with it, but instead updates each element in-place to ensure they render at the index position they originally specified.

The default mode is efficient, but only works if the list rendering output does not depend on child component state or temporary DOM state (such as form input values).

How does Spring Security + Vue + Flowable work?

Friends who have played workflow should know that workflow actually comes with a set of user systems, but our own system often has its own user system, so how to integrate the two? Or is it necessary to combine the two?

If you want to integrate the user system of your own system with the user system in flowable, then on the whole, there are probably two ways...

Write a command line snake game with Vue.js

This article will share how to use Vue.js to implement a command line snake game (temir-snake-game). Everyone must be familiar with the Snake game. It seems that it is not difficult to implement a Web version of the Snake game using Vue.js. What if it is the command line version? Are you interested in how it works? let's start!

Vue treemap component encapsulation

In fact, the treemap component is well understood, that is, the treemap is implemented by recursively calling itself. To be clear, it is better to have a picture in your mind, which is easier to understand and develop.

1. That is, we define a component first, and draw the first node in this component
2. Then recursively call its own component under the first node. In this way, a string of nodes like candied haws can be realized
3. But this is just a string, not a tree, so it is also necessary to add a loop of drawing nodes to the place where the nodes are drawn on this basis. It becomes a tree.

In general, first easy and then difficult, first understand the trunk clearly, and then slowly add branches to the trunk, so that a big tree is drawn.

Elementui source code learning to imitate an el-link

In short, the el-link component wraps a layer of the a tag and adds some styles. Therefore, in addition to the function of the a tag, the link component also needs to have some style effects that can be used. Therefore, when we imitate the label of this component, we mainly review the collocation of the parameters and styles of the parameters, so as to achieve the effect we need

Use the Vite build tool to quickly create a Vue project (Vue3.0 project development)

The advantage of the Vue project is the component development, which divides each function, or each page and container into various components. On the one hand, it is easy to maintain, and on the other hand, it can improve efficiency when multiple people develop. Can increase code reusability, maintainability and testability. Improve development efficiency, facilitate repeated use, simplify debugging steps, improve the maintainability of the entire project, and facilitate collaborative development. It is a practice of high cohesion and low coupling code.

The components directory in the code directory is the directory of the components. Here you can create each component according to your own project, write html code directly in the component, and call the api of vue to achieve many functions, such as axios network request, and at the same time, in the component You can also write css styles.

Vue3 template compilation principle

Vue's compilation module contains 4 directories:

 compiler-core
compiler-dom // 浏览器
compiler-sfc // 单文件组件
compiler-ssr // 服务端渲染

The compiler-core module is the core module compiled by Vue and is platform-independent. The remaining three are adapted for different platforms on the basis of compiler-core.

The compilation of Vue is divided into three stages: parse, transform, and codegen.

The parse stage converts the template string into a syntactic abstract tree AST. The transform stage performs some transformation processing on the AST. The codegen stage generates the corresponding render function string according to the AST.

问答推荐

What is the difference between Vue.config.js devServer development phase and project launch?
Vue3 exports data to excel, is fs abandoned?
How to locate the function call that triggers watch in Vue?
How does Vue trigger computed updates?
Vue render brackets problem?
Vue's token invalidation when multiple asynchronous requests are made?
The Vue program is clearly assigned successfully but the value on the page has not changed?
The Vue page can't get the backend property and reports Uncaught (in promise) TypeError error?
Vue using vuex data update problem?

---

# SegmentFault Technology Weekly#

"Technology Weekly" is a series of technical content specially launched by the community, with a weekly theme.

Update every Tuesday, welcome to " follow ". You can also leave a message on the topic you are interested in in the comments, and recommend excellent articles related to the topic.

If you have any questions, you can add Ms. WeChat~