Author: How many floors to carry a bag of rice? Motto: the most afraid of your mediocre life, but also comfort themselves ordinary valuable.

Why learn source code

  • Technology is thePrimary productivity
  • Learn about the purpose of API design,Train of thoughtChoices,
  • Learn excellentCode style.
  • Learn how to organize code
  • Learn techniques for implementing methods
  • Learn new ES67 API, TS advanced usage
  • Don’t set limits on yourself and don’t let the skill limits of those around you become your limits
  • Interview bonus
  • Pack to force weapon

Learning source side effects

  • A tiger is not a dog(Forced to mount VUE3, he was in a mess, the project was difficult to maintain, and his colleagues suffered)
  • Use it for its own sake, not for the sake of local conditions
  • Like to show off the skills to write a seemingly big, but actuallyUnreadability, which affects teamwork

Vue3 design motivation and purpose

  • Better logic reuse and code organization
    • The code style of vue2 Option API scatters the code of the same logical point, which leads to separation of the reader’s concerns and is not conducive to the logic reuse of the code. The Vue3 Composition API aggregates the code of the same business logic into a useXXX function, and then assembs the different logic through setup and returns it to the component data, which is obviously more convenient for logic reuse.
    • When vue2 mixins are used for logical reuse, naming conflicts and data sources are not clear. While vue3 provide/ Inject composition API can easily find data sources and rename them through deconstruction, which is obviously more convenient for logical reuse.
  • Better type derivation
    • In methods, this refers to the component instance rather than the method itself, which is not conducive to type derivation.
    • Router, this.router, this.router, this.store. Each new plug-in needs to append a type definition to Vue.

Comparison before and after updates

To optimize the

  • Smaller packaging (global API tree-shaking)
  • Render, update faster, less memory footprint
  • Use proxy instead of Object.defineProperty
  • V-model replaces the previous V-Model and.sync
  • Lifecycle changes such as destroyed beforeDestroy to unmounted beforemount
  • Custom instruction apis are lifecycle consistent
  • Diff algorithm promotion (static marking, static promotion)

New features

  • Template supports multiple root tags
  • Composition API enables modularization and reuse of logic
  • Teleport Portal component code block mounted to any location
  • Use components to load asynchronously (experimental properties)
  • CreateRenderer custom renderer with @vue/ Run-time Core
  • Use TS source code, better type derivation, better adaptation of TS

More changes

  • V3.cn.vuejs.org/guide/migra…

Question answer

Problem 1: The Compostion API doesn’t solve any problems at all, it’s just chasing new stuff

Yu: I don’t agree with that. Vue started small, but is now widely used in business domains with varying levels of complexity, some easily handled based on the Option API, others not. For example, the following scenario:

  • Large components with lots of logic (hundreds of lines)
  • Reusable logic in multiple components

For problem 1, you need to split each logic into different options. For example, a piece of logic requires some response data, a calculation property, some listener properties, and methods. To understand this logic, you need to keep moving up and down and reading, and although you know what type some properties are, you don’t know what they do. The situation is even worse when a component contains more than one logic. With the new API, you can combine data and logic together, and most importantly, you can cleanly extract that logic into a function, or even a single file.

Problem 2: Using a new API causes logic to be scattered in different places, violating the “separation of concerns”

Yu: The problem is similar to the problem of how project documents are organized. Many of us agree that organizing by file type (layout HTML, style CSS, logical JS) is not the right approach, because forcing related code to be split into three files creates the illusion of “separation of concerns.” The key here is that “concerns” are not defined by file types. Instead, most of us choose to organize files by functions or responsibilities, which is why people like Vue’s single-file component. SFC is a way of organizing code by function, but ironically it was also rejected by many when it was first introduced as a violation of separation of concerns.

Problem 3: The new syntax makes Vue less simple, leading to “spaghetti code” that reduces project maintainability.

Yu: On the contrary, the new API is designed to improve the long-term maintainability of projects. If we look at any javascript project, we’ll start with the entry file, which is essentially the “main” function that your application implicitly calls when it starts. If there is only one function entry that results in spaghetti code, then all JS projects are spaghetti code. Obviously not, because developers organize code through modularity or smaller functions. In addition, I agree that the new API theoretically lowers the minimum threshold for code quality. But we can mitigate this situation by using the same techniques we used to prevent code from becoming spaghetti. On the other hand, the new API can raise the upper limit of code quality, allowing you to refactor into higher-quality code than the Option API. Also, with the Option API you have to deal with issues like mixins. Many people think that “Vue loses simplicity “when it really just loses the ability to type check code in components (that is, you don’t know whether a variable is data, method, or computed). But with the new API, implementing a type detector is also very easy to implement the old features. That said, you should not be limited by the Option API and focus more on logical cohesion.

The source code to debug

  • Install source code and dependencies (install dependencies error is usually NPM Taobao source problem or need a ladder)
git clone https://github.com/vuejs/vue-next.git
yarn install
yarn dev --sourcemap
Copy the code
  • Enter the debugger in source code

  • Package the source code
yarn dev --sourcemap
Copy the code

  • New packages/vue/examples/index. The HTML for testing
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div>
    <div>test demo {{msg}}</div>
    <div>test demo {{msgMore}}</div>
  </div>
</div>
<script src=".. /dist/vue.global.js"></script>
<script>
  Vue.createApp({
    setup() {
      const msg = Vue.ref('Hello')
      const msgMore = Vue.computed(() = >msg.value+' world')
      return {
        msg,
        msgMore
      }
    }
  }).mount('#app')
</script>
</body>
</html>
Copy the code
  • Google Chrome opens index.html F12

  • Other tutorials: Bilibili VUE3 source debugging video tutorial

read

  • You have to know the design patterns ts edition:
  • Is it necessary to master the minutiae of framework source code?
  • Yu Stream: Vue3 design process:
  • VueConf 2021 On Vue3 Ecological Progress:
  • Vue3 related project aggregation website

Go to the online diagnosis and treatment platform of Wedoctor Internet hospital, make a quick consultation, and find a top three doctor for you in 3 minutes.

Don't forget to like, follow and comment on me