对MVVM的认识
深入了解：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
jquery 和 vue 的区别
- 数据和视图分离，解耦（开放封闭原则）
- 以数据驱动视图，只关心数据变化，DOM操作被封装
MVC
-
视图（View）：用户界面
-
控制器（Controller）：业务逻辑
-
模型（Model）：数据保存
MVC
-
View 传送指令到 Controller
-
Controller 完成业务逻辑后，要求 Model 改变状态
-
Model 将新的数据发送到 View，用户得到反馈
MVVM
-
视图（View）：用户界面
-
视图模型（ViewModel）：业务逻辑
-
模型（Model）：数据保存
MVVM
-
View 与 Model 不发生联系，都通过 ViewModel 传递
-
各部分之间的通信，都是双向的
-
采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel
Vue 三要素
响应式：Vue如何监听到data的每个属性变化
- 什么是响应式
修改data属性后，vue立刻监听到
data属性被代理到vm上 - Object.defineProperty
var vm = {}
var data = {
name: 'liuxin',
age: 22
}
for (let key in data){
Object.defineProperty(vm, key, {
get: function() {
return data[key]
},
set: function(newVal) {
data[key] = newVal
}
})
}
模板引擎：Vue的模板如何让被解析，指令如何处理
-
模板是什么
本质是字符串
有逻辑，如v-if v-for等
和html格式很像，但有很大区别
最终还是要转换成html展示
模板最终必须转换成js代码，有逻辑存在，要转换为html渲染页面，必须用js才能实现（图灵完备），因此模板最终要转换成一个js函数（render函数） -
render函数
模板中所有的信息都包含在了render函数中
this 即 vm
name 即 this.name 即 vm.name，即data中的name -
render函数与vdom
render函数返回vnode
updateComponent中实现了vdom的patch
页面首次渲染执行updateComponent
data中每次修改属性，执行updateComponent
渲染： Vue的模板如何被渲染成HTML以及渲染过程
Vue 的整个实现流程
解析模板成render函数
- with的用法
- 模板中的所有信息被render函数包含
- 模板中用到的data中的属性，都变成了js变量
- 模板中的v-model v-for v-on 都变成了js逻辑
- render函数返回vnode
响应式开始监听
- Object.defineProperty
- 将data的属性代理到vm上
首次渲染，显示页面，且绑定依赖
- 初次渲染，执行updateComponent，执行vm._render()
- 执行render函数，会访问到vm.list和vm.title
- 会被响应式的get方法监听到
- 执行updateComponent，会走到vdom的patch方法
- patch将vnode渲染成DOM，初次渲染完成
data属性变化，触发re-render
- 修改属性，被响应式的set监听到
- set中执行updateComponent
- updateComponent重新执行vm.render()
- 生成的vnode 和 preVnode，通过patch进行对比
- 渲染到html中
vue双向绑定原理
采用数据劫持结合观察者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
- 第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 - 第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
- 第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。 - 第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
vue设计模式
观察者模式
1、松耦合的代码；
2、一对多的关系；
3、主体状态变化时，所有依赖被通知；
4、主体和观察者互不知晓。
基本上，满足上面四点的，就可以算是观察者模式了
//发布者
let pub = {
notice(){
dep.update();
}
}
//订阅者
let sub1 = {
update(){
console.log('sub1 update')
}
}
let sub2 = {
update(){
console.log('sub2 update')
}
}
let sub3 = {
update(){
console.log('sub3 update')
}
}
//主体
function Dep(_sub){
this.update = ()=>{
for(let i=0; i<_sub.length; i++){
_sub[i].update();
}
}
}
let dep = new Dep([sub1,sub2,sub3]);
//发布消息
pub.notice();
// > sub1 update
// > sub2 update
// > sub3 update
dep观察到pub发生了更新，就会循环依赖列表，依次触发各个依赖事件
vue生命周期
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
-
创建前/后： 在beforeCreated阶段，vue实例的挂载元素
$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。 -
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
-
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
-
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
网友评论