The introduction

As Vue official documents to write content biased to combat, but not easy to help digest

This blog is my thoughts when LEARNING VUE. I will record the questions I think and some summaries. The idea here is not necessarily right, just thinking.

The content of this blog will be updated for a long time as I finish learning the content of Vue. Finally, I will study the source code of Vue with my questions and see if it can help me explain these problems.

On October 5

The instance

I see from the official documentation that this VM is an instance of the Vue constructor, in which I need to pass an object containing various options

Var vm = new Vue({// options})Copy the code

I took a curious look at the Vue source code and found this

ƒ Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }
Copy the code

It passed the options argument to a _init function, and THEN I searched vm._init

function initMixin (Vue) { Vue.prototype._init = function (options) { var vm = this; // a uid vm._uid = uid$3++; .Copy the code

The _init is defined in Vue’s prototype, meaning that it is written before instantiation, and when instantiated it calls the prototype method above the Vue constructor.

Examples from official documentation

<div id="app">
  {{ message }}
</div>
Copy the code
var vm = new Vue({ el: '#app', data: { message: 'Hello Vue! '}})Copy the code

Then the page becomes Hello Vue!

In effect, the message in the HTML becomes the options.data.message passed by the constructor. The options are the arguments passed when the app is instantiated.

What the hell is this el up here? It looks like it’s the element that gets the DOM.

{{message}} {{message}} {{message}} {{message}} {{message}}

Let me change the code to

let obj = { message: 123 } let vm = new Vue({ el: '#app', data: obj }) console.log(vm.$data === obj); //true console.log(vm.message === obj.message); //trueCopy the code

The $data attribute is the same as obj, and vm.message is the same as obj

This got me thinking, I printvmTake a closer lookFound that the instance object has a_dataProperty, which holds the address of the obj object, and_dataThe internal data is then expanded to become attributes of the VM.

Does the data flow like this: the constructor passes in an options argument, and its data is converted to _data of the instance, then somehow converts to attributes of the VM itself, and then somehow replaces {{message}} in the DOM element it gets?

Which leads to the question

Through the above description, I am very confused, so I can summarize the questions:

  • {{}}What’s the use of what?
  • el,dataWhat is it? What does it do
  • What is the memory between the instance object and the Vue constructor
  • How many parameters can be put in options
  • How to makevm._data.messageThe converted intovm.message[Source code]
  • Seems to be{{message}}withvm.messageThere is a connection. How can it be based on{{}}The internal string is replaced byvm.messageWhat about the property value of? [Source code]

To solve the question

1.elWhat is the

Provide a DOM element that already exists on the page as the mount target for the Vue instance. It can be a CSS selector or an HTMLElement instance.

After the instance is mounted, the element can be accessed with vm.$el.

If this option is present at instantiation time, the instance will start compiling immediately; otherwise, you need to explicitly call vm.$mount() to manually start compiling

In other words, el is essentially a mount point, which means that all of our instantiations are going to be in the DOM through this property. In plain English, Vue is told to manipulate the DOM element.

Vue provides instance properties to access them

<div id="vue_det"> <h1>site : {{age}}</h1> </div> <script type="text/javascript"> var vm = new Vue({el: '#vue_det', data: data }) vm.$data === data // true vm.$el === document.getElementById('vue_det')) // true </script>Copy the code

2. What is data

Data is mainly used to define attributes, and according to the official VUE documentation, it is recommended to use the data function to return an object. Each time a new instance is created, the data function is called, which returns a copy of the data.

  var vm = new Vue({
    data(){return {a:1}}
  })
  vm.a // => 1
  vm.$data === data // => true
Copy the code

3,{{}}What is the

{{}} is used to output object properties and function return values. You can use it for text interpolation with “Mustache” syntax (double braces)

Such as:

<span>Message: {{ msg }}</span>
Copy the code

The object returned from the data function affects the data in {{}}. When you make changes, you can also see that the page is rerendered to the new value of v.MSG. This inside support JS statement, magic!

4. Memory map

Suppose you now have an instance objectconst vm=new Vue({}), so what does its memory map look like? So let me draw it

vm.__proto__ === Vue.prototype //true
Vue.__proto__ ===Function.prototype //true
Vue.prototype.__proto__===Object.prototype //true
Function.prototype.__proto__===Object.prototype //true
Copy the code

5, the options

According to the official document, the options are divided into the above content. I will write a blog specifically to improve options.

And then there were problems

  • How to convert vm._data.message to vm.message

  • It seems that {{message}} is associated with vm.message. How on earth can {{}} become a vm.message attribute? [Source code]

    This is from October 5, 2020