1. KnowVue.js

1.1 Why LearnVue

From a practical point of view, you can find a satisfactory front-end job if you learn Vue well, but it is very difficult to find a satisfactory front-end job if you don’t master Vue (it should be added that in addition to Vue, many jobs now require “small programs”).

1.2 VueThe characteristics of

Vue is a progressive JavaScript framework for building user interfaces:

  • Full name isVue.js 或 Vuejs;

  • What is a progressive framework?

    • An incremental framework means that we can introduce and use it bit by bit in a projectVue, and not necessarily all of themVueTo develop the entire project. You can choose to use it (or not)VueYou can also use it only in a module of the projectVue.

1.3 Vue 和 ReactAnd so on

The three most popular front-end frameworks are Vue, React and Angular.

  • Angular: the entry threshold is high, and the domestic market share is low. But there is no denying that it is a very excellent framework in itself, and a lot of its design ideas are associated withNodeThe frameworknest.jsThey’re similar, and they’re basically all of themTypeScriptDevelopment.
  • React: The market share is high both at home and abroad. Being a front-end engineer is also a framework that must be learned. Big companies and big projects were also more likely to use them in the pastReactDevelopment, because relatively speakingReactMaybe more flexible, a little bitVue2Scenes that might not be possible to doReactCan do (of course, nowVue 从 2Version upgrade to3After the version, there isComposition API, is also very flexible).
  • Vue: Highest market share in the domestic market, almost all front-end positions will be rightVueThere are requirements.

1.3.1 Framework data comparison

1.3.1.1 Googleindex

1.3.1.2 Baidu Index

1.3.1.3 npmdownloads

1.3.1.4 GitHub

1.3.2 Who is the best front-end framework

I’m not going to draw a conclusion here because there’s no point arguing about it, just like people arguing about who is the best language in the world.

But let’s look at it from a realistic perspective. Which language is more likely to get a job (and which one has more market share)?

  • Looking for back-end jobs: PreferredJava, followed byGoAgain, isNode(JavaScript), probably not recommendedPHP,C#;
  • Looking for front-end jobs: PreferredJavaScript(TypeScript), followed byFlutterAgain, isAndroid(Java,Kotlin),iOS(OC,Swift);
  • Other directions: algorithm engineer, game development, artificial intelligence, etc.

So, in terms of the front end, after learning HTML, CSS, JavaScript, which framework is more likely to find a job?

  • If you are looking for a job abroad, it is recommended firstReact, followed byVue 和 AngularAnd is not recommendedjQueryA;
  • If you are looking for a job in China, it is recommended and necessary to studyVue, followed byReactAgain, isAngularAnd is not recommendedjQuery.

1.4 learningVue2orVue3

  • For having masteredVue2For the students, direct learningVue3In the relevant content can;
  • For those who have not studiedVue2Students, direct learningVue3Will do.

The Programmer: Vue3 is compatible with 2.x. Developers who want to learn Vue often have to decide whether to start with Vue2 or go straight to Vue3. What advice do you have?

You Yuxi (Vue Author) : Just learn Vue 3, the basic concepts are exactly the same.

1.5 Need to learn nowVue3 吗

On September 18, 2020, the much-anticipated version of VUE3 was finally released, named “One Piece”.

  • It brings many new features: smaller size, better performance, better API design, better TypeScript integration;
  • inVue3When we first launched, a lot of people were excited to try itVue3All kinds of new features, we useVue3Write aboutdemoThere is no problem with practice, but it is really used in real business projectsVue3There is a relative process;
  • includingVue3More stability and more communityVue3Support and improvement of related plugins and component libraries (because it takes time for the tools, peripheries and libraries in the ecosystem to be compatible with each other,Vue3Some of the new uses also take time to settle).

So now is learningVue3What about the time?

  • The answer is yes;
  • First of all,Vue3After a series of updates and maintenance, it has been stabilized, and Yuyu Creek beforeVueConf China 2021It was also announced that it would beQ2 of this year (2021)willVue3As the default version (now the time is7 月 10No.,npmIt is not installed by defaultVue3, and the document does not yet have a default pointingv3Documents).
  • After a period of precipitation, the community has become more complete, includingAnt Design Vue,Element PlusBoth are provided onVue3So many companies are now using it for new projectsVue3To develop it.
  • And in the interview, you’ll be askedVue3,Vite2Tool-related issues.

