[TOC]
01、基本概念
先了解下MVVM
VUE是基于MVVM思想实现的，那什么是MVVM呢？
MVVM，是Model-View-ViewModel的缩写，是一种软件架构模式。其核心思想就是分离视图、数据、逻辑，VUE框架解决了数据**Model**到视图**View**的双向绑定，我们只关注业务逻辑**ViewModel**即可，极大的提高的编程效率。
- M：Model，数据模型，通常来自后端服务、数据库。
- V：View，视图，就是HTML页面，Dom。
- VM：ViewModel，视图模型，连接模型和视图，实现数据和视图的相互绑定。包含了视图状态、行为，如页面展示的内容（逻辑）、页面响应事件、数据获取更新等，都封装在 ViewModel 中。
VUE实现双向绑定的基本原理：
🔸Dom Listeners：通过对DOM元素（表单输入元素）的值变更监听，同步视图变化的数据到模型。
🔸Data Bindings：通过对模型数据拦截监听，监测数据变化进行更新视图。原理是基于基于ES5的特性Object.**defineProperty**(obj, propertyName, descriptor)，通过其get、set访问器来监听数据变更。这也是Vue不支持IE8的原因。
一个双向绑定的简单示例：
<div id="app">
<h2>{{message}}--{{message}}</h2>
</div>
<form action="#">
<input type="text" v-model="message">
</form>
<script>
//定义一个数据ViewModel，数据实际存储在$data中。
let app = {
$data: {}
}
//通过defineProperty的get、set拦截，检测数据变化》更新数据
Object.defineProperty(app, "message", {
get() { return this.$data.message; },
set(value) {
this.$data.message = value;
updateView(this); //更新视图
}
})
//保存模板、绑定了数据的表单元素
let template = document.querySelector("#app").innerHTML;
let vinputs = document.querySelectorAll("input[v-model]");
//更新视图
function updateView(data) {
const html = template.replace(/{{(\w+)}}/g, (match, $1) => {
return data[$1] || "";
})
document.querySelector("#app").innerHTML = html;
//更新表单元素的数据绑定
vinputs.forEach(el => {
el.value = data[el.getAttribute('v-model')];
});
}
//监听输入表单的值变更
vinputs.forEach(el => {
el.addEventListener("input", function (e) {
app[e.target.getAttribute('v-model')] = e.target.value;
});
});
//赋值
app.message = "hello";
</script>
虚拟DOM
直接操作DOM，DOM频繁变动会使得页面不停的布局、渲染，是很消耗性能的，虚拟DOM 就是来解决这个问题的。
虚拟DOM 就是先在内存中构建一个虚拟DOM结构（JS对象表示），批量操作完成后再一次性的更新到浏览器DOM树上。VUE中的虚拟DOM操作思路也是如此，只是为了更高效，实际要稍微复杂一点点。
- ❶ 用JS 对象模拟
虚拟DOM树。 - ❷ 比较DOM树差异（修改、删除、新增…）
-
VUE是什么？
中文官网：https://cn.vuejs.org Vue3版本手册 | Vue2版本手册
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，同他周边的生态共同构成了一个灵活的、渐进式的前端框架。 2013年底作为尤雨溪个人实验项目开始开发
- 2014年公开发布。
- 2016年10月发布2.0版本。
- 2020年发布3.0版本。
🔸核心特性：
若有收获，就点个赞吧
0 人点赞
