MVVM双向数据绑定原理? || Vue底层原理 面试回答思路：
基础和核心 Object.defineProperty()作用？实现数据页面响应式+代码如何实现？+es5/vue2.x缺点+vue3.0/es6/Proxy替换? 主要靠内部来实现：如图框框名字+依次说出每个是干嘛的+他们之间的关系
object.deineProperty（）
缺点1：页面只使用了obj的其中a属性，当修改obj中的b属性时，也是执行。----无脑执行工作，性能低
缺点2: 不想暴露...忘了?--所以被vue3.x的proxy代替
代码实现#
// html
<body>
<span id="name"></span>
<body>
<script>
var data = {
name: ''
};
Object.defineProperty(data, 'name', {
get: function(){},
set: function(newValue){ // 页面响应处理
document.getElementById('name').innerText = newValue
data.name = value
},
enumerable: true,
configurable: true
});
// 页面DOM listener
document.getElementById('name').onchange = function(e) {
data.name = e.target.value;
}
</script>
----------------------------------------------------------
// Proxy代码实现
功能：不想完全对外暴露出去，想做一层在原对象操作前的拦截、检查、代理。
const myObj = {
_id: '我是myObj的ID',
name: 'mvvm',
age: 25
}
const myProxy = new Proxy(myObj, {
get(target, propKey) {
if (propKey === 'age') {
console.log('年龄很私密，禁止访问');
return '*';
}
return target[propKey];
},
set(target, propKey, value, receiver) {
if (propKey === '_id') {
console.log('id无权修改');
return;
}
target[propKey] = value + (receiver.time || '');
},
});
myProxy._id = 34;
// id无权修改
console.log(`age is: ${myProxy.age}`);
//年龄很私密，禁止访问
// age is: *
myProxy.name = 'my name is Proxy';
console.log(myProxy);
// { _id: '我是myObj的ID', name: 'my name is Proxy', age: 25}
const newObj = {
time: ` [${new Date()}]`,
};
// 原对象原型链赋值
Object.setPrototypeOf(myProxy, newObj);
myProxy.name = 'my name is newObj';
console.log(myProxy.name);
//my name is newObj [Thu Mar 19 2020 18:33:22 GMT+0800 (GMT+08:00)]
Observer是观察者Dep角色🎭：订阅收集和发布者。
Dep相关的用法的作用？
new Dep() ---实例化
dep.notity() ---- 当数据发生变化时调用，会去通知订阅的watcher进行更新
dep.depend() --------
dep.addSub(new Watcher()) ------
dep.subs.push(watcher) ------
Dep.target ===Watcher实例化对象： 通知订阅的watcher更新
Dep.prototype.notify = function notify () {}
// 依据MVVM双绑原理图👇，Dep和Watcher互相可以改变的。
Dep通知Watcher进行变化
Warcher通知Dep新增订阅者watcher是作为订阅者的角色2张图简单要记得
例子： new Vue()实例，data(){}有数据并应用在了dom上，computed:{return a*b}也应用在了vue模版上，
很常见：脑海中必须反应出的知识点#：
思路1: 监听数据变化->watcher->共3种、并判断出有哪几种(render watcher和computed watcher)->管理watcher->任务队列queenWatcher->func queueWatcher(){}?-->特点：重复的 watcher 知会被压入一次；在一个事件循环中 触发了多次的 watcher 只会被压入队列一次；—【内部真正参与者】
思路2:? 监听数据变化->Object.defineProperty() —是【基础核心】MVVM/vue原理
为啥要挂在原型上？
Dep.prototype.notify = function notify () {}
Watcher.prototype.update = function update () {}、
Vue2.x: Object.defineProperty()
Vue3.x: 被Polify替换
$nextTick、$nextTick 接口 是干嘛的？通过 nextTick 放入 callbacks 如何理解？Vue 中就是?flushSchedulerQueue？
flushSchedulerQueue：
将队列中所有的 watcher 按照 id 进行排序、原因是？---要保证 watcher 按照正确的顺序执行（参照初始/原本的依赖关系）
之后再遍历队列依次执行其中的 watcher
nextTick：xx->改成异步执行、目的：在一个事件循环（clickHandler）中让 flushSchedulerQueue 只执行一次，避免多次执行遍历、渲染，耗费性能
