vue响应式原理

在学习vue之前, 你最少应该掌握HTML、CSS和JS基础。
因为在之后项目中写的vue单文本组件中，它们分别会作为前台页面的骨架（结构），对应文件中的template模板；前台页面的样式布局，对应文件中的style样式；前台页面的交互逻辑，对应文件中的script标签。

在这里插入代码片
//vue 单文本组件
<template>
	<div>
		html部分
	</div>
</template>

<script>
export default {
   
	//js部分
}
</script>

<style>
	css部分
</style>

不了解HTML中常见的标签、CSS中元素布局与样式添加、JS中操作页面元素的方法和数据处理逻辑，vue代码也写不下去。因为vue其实就是他们三个部分的再封装而已。

vue2响应式原理

了解vue 最核心的知识 也就是它为什么能实现响应式，即用户点击页面按钮触发监听事件，页面上的数据能同步变化 。
首先，因为vue参考了MVVM模型 ，所以需要理解该模型 ,模型M(model)在vue中代表data中用户定义的数据变量，视图V（view）在vue中代表着页面dom元素，视图模型VM(viewModel)代表着vue实例。数据通过vm绑定到dom元素中并显示在页面中，页面上又通过vm监听数据变化来更新视图。

另外 vue实现响应式的原理底层其实使用了Object.defineProperty(),该方法包含三个参数 操作的对象target,对象上要添加的属性property,配置项（包含value、getter设置、setter设置等）

在这里插入代码片
//Object.defineProperty()
//定义一个源对象person
let person = {
   
	name:'张三',
	age:18,
}
//通过Object.defineProperty()去代理person对象上的操作
let p = Object.defineProperty(person,'name',{
   
	//初始值
	value:'张三',
	//是否可以删除
	configurable:true,
	//是否可枚举
	enumerable:true,
	//是否可编辑
	writable:true,
	//getter
	get(){
   
		console.