Vue & React concepts

  • VueIs a set of progressive frameworks for building user interfaces.
  • ReactFor building user interfacesJavaScriptLibrary.

Vue concept in depth – an understanding of the progressive framework

Vue is a set of progressive frameworks for building user interfaces. Vue is designed to be applied layer by layer from the bottom up. At its core, Vue focuses only on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects.

Progressive framework: Provide plenty of choices, and don’t have many mandatory requirements

Incremental can also mean step by step, which basically means that you don’t need to use everything in the framework when using Vue, you can choose the parts you need. The diagram below:

  • Declarative rendering and component systems are part of Vue’s core library,
  • Client-side routing, state management, and build tools all have their own solutions.
  • These solutions are independent of each other, and you can build on top of the core any number of other components you want, not necessarily all of them.
  • There are not many mandatory requirements for using Vue, unlike Angular, which requires using its module mechanism, dependency injection, and special form to define components (which is common to every view framework and unavoidable to Vue).

Apply layer by layer from the bottom up

  • Start from the grassroots, write the basic things, and then layer by layer to add effect and function.

Vue concept in depth – imperative & declarative

  • Imperative: tells the program what to do step by step, depending on the design of the developer.
  • Declarative: only tell the program what results it wants, and the program guarantees how to achieve them. The developer does not care.

Vue3.0 new features

Benefits of upgrading vue3.0

  • Vue2. X: a function hopping problem
  • Vue2. X Solution Mixin:
    • Name conflict problem
    • The role of the exposed variables is unclear
    • Logic reuse to other Components is often problematic
  • vue3.x-Composition API: Logical partitioning increases code readability and maintainability

vue3.x-Composition API

vue3.x-setup

  • inbeforeCreateBefore execution.
  • setup(props, context):
    • props: Property passed in by the component
    • context: {attrs,slot,emit}

Vue3. X – Life cycle diagram

  • Added hook functions for debuggingonRenderTriggeredandonRenderTricked