mvvm (Model-View-ViewModel) mode:
It consists of three parts: View (View), ViewModel (ViewModel), and Model (Model). The structure is as shown below.
Through these three parts, UI logic, presentation logic and state control, and separation of data and business logic are realized.
There are several benefits of using the MVVM pattern:
1. Low coupling. The View can be changed and modified independently of the Model. A ViewModel can be bound to different Views. When the View changes, the Model can remain unchanged, and when the Model changes, the View can also remain unchanged.
2. Reusability. You can put some view logic in the ViewModel, so that many Views can reuse this view logic.
3. Independent development. Developers can focus on business logic and data development (ViewModel). Designers can focus on the design of the interface (View).
4. Testability. The interface (View) can be tested against the ViewModel
The core of supporting mvvm in vue is the two-way data binding mechanism.
The two-way binding of vue data is realized by data hijacking combined with the publisher-subscriber mode, then if vue performs data hijacking, we can first take a look at the output of an object defined on the vue initialization data through the console what is it.
var vm = new Vue({
data: {
obj: {
a: 1
}
},
created: function () {
console.log(this.obj);
}
});
We can see that attribute a has two corresponding get and set methods. Why are there two more methods? Because vue implements data hijacking through Object.defineProperty().
What is Object.defineProperty()
The pattern of two-way data binding is that when the view changes, the data is updated, and when the data changes, the view is updated. Updating the data after the view changes can be achieved through event monitoring, this is not a problem, the problem is how to update the data to the view after the change.
The practice of referring to vue is to achieve it through set and get.
Let's take a look at the DOM that updates the view after the two data changes:
1. After changing the value of the prop property, it is immediately updated to the view through set
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test">测试</div>
<script>
var view = document.getElementById("test");
var data = {};
var i=0;
Object.defineProperty(data, "prop", {
set: function(newValue) {
//当data.b的值改变的时候更新＃test的视图
view.textContent=newValue;
},
get: function() {
}
});
setInterval(function(){
console.log(data)
i++;
data.prop = "data.prop的值更新了，我要更新视图"+i;
},1000);
</script>
</body>
</html>var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
set: function (value) {
name = value;
console.log('你取了一个书名叫做' + value);
},
get: function () {
return '《' + name + '》'
}
})
Book.name = 'vue权威指南'; // 你取了一个书名叫做vue权威指南
console.log(Book.name); // 《vue权威指南》We set the name property of the object Book through Object.defineProperty( ), and rewrite its get and set operations. As the name implies, get is a function triggered by reading the value of the name property, and set is triggered by setting the value of the name property. function, so when the statement Book.name = 'vue authoritative guide' is executed, the console will print "You took a book title called vue authoritative guide", and then when reading this property, it will output " "Vue Definitive Guide"", because we processed the value in the get function. If we execute the following statement at this time, what will the console output?
The above is a brief understanding of mvvm and two-way data binding in vue. The content is not deep and suitable for entry. If you don't like it, don't spray! If you like, you can like or follow, hee hee!