vue2中基本概念的理解

Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

简单来说，Vue关注的是将数据变成界面。

Vue的渐进式怎么理解？

Vue可以自底向上逐层的应用，当我们的应用比较简单时，只需引入一个或几个轻量小巧的核心库，当我们的功能和需求越来越多，应用越来越复杂时，我们就可以引入各种各样的Vue插件。

Vue的特点

1.采用组件化模式，提高代码复用率，让代码更好维护。

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

2.声明式编码，让编码人员无需直接操作DOM，以提高开发效率。

<div id="app">  <!-- html -->
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

3.Vue中数据和 DOM 被建立了关联，所有东西都是响应式的

在2中，只要我们修改app.message的值，那么修改后的值就会在页面上呈现，这就是Vue的响应式，我们不用和HTML交互而是直接操作Vue实例对象，那么DOM元素就会随之发生变化。

4.使用虚拟DOM（Virtual-DOM）+优秀的Diff算法，尽量复用DOM节点。

vue在拿到数据后，先将数据变成虚拟DOM，并且将新的虚拟DOM和旧的虚拟DOM进行diff比较，从而复用DOM节点，进行优化。

Vue中的MVVM模型：

因为Vue的设计受到了MVVM模型的启发，所以Vue的实例对象我们一般用vm（ViewModel 的缩写）来表示，所以这里也得说一下MVVM模型。

M（Model）：对应Vue中的数据

V（view）：对应Vue中的模板

VM（ViewModel）：对应Vue的实例对象

也就是说Vue的实例对象与Vue的模板进行了数据绑定，所以我们在修改数据的时候，模板中的内容也会随之而变化。

Vue中的数据代理

Object.defineProperty

在es6语法中的数据代理是通过该方式实现的。

Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false,
});

object1.property1 = 77;
// Throws an error in strict mode

console.log(object1.property1);
// Expected output: 42

语法：

Object.defineProperty(obj, prop, descriptor)

默认情况下，使用 Object.defineProperty() 添加的属性是不可写、不可枚举和不可配置的。

在descriptor中有很多配置项：

				// value:18,
				// enumerable:true, //控制属性是否可以枚举，默认值是false
				// writable:true, //控制属性是否可以被修改，默认值是false
				// configurable:true //控制属性是否可以被删除，默认值是false
	
				//当有人读取person的age属性时，get函数(getter)就会被调用
				get(){
					console.log('有人读取age属性了')
					return number
				},
	
				//当有人修改person的age属性时，set函数(setter)就会被调用
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}
	
			})

什么是数据代理？

数据代理就是通过一个对象代理对另一个对象中属性的操作（读/写）

		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
        </script>

上述代码中，我们可以通过对象obj2来对obj1中的x属性进行读写

Vue中的数据代理

当创建一个 Vue 实例时，Vue 会遍历传入的 data 选项中的所有属性，并使用 Object.defineProperty 将这些属性添加到 Vue 实例上，并设置 getter 和 setter 方法。这样一来，当您在 Vue 实例中访问这些属性时，实际上是通过 getter 方法来获取属性值；当您修改这些属性时，实际上是通过 setter 方法来更新属性值。这就是数据代理的核心机制。