1.6 Vue3The changes brought about

1.6.1 source

  • The source code is managed in the form of monorepo

    • mono: a single;
    • repo:repository(warehouse);
    • The idea is to store code for many projects in the same repository;
    • This can make the multiple packages themselves independent of each other, can have their own functional logic, unit tests, etc., at the same time, but also in the same warehouse, convenient management;
    • And the module is more clearly divided, maintainability and expansibility are stronger.

  • The source code was rewritten using TypeScript

    • inVue2.xWhen,VueuseFlowType detection;
    • Now theVue3.x ，VueThe source code is all usedTypeScriptDo refactoring, andVueItself toTypeScriptSupport is also better.

1.6.2 performance

  • Proxy is used for data hijacking

    • inVue2.xThe time,Vue2Is the use ofObject.definePropertyTo hijack the datagetter 和 setterMethods;
    • One drawback of this approach has always been the inability to hijack and listen when adding or deleting properties to an object.
    • So in theVue2.xHad to offer something specialAPI, such as$set,$delete, in fact, some of themhackMethods added for developers to learn newAPIThe cost;
    • And in theVue3.xTo start,VueuseProxyTo achieve data hijacking, theAPIAnd we’ll talk about the use of this and the principle of it;

  • Removed some unnecessary APIs

    • Removed on the instance$on,$off 和 $once;
    • Removed some features:filters(filter),inline template attribute(inline template properties), etc.;

  • Compiler optimizations

    • generateBlock Tree;
    • SlotCompiler optimization;
    • diffAlgorithm optimization;

1.6.3 newAPI

  • From the Options API to the Composition API

    • inVue2.xBy the time we get throughOptions APITo describe the component object;
    • Options APIincludingprops,data,computed,watch, life cycle events,methodsEtc.;

    • A big problem with the Options API is that multiple logics may be in different places:

      • Such ascreatedWill be used inmethodsTo modify one of the methods indataIn the data, code cohesion is very poor;
    • whileComposition APIYou can put related code in the same place for processing, rather than having to spread it across multiple areasOptionsIn, also need not again in multipleOptionsBetween looking for;

  • Hooks functions increase the reusability of code

    • inVue2.xWhen we usually go throughmixinsSharing logic between multiple components;
    • But there is a big drawbackmixinsIt’s also made up of a bunch ofOptionsComposed of, multiplemixinsThere will be naming conflicts;
    • theVue3.xWe can go throughHookFunctions extract bits of independent logic, and they can also be reactive;
    • Specific benefits will be explained in the following exercises (including principles);

2. VueThe installation of

Once you know Vue briefly, how do you use it?

First of all, it’s important to know that Vue is essentially a JavaScript library. We don’t need to think of it as very complicated at first, just think of it as a library that has already helped us encapsulate and that we can introduce and use in our projects.

