vue生命周期：
init：初始化props,methods,data,computed和watch;
1.this是如何直接访问data、props、methods里的属性和方法的？
注：为避免冲突和覆盖，data、props、methods里不能定义相同名字的属性，
优先级：props> methods> data（即如果一个 key 在 props 中有定义了那么就不能在 data 和 methods 中出现了；如果一个 key 在 data 中出现了那么就不能在 methods 中出现了）
源码中的initState函数：
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
由以上源码可以看到 initState 其实是很多选项初始化的汇总，包括：props、methods、data、computed 和 watch；
2.实现一个简易的响应式系统
Object.defineProperty：在对象上定义或修改属性
Object.observe:观察对象属性的更改
Vue通过Object.defineProperty的 getter/setter 对收集的依赖项进行监听,在属性被访问和修改时通知变化,进而更新视图数据；
即数据观测、依赖收集、视图更新。
observer的实现
让object的对象都用Object.defineProperty来定义，以达到获取或修改的时候能够调用属性里的get和set
class Observer {
constructor(value) {
this.value = value
this.walk(this.value)
}
walk (value) {
// 递归遍历value的属性
Object.keys(value).forEach((key) = > {
defineReactive(value, key, value[key])
})
}
}
// 将对象的每一个属性都添加get和set方法
function defineReactive(obj, key ,val) {
let childOb = observe(val)
Obeject.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
console.log('')
return val
},
// 对象改变时，新对象的每个属性也添加get和set方法
set(newVal) {
console.log('set')
val = newVal
childOb = observe(val)
}
})
}
// 属性类型观测判断
function observe (value) {
if (typeof value === 'object' && !Array.isArray(value)) {
value = new Observer(value);
return value;
}
}
以上代码可以看出，我们是通过console来判断是否执行get和set的，为了方便，我们使用消息订阅来实现通知变化
Dep的实现
收集属性值的变化，一旦set触发就更新视图
class Dep {
constructor(){
//订阅的信息
this.subs = [];
}
addSub(sub){
this.subs.push(sub);
}
removeSub (sub) {
remove(this.subs, sub);
}
//更新收集
depend(){
if (Dep.target) {
Dep.target.addDep(this);
}
}
//派发通知
notify(){
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
}
}
// 订阅完成后将target清掉
Dep.target = null;
Watcher的实现
状态发生改变时更新视图
const watcher = {
addDep:function (dep) {
dep.addSub(this);
},
update:function(){
html();
}
}
以上，我们完成来Observe、Dep、Watcher的简单实现，我们看到Observe和Dep里都调用里Watcher里的update，为了让其各司其职，我们将其改为Observe里一旦触发set就通知Dep并调用notify派发更新任务。
将以上实现进行简单修改和串联，以实现响应式，全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body></body>
<script>
class Observer {
constructor(value) {
this.value = value;
this.walk(this.value);
}
walk (value) {
// 递归遍历value的属性
Object.keys(value).forEach((key) => {
defineReactive(value, key, value[key]);
})
}
}
// 将对象的每一个属性都添加get和set方法
function defineReactive(obj, key ,val) {
// new一个Dep对象，后面要调用dep的方法
const dep = new Dep();
let val = observe(val);
Object.defineProperty(obj,key,{
enumerable: true,
configurable: true,
get: function () {
if(Dep.target){
//收集依赖
dep.depend()
}
return val;
},
set: function (newVal) {
if(newVal === val || (newVal !== newVal && val !== val)){
return ;
}
val = observe(newVal);
//发布改变
dep.notify();
}
});
}
// 属性类型观测判断
function observe (value) {
if (typeof value === 'object' && !Array.isArray(value)) {
value = new Observer(value);
return value;
}
}
class Dep {
constructor(){
//订阅的信息
this.subs = [];
}
addSub(sub){
this.subs.push(sub);
}
removeSub (sub) {
remove(this.subs, sub);
}
//此方法的作用等同于 this.subs.push(Watcher);
depend(){
if (Dep.target) {
Dep.target.addDep(this);
}
}
//这个方法就是发布通知了 告诉你 有改变啦
notify(){
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
}
}
// 订阅完成后将target清掉
Dep.target = null;
const watcher = {
addDep:function (dep) {
dep.addSub(this);
},
update:function(){
html();
}
}
let obj = {
a: '仔细看'
};
function html () {
document.querySelector('body').innerHTML = obj.a;
}
Dep.target = watcher;
html();//第一次渲染界面
Dep.target = null;
setTimeout(function() {
obj.a = '我变了';
html();
},5000)
</script>
注：主要修改都在defineReactive里，以上代码可直接运行。
