前言
Vue.js是一个提供MVVM数据双向绑定的库，其核心思想无非就是：
- 数据驱动
- 组件系统
数据驱动
Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用 jQuery 手工操作 DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。
本人在阅读vue.js源码的时候，也发现了vue的数据驱动无非就是利用的是ES5Object.defineProperty和存储器属性，个人觉得也是vue比较轻便和灵活的原因之一。
getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。
附：vue.js源码图在github上vue打包好的dist文件下面的vue.js可以找到（该图与核心技术无关，只是说明vue使用这个属性）
这个存储器属性也就是vue的核心，也是比jq好的地方之一，jq是通过绑定事件来进行操作dom，而vue和react是通过操作obj的属性来重新渲染dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
对入输入框input输入的内容都在output里面输出
-->
<input type="text" id="input">
<br>
<span id="output"></span>
</body>
<script>
// 绑定事件的做法
// 但是没有办法从控制台控制信息修改value
document.getElementById("input").addEventListener("keyup", function(e) {
document.getElementById("output").innerHTML = e.target.value
})
// 绑定虚拟dom的做法，就是通过改变一个obj的属性值
// 进而改变dom的值
var obj = {}
// @obj 可以是任何一个对象
// @"string" 动态绑定的属性值
// @{} 构造getter和setter
Object.defineProperty(obj, "string", {
get: function() {
console.log("getter")
},
set: function(val) {
document.getElementById("output").innerHTML = val
document.getElementById("input").value = val
}
})
</script>
</html>组件系统
组件系统，就是由于vue有比较优秀的组件系统，所以，现在很多项目也都采用了vue框架，如果你想要深入的了解组件系统，建议可以看看vue的官方文档
用官方一点的话来形容，组件化就是：实现了扩展HTML元素，封装可用的代码。页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护；页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。
简单的说，其实就是把页面进行分块处理，分成多个小块，每个小块就是一个组件，这样可以形成组件的复用，而且提高开发效率。
原文地址：https://www.cnblogs.com/homehtml/p/12038867.html