Vue

Back in the slash-and-burn era, when I first graduated from the company, Jquery was the most popular. Almost every page needs Jquery, which encapsulates a lot of DOM manipulation apis and elegant chained manipulation. After ajax requests the data, $(ele) retrieves the corresponding DOM element to be replaced and appends it. Later vUE began to gradually become popular, happened to have a new project, I thought not to be too behind, take this opportunity to learn.

Say dry dry, roll up the sleeves to open the official Vue document, a surprise, this content for the small white I was astronomical, completely have no concept, initiate beat back idea: I use Jquery is not fragrant? Is there anything it can’t solve? But eventually I got over my fear and stuck with the document

As you click through the document, you suddenly find an interesting little DEMO that changes the value of the input field to correspond to the text displayed. All it took was a few lines of code, and it was fun at the time.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
Copy the code
var app6 = new Vue({
  el: '#app-6'.data: {
    message: 'Hello Vue! '}})Copy the code

It was a simple data monitor, but it was amazing to me at the time. So I went on gnawing at the document with interest, and boy, my head got bigger and bigger. All kinds of novel concepts came up: two-way bindings, directives, components, and so on. It was really a bit of a retreat after going through it. At that time, my mind was still stuck in manipulating DOM through JS, which was hard to get used to. Straight call too difficult to understand, then, shut down, off work.

The next day, the more I think about it, the more angry I am, not all javascript, what is difficult to understand. After going through the document, I thought I could find a complete demo this time, so I saw the official TodoList. There is a complete example is easy to do, follow the example to knock several times, do not understand the document slowly understand, gradually understand the idea behind the writing method. You can focus more on processing the data, you don’t have to worry about dom manipulation, you leave it all to the program.

Although finished knocking demo, but may still be a little understanding, thinking or actually start to write a page, understanding will be profound. I searched the ecology around VUE, learned about vuE-CLI scaffolding, and the UI framework Element-UI. I opened a VUE page and I was still excited (face covering). According to their own ideas, while checking the document while writing a simple table presentation. Finally, I understand this data-driven view of operations.

Then the practice is directly applied to the new project, the more writing is more handy. However, there were problems with the project directory structure scattered, a little confusion about how to organize and component naming problems. The vue-element-admin project and the hand touch tutorial really helped me a lot. Define the structure of the entire project, including the permissions section. So far to VUE is also a primer, realize the convenience of MVVM, incense!

In general, the vUE learning curve is not too difficult, the only thing that can be mentally taxing is that there are a lot of instructions such as V-bind, V-if, and slot concepts that sometimes often require repeated documentation. But once you get familiar with it, it’s very convenient.

React

As for react learning, in fact, during the writing of VUE, all the students (Mo) and students (Yu) group said that JSX really smells good, react really smells good. Out of curiosity, I went to the document and typed it down. The more I hit it, the more I felt what it was, the HTML and JS mixed together to write, too uncomfortable. Look at the structure of the vue file. The template, script, and style sections are in their respective roles. So, turn it off. This is the first time you learn react.

Later, another company changed, and the technology stack was unified into REACT. Then I had no choice but to take it up again. In fact, by this time vUE has been written for a long time, but also intentionally to understand the vUE rendering function & JSX writing method. React is just an expression that assembles what it wants to return.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root'));Copy the code

And after hook, it is much easier to write components, no need to ignore the reference to this. And you can pass JSX as prop, which is certainly handy for reuse scenarios. At this time just want to say, incense!

After writing React, it became easier to use VUE. Because it intercepts data, all operations are done for you. You only need to pay attention to data changes, and other operations are handled by VUE. React, however, provides the purest JS processing method. There is no V-for or V-if in react. And you have to deal with rendering optimizations yourself, because it’s possible that some data has been updated, causing all components that have nothing to do with that data to be re-rendered. In my opinion, React tests a person’s organizational ability. After receiving a page, it requires experience and skills to split components and extract data for reuse.

section

It tells the process from learning VUE to changing react. In fact, no matter how difficult the learning curve is, the most important thing is to look at yourself. If you reject it from the bottom of your heart, it will be difficult to learn it. Should have a summary of their own learning methods, the most important or practice, in order to master deeper.