Click me
复制代码(2)ViewModel 层
var app = new Vue({
el: ‘#app’,
data: { // 用于描述视图状态
message: ‘Hello Vue!’,
},
methods: { // 用于描述视图行为
showMessage(){
let vm = this;
alert(vm.message);
}
},
created(){
let vm = this;
// Ajax 获取 Model 层的数据
ajax({
url: ‘/your/server/data/api’,
success(res){
vm.message = res;
}
});
}
})复制代码
(3) Model 层
{
“url”: “/your/server/data/api”,
“res”: {
“success”: true,
“name”: “IoveC”,
“domain”: “www.cnblogs.com”
}
}
2.Vuex响应式数据/双向绑定原理
Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。其中,View变化更新Data,可以通过事件监听的方式来实现,所以 Vue数据双向绑定的工作主要是如何根据Data变化更新View。
简述:
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
深入理解:
监听器 Observer:对数据对象进行遍历,包括子属性对象的属性,利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化。
解析器 Compile:解析 Vue 模板指令,将模板中的变量都替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,调用更新函数进行数据更新。
订阅者 Watcher:Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ,主要的任务是订阅 Observer 中的属性值变化的消息,当收到属性值变化的消息时,触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新——这是一个典型的观察者模式
订阅器 Dep:订阅器采用 发布-订阅 设计模式,用来收集订阅者 Watcher,对监听器 Observer 和 订阅者 Watcher 进行统一管理。
Vue 双向数据绑定原理
数据的双向绑定是通过数据劫持结合发布订阅实现的。利用Object.defineproperty()方法将各个属性的getter和setter方法改写。当数据发生改变的时候,通知订阅者,并触发对应的回调函数,重新渲染数据。主要是实现以下几点:
(1) 数据观察者Observer,观察每个属性,当发生变化的时候,得到最新值并通知订阅者。
(2) 指令编译器Compile,对每个元素的节点进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
(3) 监听者Watcher,是数据观察者Observer和编译器Compile的桥梁。能订阅每个数据属性变化,当收到变化通知后,执行指令绑定的相应回调,从而更新视图。
vue会遍历data中的所有属性,利用Object.definedProperty这个方法给data中每一个属性增加监听者,即给每一个属性增加get方法和set方法,当数据发生变化时,会触发set方法,当获取数据时,会触发get方法;
数据劫持
Object.defineProperty()
控制一个对象属性的一些特有操作,比如读写权、是否可以枚举
通过get和set方法对data里的每个属性进行劫持
发布者-订阅者模式
监听器Observer 用来劫持并监听所有属性,如果有变动的,就通知订阅者。