Before you can use Vue, you need to install Vue. There are four ways to install the JavaScript library:

  • Pass through the pageCDNThe way to introduce;
  • downloadVue 的 JavaScriptAfter the file is manually introduced in the page;
  • throughnpmPackage management tool installation (speakWebapckI’ll talk about it later.
  • Installed directlyVue CLITo installVue CLIWhen the installationVue(finishedWebpackWe’ll talk about scaffolding later, we’ll talk about scaffolding laterVue CLICreate the project and use itVue);

2.1 Mode 1CDNThe introduction of

  • What is a CDN? CDN (Content Delivery Network or Content Distribution Network, abbreviated as CDN)

    • It refers to the use of the server closest to each user through interconnected network systems;
    • Faster and more reliable delivery of music, pictures, videos, applications, and other files to users;
    • To provide high performance, scalability and low cost network content delivery to users.

  • Commonly used CDN servers can be divided into two types:

    • Their ownCDNServer: Need to buy your ownCDNServer, Huawei, Ali, Tencent, Amazon, Google and other platforms can be purchasedCDNThe server;
    • Open sourceCDNServer: the international use is moreunpkg,JSDelivr,cdnjs;
  • throughCDNThe introduction ofVueThe latest version of:
<script src="https://unpkg.com/vue@next"></script>

If you visit the CDN address https://unpkg.com/vue@next in your browser, you can also see the uncompressed source code after Vue is packaged (uncompressed code is recommended during development, so you can see more details) :

As you can see, the top of the file defines a global variable Vue (which is actually an object), so we’ll use the global variable Vue next.

  • Hello VueImplementation of the case:
<! -- 4. The element used to mount the app object (usually div and set the id to app, but other elements and selectors can also be used) --> <div id="app"></div> <! -- 1. CDN Vue -- --> <script SRC ="https://unpkg.com/vue@next"></script> <script> const obj = {// 3. Template: '<h2>Hello Vue</h2>'}; <h2>Hello Vue</h2>'}; // const app = vue. createApp(obj); // const app = vue. createApp(obj); // mount the app object on the HTML element with the id of app (that is, tell the app object where to display it) // Instead of manually fetching the target element through the document.querySelector method, mount the app object on the HTML element with the id of app (that is, tell the app object where to display it). All we need to do is pass in the DOM string of the selector we want to match. // Because Vue internally uses this string to help us find the target element using the document.querySelector (source code:  // packages/runtime-dom/src/index.ts -> createApp -> app.mount -> // normalizeContainer(containerOrSelector) -> if (isString(container)) -> document.querySelector(container)) app.mount('#app'); </script>

Summarize the five steps of using VUE in the above case:

  1. The introduction ofVue;
  2. Create an object that contains the template.
  3. By global variablesVuecallcreateAppMethods (functions within an object are called methods) and pass in the object;
  4. The returned object is calledmountMethod mounts itself on an element;
  5. The template content is displayed on the page;

2.2 Mode 2. Introducing after downloading

Download the VUE source code, you can directly open the CDN link:

  • Open the link (https://unpkg.com/vue@next) and copy all the code in it.
  • Create a new file, such asvue.jsPaste the copied code into the file.

Next, you can import the new file you just created with the script tag (for example, in “import locally. HTML”) :

<script src="./js/vue.js"></script>
  • Hello, Vue3Implementation of the case:
<div id="app"></div> <script src="./js/vue.js"></script> <script> Vue.createApp({ template: '<h2> hello, Vue3</h2>'}).mount('#app'); </script>

3. Counter case

Let’s implement a counter example:

  • Click on the+ 1Button, the page content will display the number+ 1;
  • Click on the- 1Button, the page content will display the number- 1;

There are a number of ways to do this, but we chose to do it in a native and Vue way, and compare the differences.

3.1 Native Implementation

<h2 class="counter"></h2> <button class="increment">+1</button> <button class="decrement">-1</button> <script> // 1. Gets the element that shows the current count and the two button elements const counterEl = document.querySelector('.counter'); const incrementBtnEl = document.querySelector('.increment'); const decrementBtnEl = document.querySelector('.decrement'); // 2. Define a variable to record the current count let counter = 0; // 3. Assign the initial value counterel. innerHTML = counter to the content of the element that displays the current count; / / 4. For the button to add a click event to monitor incrementBtnEl. AddEventListener (' click '() = > {counter++; counterEl.innerHTML = counter; }); decrementBtnEl.addEventListener('click', () => { counter--; counterEl.innerHTML = counter; }); </script>

3.2 Vueimplementation

<div id="app"></div> <! Vue --> <script SRC ="./js/vue.js"></script> <script> vue.createApp ({// This is not the case, but it is not the case) This allows you to preserve newlines and define strings across lines. // The following template contains a div, which is required by Vue2. In Vue3, you can remove the div. // Vue3's template outer element (div) can be left unwrapped (Vue2 must be wrapped with a root element, otherwise it will report an 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.) // You can use the "Mustache" syntax (double curly braces) to return properties in an object using the following data function properties; // A template can bind a click event to a property in the methods object below by binding it to the @Click event. template: ` <div> <h2>{{ message }}</h2> <h2>{{ counter }}</h2> <button @click="increment">+1</button> <button @click=" Decrement ">-1</button> </div> ', // CreateApp function passes in an object. Objects can have multiple attributes, and // Vue specifies that there can be data attributes as well. // The data attribute in Vue3 must be a function that returns an object. It is not allowed to pass the object directly. Datafn. call is not a function (data() {return {data() {return (); // They are all added to the Vue reactive system, so they are all reactive; // Both can use message: 'Hello World', counter: 0} in the template; }, // You can also have the methods attribute // Methods attribute for an object that defines various methods. Methods: {// Define the method for the "add one" operation (the syntax used to define methods in objects before ES6) increment: Function () {console.log(' Click +1'); // methods can be used to retrieve data from data (essentially, Proxy) this.counter++; }, // Method for defining a "Minus One" operation (syntax sugar for defining methods in ES6 objects) Decrement () {console.log(' Click -1'); this.counter--; } } }).mount('#app'); </script>

We can also do a little extraction of the above code (detailed in Section 4.1.1 of Template extraction) by modifying it as follows:

<div id="app"></div> <template id="my-app"> <h2>{{ message }}</h2> <h2>{{ counter }}</h2> <button @click="increment">+1</button> <button @click="decrement">-1</button> </template> <script src="./js/vue.js"></script> <script> const App = { template: '#my-app', data() { return { message: 'Hello World', counter: 0 }; }, methods: {increment: function() {console.log(' Click +1'); this.counter++; }, Decrement () {console.log(' Click -1'); this.counter--; }}}; Vue.createApp(App).mount('#app'); </script>

3.3 Imperative and declarative

As we’ll see, the patterns and characteristics of native development and Vue development are quite different, and there are actually two different programming paradigms involved:

  • Imperative and declarative programming;
  • Imperative programming focuses on how to do; Declarative programming focuses on what to do, and how to do the process is left to the framework (the machine).

How do we do that in the native implementation?

  • Each time we do something, we need to write a piece of code in JavaScript to give the browser an instruction;
  • This process of writing code is called imperative programming;
  • In the early primitiveJavaScript 和 jQueryIn development, we all write code in this imperative way;

How do we do this in the implementation of VUE?

  • We will be increateAppThe required content is declared in the incoming object: template (template), data (data), methods (methods), the rest of the specific operation byVueHelp us finish;
  • The process of writing code in this way is called declarative programming;
  • At presentVue,React,AngularProgramming mode, are this declarative.

3.4 MVVMmodel

  • MVC and MVVM are both software architectures:

    • MVC 是 Model-View-ControllerAn abbreviation for an architectural pattern for a framework that has been widely used in the past, such asiOSAnd the front;
    • MVVM 是 Model-View-ViewModelIs a very popular architecture pattern at present;

  • Typically, we also refer to VUE as an MVVM framework

    • VueThe website actually says: “Although not fully followedMVVMModel, butVueThe design was also inspired by it.”

The previous code that implemented the counter natively can be divided (though not very clearly) according to the MVC software architecture:

The previous code for Vue to implement the counter was written in accordance with the software architecture pattern of MVVM:

To sum up, the native implementation of the counter can be regarded as an imperative programming of the MVC architectural pattern, and the VUE implementation of the counter can be regarded as a declarative programming of the MVVM architectural pattern.

4. template,data,methodsProperties,

When we use CreateApp, we pass in an object. Let’s take a closer look at what the properties we passed in represent.

4.1 templateattribute

The template property represents the template information that Vue needs to help us render.

  • So far we can see that it has a lot of HTML tags in it, which will replace the innerHTML of the element (in our case, div with id app) that we are mounting to;

    • Corresponding code in the source code:packages/runtime-dom/src/index.ts -> createApp -> app.mount -> container.innerHTML = ''.VueWill clear the contents before mounting;
  • There are some in the templateStrange Grammar, such as{{}},@clickThese are allTemplate-specific syntaxWe’ll come back to that;

But the way this template is written is a little awkward, and the IDE probably doesn’t have any hints that hinder the efficiency of our programming.

4.1.1 templatewriting

The good news is that Vue gives us two other ways to write templates:

  • Way one: usescriptTag, and mark its type asx-templateTo set upid;
<script type="x-template" id="my-app">
    <div>
      <h2>{{ message }}</h2>
      <h2>{{ counter }}</h2>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
  </div>
</script>

  • The second option is to use any tag (usually the template tag, because it won’t be rendered by the browser) and set the id.

    • HTMLContent Template (<template>The) element is a type used for savingHTMLThis will not be rendered immediately after the page has loaded, but will be used later at runtimeJavaScriptThe period may be instantiated.1
<template id="my-app">
  <div>
    <h2>{{ message }}</h2>
    <h2>{{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

  • At this point, in the object passed to the createApp function, we need to pass in a template that starts with #

    • If the string is#Start, then it will be used asquerySelector, and uses a matching elementinnerHTMLAs a template string.

Method a complete code:

<div id="app"></div>

<script type="x-template" id="my-app">
    <div>
      <h2>{{ message }}</h2>
      <h2>{{ counter }}</h2>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
  </div>
</script>

<script src="./js/vue.js"></script>
<script>
  Vue.createApp({
    template: '#my-app',
    data() {
      return {
        message: 'Hello World',
        counter: 0
      };
    },
    methods: {
      increment: function () {
        this.counter++;
      },
      decrement() {
        this.counter--;
      }
    }
  }).mount('#app');
</script>

Method two complete code:

<div id="app"></div>

<template id="my-app">
  <div>
    <h2>{{ message }}</h2>
    <h2>{{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script src="./js/vue.js"></script>
<script>
  Vue.createApp({
    template: '#my-app',
    data() {
      return {
        message: 'Hello World',
        counter: 0
      };
    },
    methods: {
      increment: function () {
        this.counter++;
      },
      decrement() {
        this.counter--;
      }
    }
  }).mount('#app');
</script>

In development, it is recommended to write the template as

4.2 dataattribute

  • The data property needs to be passed a function, and that function needs to return an object:

    • inVue2.xYou can also pass in an object (justVueFor instance, if it is componentdata, then only acceptfunction);
    • inVue3.xYou must pass in a function or it will report an error directly in the browser.

  • Objects returned from data are hijacked by Vue’s responsive system, and subsequent access or modification to the object is handled in the hijacking;

    • So here we aretemplateThrough the{{ counter }}accesscounter, you can get data from the object;
    • So let’s modifycounterThe value of the,templateIn the{{ counter }}It can also change;
  • The specific principle of this response type, we will have a special space to explain later.

4.3 methodsattribute

  • The methods property is an object in which we typically define a number of methods:

    • These methods can be bound to the Template template;
    • In these methods, we canusethisThe keywordTo access directly todataProperties of the object returned in the

  • For experienced comrades, here is the following description in the official document 2:

    • Consider two questions:
    1. Why can’t you use the arrow function? (Is the explanation given in the official document really understood?)
    2. What exactly does this point to without using the arrow function? (Can be used as an interview question)

4.4 Other attributes

Of course, there are many other properties in the object passed by createApp(), which we’ll cover later:

  • Such asprops,emits,setup,computed,watchAnd so on;
  • It also includes a lot of lifecycle functions;

Don’t worry, we’ll learn them one by one.

5. VueSource download, debugging, reading

  • Some of you may be wondering, didn’t you download the Vue source code in Section 2 above? Why do you want to download again?

    • Because I downloaded it earlierVueThe source code is already packaged, and all the code is in one file, which looks very inconvenient.

  • Some people may also ask that the Vue source code downloaded through the CDN in Section 2 contains not only ES5 code, but also ES6 code.

    • That’s because it actually ends up passing when the project is packagedbabelAfter the tool is set up, the code is packaged once (twice packaged, with compression and other processing), so it still exists for the time beingES6The code should be fine.

In the case of the Vue source code downloaded from the CDN in Section 2, we may read a function in it, but we will not read the packaged source code bit by bit. So what should we do? Here’s what we’ll do:

  1. Open theGitHubWebsite, type in the search box at the top leftvue-next(i.e.Vue3Version) to search;
  2. Click in the search resultsvuejs/vue-next(As we can see, it is usedTypeScriptWrite);

  3. After entering the vuejs/vue-next repository, there are two ways to download:

    • Git clone method (recommended) : Click the Code button, click the copy button directly after the URL link below to copy the URL, and then download the source Code as git clone method (why choose this method? This is because Git relies on Git to do some validation when it runs its dev. If you choose Download Zip and there is no git (a. Git folder is missing), your code may not work.

      • Open the terminal (WindowsOn iscmdOr useGit Bash);
      • throughcdCommand into the directory where you want to store the source code for download later;
      • performGit clone the URL you just copiedCommand, download the source code;
    • Download ZIPMethod: ClickmasterPull down the button, clickTagsTab, select the latest stable version to download (we generally do not downloadBranchesUnder themasterMain branch or otherdevBranches (will eventually merge tomasterIn the main branch) because they are likely to be unstable code under development; whileTagsUnder thexxx-beta.xIs a beta version and is not stable enough), we will choose herev3.1.4Version to download:

If you Download the source code using Download Zip and want it to run, you can do this:

  1. First unpack the downloaded source code compression package, withVisual Studio CodeOpen the unzipped folder (Vue - next - 3.1.4);

  2. Open the terminal in Visual Studio Code, enter the yarn install command, and execute it;

    • It needs to have been installed on your computer beforenodeAnd usenodeTo install ayarnIf not, you need to download it firstnode(advice tonodeDownload the “Long Term Support Edition” (LTS) because relative to the “current release” (Current), the “long-term support version” will be a little more stable);
    • After downloading and installingnodeAfter that, there will benpmThis tool, can be executed from the command line terminalnpm install yarn -gCommand, and then you have it on your computeryarnThis is a tool;
    • becauseVueThe source code is usedyarnTo manage the (source directory can be seenyarn.lockFile), so we need to executeyarn installCommand to installVueSource required dependencies.
  3. performgit initCommand to change the current folder (Vue - next - 3.1.4) to an emptyGitWarehouse;
  4. performgit add .The command adds all files in the current directory to the staging area;
  5. performgit commit -m "fix(install): install dependences"Command to commit staging area contents to a local repository;
  6. performyarn dev(will essentially execute the current folderpackage.jsonIn the filescriptsIn thedevScript corresponding command), it will put the current folder under thepackagesAll files in the folder (areVueSource code), the packaged code will be placedpackages/vue/dist/vue.global.jsFile (the file is actually uploaded toCDNIn the file above);
  7. With this packaged source code file, we can go topackages/vue/examplesDirectory, create a new directory (e.gcoderzhj) and create a new one in that directoryhtmlFile (e.g.,demo.html), and then you can use the packaged source file by introducing it in that fileVueWrite some code and put it inVueThe project is running:

If you download the source Code through git clone, you can open the vue-next folder under the location of the source Code directly with Visual Studio Code without decompressing it. If you want to switch to another version (such as the latest stable version v3.1.4), you can first run the git tag command at the terminal to check which tags are packaged. Switch to version 3.1.4 via Git Checkout v3.1.4 (if not, master by default), and then yarn install and execute yarn dev (or NPM dev) directly.

So what’s the use of running? You can use debugger in the script tag to debug:

For example, if we want to see what createApp does, we can go from F10 to vue. createApp and then F11 to the createApp function:

However, we will notice that we are debugging in a large file called vue.global.js, which means that all the source code is put together, which looks very inconvenient. Is there a way to jump to a specific source code file when debugging? Yes, we can modify the dev script corresponding to the script in the package.json file in the project directory and add — sourceMap at the end of the command:

Then re-execute the yarn dev and repackage the project and run it (the dist directory will have a vue.global.js.map file, which is the sourceMap file for debugging purposes). Each line of code during debugging can now be mapped to its specific file, so we can match the mapped file to the Packages folder in the project:

Write in the last

If there are any mistakes in this article, please correct them in the comments section.

  1. The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. — MDN ↩
  2. See https://v3.cn.vuejs.org/api/o… ↩