update

  • The code is updated into a picture, although the code block is not highlighted, feel without the code block convenient? I’ll change it back if you look uncomfortable

preface

Interest is the best teacher, especially for apes like us. Read the API revealed in VueConf. Only one feeling, as free as the wind ~. Especially want to experience the new version as soon as possible, also want to simulate on the basis of Vue2.0 ~! The difference between big guy and me is that I have already done it when I think about it. So before Vue3.0, we will interpret the big guy’s source code, expand the knowledge, and strive for an early date…

Protagonist vue function – API

Making: github.com/vuejs/vue-f…

The main content of this article is to interpret the source code of this library. The repository is written in typescript, so to read this article, you need to:

  1. typescriptBasic knowledge of
  2. rightvueHave a deeper understanding
  3. Be patient, because I may not be clear enough

Get into the business

I suggest you check the source code and come with me to see this interesting lib

Plug-in initialization

This requires that you understand the initialization process of the VUE plug-in

With question 1 in mind, let’s look at the implementation of the install method

  • aboutVue.config.optionMergeStrategies.setupIf you don’t understand, you can read the relevant article. Here’s a simple example: Use mixins during development, yesmountedAfter lifecycle processing, it is used again in the componentmounted, you’ll find mixins and componentsmountedThe content is executed instead of being overwritten in the component. This is theVue.config.optionMergeStrategiesThe role of.
  • When you look at problem 2, problem 1 is solved. When a vue plugin is initialized, the first argument is vue, and the second is an options object. The mixin passed in is one of the core elements of the plugin.

So what does the mixin method do? Problem Solving 2

In the mixin, we found that SetupHookEvent was hijacked to verify that setup was correct, and the waitPropsResolved method was added to the beforeCreate

With question 3 in mind, let’s move on to the waitPropsResolved method:

  • Let’s look at what’s in this method firstsafeRunWhat does the method do

Inside safeRun: wrap the initSetup method passed in with watch, and then execute the wrapped method. Ignore watch for the moment and guess what watch will do

  • Then look atwaitPropsResolvedThe execution process of
  1. If methods do not exist, set a method, fire SetupHookEvent, catch the set event, and executesafeRunmethods
  2. If methods is an empty object (that is, the first method was not found), set a method, fire SetupHookEvent, catch the set event, and executesafeRunmethods
  3. If methods exist, hijack the first method and execute when the method is copiedsafeRunmethods

Q4: Why is safeRun executed after SetupHookEvent is triggered?

With the name waitPropsResolved, I guess this will make sure the props are ready because the setup method takes a props parameter. All three of the above have one thing in common: safeRun is executed after the method has been captured and assigned. So the conclusion here is that the props must be ready when the method is assigned. (For the sake of argument, I have not done in-depth research here. If there is something wrong, please point out and discuss it.)

Question 5: Why is the initSetup method passed in wrapped with watch instead of executing initSetup directly?

  • Let’s look at the watch method first. The initSetup method is wrapped as() => { initSetup(vm, props) }, as the first parameter source, we keep an eye on the source parameter

  • Continue to see createSingleSourceWatcher

Vue.$watch = getter (); vue.$watch = getter ();

Zha drops. Meng, isn’t it? To summarize, take a look at the order in which plug-ins are executed. Let’s keep goinginitSetupMethods.

  • When the plug-in is initialized, a global blend of vUEbeforeCreatemethods
  • beforeCreateMethod to executewaitPropsResolvedmethods
  • waitPropsResolvedMethod to make sure that the props are readyinitSetupMethods towatchmethods
  • watchMethods put() => { initSetup(vm, props)In the hands of thevue.$watchthe

$watch (props) {initSetup (props) {initSetup (props);

  • Executing componentsetupmethods
  • Handles returned objects, Wrapper types are values handled through value, and other callssetVmPropertySet it on the VM
  • Component can be used happily

Here is a little tail, not to explain the value method, interested in your own research ~

The process of learning source code

The logic of this plug-in is very clear, the source code I learned was not uploaded to Github. Let me talk about my learning process. Since this plug-in is written using TS, I created a TS project using Vue, imported the source code of this plug-in into the project, and analyzed the source code bit by bit by referring to the local plug-in. Like through learning can also try, through log, breakpoint debugging, very helpful for understanding the source code.

conclusion

  • Before Vue3.0, get hooked with this plugin.
  • Although 3.0 inside the implementation principle is certainly not like this, you can learn the source code of this plug-in, improve personal ability
  • Write so much, welcome to exchange, correction ~
  • github: github.com/Kntt