Shulou(Shulou.com)06/01 Report--

This article mainly explains "what the three elements of the vue instruction refer to". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what the three elements of the vue instruction mean.

The three elements of the vue instruction are responsive, template engine, and rendering. Responsive means that when the data is updated or added, the page will respond and re-render the corresponding data; the template is essentially a string, and the template is eventually converted into js code.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What are the three elements of the vue instruction

Three elements in veu

Responsive: how does vue monitor changes in each attribute of data?

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

Rendering: how is the template of vue rendered to html? And rendering proc

How to implement vue is responsive

Object.defineProperty

Simulation

1) what is responsiveness

Vue listens as soon as the data property is modified

The data attribute is proxied to the 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. Properties owned by the target attribute

Basics

Var obj = {name: 'zhangsan', age: 25} console.log (obj.name); / / how to listen when getting attributes obj.age = 26; / / when assigning attributes

We use the defineProperty method to do the above:

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'; / / can be monitored

With defineProperty, we can listen for changes in data. 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) {/ / hit the closure. Create a new function to guarantee the independent scope of 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 to parse the template of vue

What is the template?

Render function

Render function and vdom

1) what is the template

Essence: string

Logical, such as v-if v-for, etc.

Very similar to html format, but very different

Eventually, it has to be converted to html to display

The template must eventually be converted to JS code because:

There is logic (v-if v-for), which can only be implemented in JS (Turing complete)

You must use JS to convert to html rendered pages.

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

Basic case

Submit {{item}}

The above is a template.

Thank you for your reading, the above is the content of "what are the three elements of the vue instruction". After the study of this article, I believe you have a deeper understanding of what the three elements of the vue instruction refer to, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.