Vue3 learning - Encounter Vue3 - Moment For Technology

The initial vue

Vue (pronounced vju/curliest), also known as vue.js or Vuejs, is a set of progressive frameworks for building user interfaces

Build the user interface – The core responsibility of VUE is to make it easy for developers to develop the interface quickly and easily
Progressive framework

Features brought by VUE3

Source code is managed in monorepo form:
- Store code for many projects in the same Repository
- The goal is for multiple packages to be independent of each other, allowing them to have their own functional logic, unit tests, and so on, while at the same time facilitating management in the same repository
- In this way, modules are divided more clearly, and maintainability and expansibility are stronger
Source code is rewritten using TypeScript
- At ve2. X, Vue uses Flow for type detection
- In ve3. X, all Vue source code is refacedin TypeScript, which improves Vue support for TS
Use Proxy for data hijacking
- Vue2 uses Object.defineProperty to hijack getters and setters of data,
- One drawback of this approach is that it is impossible to hijack or listen when attributes are added to or removed from an object
- Vue uses Proxy to realize data hijacking, which perfectly solves the above problems
Some unnecessary apis and features were removed
The compilation aspect has been optimized
- Such as Block Tree generation, Slot compilation optimization, diff algorithm optimization
- Compiled packages are smaller and perform better
Options API changed to Composition API
- The Options API includes Options such as Data, props, methods, computed, and life cycle. The biggest problem is that multiple logic in the associated code may be defined and implemented in different Options, resulting in poor cohesion
- The Composition API allows related code to be processed in one place instead of having to search through multiple Options
Hooks functions increase code reusability
- In Vue2. X, we used to share logic between components through mixins, but mixins are also made up of a bunch of Options, and multiple mixins have naming conflicts
- In Vue3. X, we can use Hook functions to extract some of the independent logic, and it can also be reactive

At the beginning of the vue experience

Vue, by its very nature, is a well-wrapped JavaScript library, so our first step in using vUE is to introduce vUE

Common introduction methods:

In the page through the CDN to introduce
Download Vue JavaScript file, local introduction
Use it through the NPM package management tool installation
Create the project directly through the Vue CLI and use it

Hello Vue case

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Hello Vue</title>
</head>
<body>
  <! Define the mount point -- The content parsed by vue will be mounted below the mount point. It doesn't have to be a div or ID selector, but the typical mount point is a div element with the id app. 2. If there is content in the original mount point, the content in the original mount point will be cleared when vue mounts -->
  <div id="app">The overwritten data content will be cleared</div>

  <! There is a global object Vue -->
  <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

  <script>
    CreateApp Method used to create an instance object of Vue
    // The parameter is a configuration object
    const app = Vue.createApp({
      // The template is what the interface needs to render
      template: '<h2>Hello Vue</h2>'
    })

    // The mount method associates the vue instance with the mount point
    // Let vue know where parsed content needs to be mounted
    // The argument is a string, and the vue content gets the node via 'document.querySelector'
    app.mount('#app')
  </script>
</body>
</html>
Copy the code

The characteristics of the vue

Vue is declarative programming

In software development, there are two common programming paradigms, namely imperative programming and declarative programming. The traditional development mode is actually imperative programming, while the vUE development paradigm is declarative programming

Imperative programming

<! For each operation, you need to write a piece of code in JavaScript that gives the browser an instruction. The programming paradigm that focuses on "how to do" is imperative programming.

<! -- View section -->
<h2 id="count"></h2>
<button id="increment">+ 1</button>
<button id="decrement">- 1</button>

<! -- Model and Controller -->
<script>
  const countElem = document.getElementById('count')
  const incrementElem = document.getElementById('increment')
  const decrementElem = document.getElementById('decrement')

  let count = 0
  countElem.innerHTML = count


  incrementElem.addEventListener('click'.() = > {
    count += 1
    countElem.innerHTML = count
  })

  decrementElem.addEventListener('click'.() = > {
    count -= 1
    countElem.innerHTML = count
  })
</script>
Copy the code

Imperative programming has some of these drawbacks

We need to fetch and manipulate the DOM frequently, and dealing with DOM compatibility issues can be a hassle and a loss of performance

For example, in this case, the DOM operation is countelem.innerhtml = count, and the DOM operation is repeated three times
The definition of state is not well distinguished from the data logic, which can make the code look messy

Declarative programming

<div id="app"></div>
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

