preface

This article does not lead to war, mature people should be out of the framework, not who is better or who is worse. As the saying goes, a black cat is a white cat.

So this article will take you to read the source code. Simple and easy to understand, everyone can understand. And reap the benefits.

Start with a new instance of Vue

Preparations: Chrome opens Vue Github address

Git clone HTTPS://github.com/vuejs/vue.git> code vue (ps: this command opens the vue project with VS Code)Copy the code

Take a look at the directory structure of the VUE project:

Wow, the structure is very clear! Somehow it’s not that complicated (psychological construction for analyzing source code)

Global install serve:

> npm i -g serve
Or
> yarn global add serve
> serve .
Copy the code

So you shoud open in: localhost:5000

The project’s directory structure is visualized in the browser.

Click on the examples, and then find the markdown, at this point your url is http://localhost:5000/examples/markdown/

Wow, it’s time to play. Such as:

Write markdown syntax on the left and display rough syntax on the right. No, it’s not important. The important thing is, code!

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js markdown editor example</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></script>
    <! -- Delete ".min" for console warnings in development -->
    <script src=".. /.. /dist/vue.min.js"></script>
  </head>
  <body>

    <div id="editor">
      <textarea :value="input" @input="update"></textarea>
      <div v-html="compiledMarkdown"></div>
    </div>

    <script>
      new Vue({
        el: '#editor'.data: {
          input: '# hello'
        },
        computed: {
          compiledMarkdown: function () {
            return marked(this.input, { sanitize: true})}},methods: {
          update: _.debounce(function (e) {
            this.input = e.target.value
          }, 300)}})</script>

  </body>
</html>
Copy the code

Take a closer look at our script tag, new Vue({… }) is there something going on?

again

 <! DOCTYPEhtml>
<html lang="en">
  <head>.</head>
  <body>
    <! -- template for the modal component -->
    <script type="text/x-template" id="modal-template">.</script>

    <! -- app -->
    <div id="app">
      <button id="show-modal" @click="showModal = true">Show Modal</button>
      <! -- use the modal component, pass in the prop -->
      <modal v-if="showModal" @close="showModal = false">
        <! -- you can use custom content here to overwrite default content -->
        <h3 slot="header">custom header</h3>
      </modal>
    </div>

    <script>
      // register modal component
      Vue.component('modal', {
        template: '#modal-template'
      })

      // start app
      new Vue({
        el: '#app'.data: {
          showModal: false}})</script>
  </body>
</html>

Copy the code

This chestnut function is very simple, is a button on the page, click the button will pop up a box. You’re probably going to get a little bored. That’s okay. Get to work.

Now, you delete the tag in the Template for Modal script, and click that button on the page.

No box pops up on the page and no error message is displayed on the console. Similarly, if you disable the global Vue component, the result is that the page content has changed, but there is still no popup.

So, based only on the above attempts, the following points are summarized:

  • A page is an instance of Vue. Because there are standardsnewgrammar
  • If the page wants to use other components (components outside the app code), it must be registered first
  • Script tags with htML-like tags (div, for example) must be compiled into executable code

Without further ado, let’s add a few lines of code.

 const app =  new Vue({
        el: '#app'.data: {
          showModal: false}})console.log('Vue.component:',Vue.component)
console.log('Vue:',Vue, 'new Vue:', app)
Copy the code

Look at the picture:

A: wow! The printed results are delightful! What do you see? What words do you think you know?

Take a look at the printout of Vue.com Ponent.

  • Obviously, this is a function, and directly returns a statement similar to… The result? (Shown in the red box)
  • The entry seems to see nothing temporarily, temporarily stay.

Look at the new Vue ({… }).

  • Vue itself is a function
  • The Vue instance has many properties, some of which are familiar
    • Vnode: Virtual DOM?
    • $createEmelemt: create a node
    • _watcher: What does this word monitor mean?

Next step: Break point! As shown in figure

Then the page refreshes and the code stops. You will notice that the code will pass through emptyObject, Vnode, Observer, Watcher (since I have a breakpoint, you can find it and set it yourself based on the image above).

Eventually, you’ll end up here.

Does this code look anything like what you saw above? Right! This is Vue.component printed by console.

Solve crimes! Finally find the entry to see the source code!!

Analyze initAssetRegisters