Vue核心 MVVM模型

MVVM模型

MVVM模型

• M：模型Model，data中的数据
• V：视图View，模板代码
• VM：视图模型ViewModel，Vue实例，用来连接Model和View，是Model和View之间的桥梁

观察结果：

1. data中的所有属性，最后都出现在了vm中。
2. vm中的所有属性及Vue原型中的所有的属性，在Vue模板中都可以直接使用。

Vue中的数据代理

Object.defineProperty方法代码示例：

let number = 18
		let person = {
			name:'张三',
			sex:'男',
		}

		Object.defineProperty(person,'age',{
			// value:18,
			// enumerable:true, //控制属性是否可以枚举，默认值是false
			// writable:true, //控制属性是否可以被修改，默认值是false
			// configurable:true //控制属性是否可以被删除，默认值是false

			//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
			get(){
				console.log('有人读取age属性了')
				return number
			},

			//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
			set(value){
				console.log('有人修改了age属性，且值是',value)
				number = value
			}

		})

		// console.log(Object.keys(person))

		console.log(person)

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

1. Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）。

2. Vue中数据代理的优点：更加方便的操作data中的数据。

3. 基本原理

   • 通过Object.defineProperty()把data对象中的所有属性添加到vm上。
   • Vue为每一个添加到vm上的属性，都指定一个getter和setter。
   • 在getter和setter内部去操作（读/写）data中对应的属性。
   

4. 具体实现：

   • 数据劫持：通过Object.defineProperty()方法来劫持对象的属性，将属性的读取和修改转化为对应的get和set方法。这样一来，当属性被读取或修改时，就能触发对应的get和set方法。
   • 依赖追踪：Vue会维护一个依赖图谱，将组件的渲染函数与数据属性之间建立起依赖关系。当渲染函数执行时，会触发对应的数据属性的get方法，将该渲染函数加入到该属性的依赖列表中。当数据属性被修改时，会触发对应的依赖列表中的所有渲染函数重新执行，从而更新组件的视图。

Vue中的事件处理

事件的基本用法

1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名。
2. 事件的回调需要配置在methods对象中，最终会在vm上。
3. methods中配置的函数，不要用箭头函数，否则this指向的就不是vm了。
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。
5. @click="demo"和@click="demo($event)"效果一致，但后者可以传参。

事件修饰符

1. prevent：阻止默认事件（常用）。
2. stop：阻止事件冒泡（常用）。
3. once：事件只触发一次（常用）。
4. capture：使用事件的捕获模式。
5. self：只有event.target是当前操作元素时才触发事件。
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。