<script>
  // In vUE programming, we just declare (pre-defined installation rules) the relevant state and UI interface
  Vue automatically does bindings (associations, references) and updates the interface when the state changes
  How to do -> what to do
  // This programming paradigm is responsive programming
  Vue.createApp({
    Vue2 templates have and must have a root element
    Vue3 templates can have multiple root elements
    template: ` {{ counter }}
   `.// The reason we need a function here is to ensure that each component instance object's data is a new object and does not refer to the same object
    data() {
      return {
        // Data defined in data:
        // 1. It can be used in a template
        // 2. Will be incorporated into vUE's responsive system
        counter: 0}},methods: {
      increment() {
        // During parsing, vUE converts data objects into proxy objects and mounts them to vue instances
        // So you can use this keyword directly to access the data defined in data.
        this.counter += 1
      },

      decrement() {
        this.counter -= 1
      }
    }
  }).mount('#app')
</script>
Copy the code

The most popular front-end frameworks are declarative programming: we declare the corresponding state and template in advance according to the rules, and the framework automatically associates our state and events with the corresponding position of the template, and automatically updates and re-renders our template when the state changes. As for how to bind and update, we don’t need relationships at all. It allows us to focus solely on building the interface and processing the business logic

The MVVM architecture

In software, common architectures (software structures) are MVC (Model-View-Controller) and MVVM (Model-view-ViewModel).

MVVM is an improvement to MVC that automatically updates the interface when state changes

The template is the View in MVVM, the createApp parameter is the Model, and the VUE framework is the VUE layer
Vue in MVVM:Bind the model layer data to the corresponding location in the view 和 Bind events in the View to response functions defined in the Model

template

The value of template is the content of the template that needs to be rendered. The value of template contains a number of HTML tags that replace the innerHTML of the element to which we mount it, such as the div with the ID app
Templates end up being parsed and processed by vUE, so templates have some weird syntax (template syntax) like {{}}, like @click

The template to pull away

If the template is written directly as a string in createApp’s configuration options, not only is the separation between View and Model weak, but there is no prompt, so the

Template is extracted

Use the script tag and mark it of type X-template

<! -- This code is separated, but no syntax highlighting -->
<script type="x-template" id="template">
    <h2>Hello Vue</h2>
</script>

<script>
  Vue.createApp({
    // If template is removed, the id selector must be used
    // Vue parses only when template starts with #
    // Vue uses the document.querySelector method to get the corresponding element
    // Parse the innerHTML value of the element as a template for the VUE
    template: '#template'
  }).mount('#app')
</script>
Copy the code

Use any tag (usually the template tag, because it won't be rendered by the browser) and set the ID

The template element is a mechanism for holding client content that is not rendered when the page is reloaded, but can then be retrieved by JS at run time

<template id="template">
  <! -- Syntax highlighting exists -->
  <h2>Hello Vue</h2>
</template>

<script>
  Vue.createApp({
    template: '#template'
  }).mount('#app')
</script>
Copy the code

<! If the template tag is not used, the vue template will be parsed normally and the corresponding contents will be mounted to the mount point. However, other tags need to be rendered in the interface, so the interface will not render the result after parsing. The template content before parsing will also be displayed on the interface, so it is not reasonable and not recommended -->
<div id="template">
  <! -- Syntax highlighting exists -->
  <h2>Hello Vue</h2>
</div>

<script>
  Vue.createApp({
    template: '#template'
  }).mount('#app')
</script>
Copy the code

data

The data attribute is passed to a function that returns an object:

In Vue2. X, you can also pass in an object (although the official recommendation is a function, there is a warning if you do not pass a function);

In Vue3. X, you have to pass in a function, otherwise you get an error directly in the browser

The object returned from data is hijacked by Vue’s responsive system, and subsequent changes or access to the object are processed in the hijacking:

So we call counter in template with {{counter}}, and we get data from the object
So when we change the value of counter, the {{counter}} in template will also change

methods

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

These methods can be bound to the Template template
In a method, we can use the this keyword to directly access the properties of the object returned in data

Since arrow functions have no internal this, when defining functions in methods,

Do not use arrow functions in case this points to an error.

Vue3 implements the this binding in methods
const publicThis = instance.proxy // So this in Vue3's methods is actually a proxy object for the object returned by vue3's data
const ctx = instance.ctx // CTX is bound to functions that fix this. These functions are the ones that are actually called when the corresponding event is raised

if (methods) {
  for (const key in methods) {
    const methodHandler = methods[key] // Retrieve the corresponding function body
    
    if (isFunction(methodHandler)) {
        // Fix this pointer
        ctx[key] = methodHandler.bind(publicThis)
    }
  }
}
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue3 learning — Encounter Vue3

The initial vue

Features brought by VUE3

At the beginning of the vue experience

The characteristics of the vue

{{ counter }}

template

data

methods

Vue3 learning — Encounter Vue3

The initial vue

Features brought by VUE3

At the beginning of the vue experience

The characteristics of the vue

{{ counter }}

template

data

methods

Related Posts

Uniapp Component Packaging step (1)

In 2020, start the study of modern library infrastructure — from the perspective of front-end engineering development from project evolution

Build a blog with Vuepress + Github