What are the three elements of the vue directive?

The three elements of the vue directive are responsiveness, template engine and rendering. Responsiveness means that when data is updated or added, the page will respond and the corresponding data will be re-rendered; the template engine is essentially a string, used as the identifier of the instance; rendering refers to the process of converting the template into other codes.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What are the three elements of the vue command

The three elements in veu

• ##Responsiveness: How does vue monitor each attribute change of data?

• Template engine: How are vue templates parsed and how are instructions processed?

• Rendering: How is vue's template rendered into html? And the rendering process

How vue is implemented as responsive

Object.defineProperty

Simulation

1) What is responsiveness

After modifying the data attribute, vue immediately listens

the data attribute is proxied Go to vm

2) Object.defineProperty

Syntax:

Object.defineProperty(obj, prop, descriptor)

Parameter description:

• obj: required. Target Object

• #prop: Required. The name of the attribute to be defined or modified

• descriptor: required. Characteristics owned by the target attribute

Basic

var obj = {
  name: 'zhangsan',
  age: 25
}
 
console.log(obj.name); // 获取属性的时候，如何监听
obj.age = 26; // 赋值属性的时候，如何监听

We use the defineProperty method to implement the above operation: as follows

var obj = {}
 
var name = 'zhangsan'
 
Object.defineProperty(obj, "name", {
  get: function () {
    console.log('get');
    return name;
  },
  set: function (newVal) {
    console.log('set');
    name = newVal;
  }
});
 
console.log(obj.name); // 可以监听到
obj.name = 'lisi'; // 可以监听到

Using defineProperty we can monitor The data has changed. This is also the core method for vue to do response work.

3) Simulation

var mv = {}
 
var data = {
  price: 100,
  name: 'zhangsan'
}
 
var key, value;
for (key in data) {
 
  // 命中闭包。新建一个函数，保证 key 的独立的作用域
  (function (key) {
Object.defineProperty(mv, key, {
  get: function () {
    console.log('get');
    return data[key];
  },
  set: function (newVal) {
    console.log('set');
    data[key] = newVal
  }
})
  })(key);
}

How the vue template is parsed

What is the template

render function

render function and vdom

1) What is a template

Essence: string

has logic, such as v-if v-for, etc.

It is very similar to html format, but there is a big difference

Finally it has to be converted into html for display

The template must eventually be converted into JS code, because:

There is logic (v-if v-for), which must be realized with JS (Turing complete)

Convert to html rendering page, which must be realized with JS

Therefore, the template The most important thing is to convert it into a JS function

Basic example

 <div id="app">
    <div>
      <input v-model="title">
      <button v-on:click="add">submit</button>
    </div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>

The above is a template.

[Related recommendations: "

vue.js Tutorial"]

The above is the detailed content of What are the three elements of the vue directive?. For more information, please follow other related articles on the PHP Chinese website!