1.svelte的优势，没有劫持、没有虚拟DOM等，纯编译响应式，它可能是未来的趋势（是编译器，已经不是框架了）
    2.vue2，关于响应式的原理大概如下：

    1. // 单一职责，解耦
    2. export class Vue {
    3.     constructor(options = {}) {
    4.         this.$options = options
    5.         this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
    6.         this.$data = options.data
    7.         this.$methods = options.methods
    9.         this.proxy(this.$data)
    11.         // Observe 拦截this.$data
    12.         new Observer(this.$data)
    14.         // 编译html
    15.         new Compiler(this)
    16.     }
    18.     // 代理，方便使用，直接this.name
    19.     proxy(data) {
    20.         Object.keys(data).forEach(key => {
    21.             Object.defineProperty(this, key, {
    22.                 enumerable: true,
    23.                 configurable: true,
    24.                 get() {
    25.                     return data[key]
    26.                 },
    27.                 set(newValue) {
    28.                     if(data[key] === newValue || (Number.isNaN(data[key] && Number.isNaN(newValue)))) {
    29.                         return
    30.                     }
    31.                     data[key] = newValue;
    32.                 }
    33.             })
    34.         })
    35.     }
    36. }
    37. // 发布订阅模式
    38. class Dep {
    39.     constructor() {
    40.         this.deps = new Set()
    41.     }
    42.     // 收集副作用代码
    43.     add() {
    44.         if (dep && dep.update) {
    45.             this.deps.add(dep);
    46.         }
    47.     }
    48.     notify() {
    49.         // udpate就是执行副作用 Watcher 
    50.         this.deps.forEach(dep => dep.udpate())
    51.     }
    52. }
    53. // watcher会在编译的时候触发,编译html中的变量->触发当前变量的getter->封装一个watcher
    54. class Watcher {
    55.     constructor(vm, key, cb) {
    56.         // vm是vue实例
    57.         this.vm = vm;
    58.         this.key = key;
    59.         this.cb = cb;
    60.         Dep.target = this;
    61.         this.__old = vm[key] // 存下初始值，触发getter
    62.         // 防止我们在别处触发getter，仅在编译的时候
    63.         Dep.target = null;
    64.     }
    65.     update() {
    66.         let newValue = this.vm[this.key]
    67.         if (this.__old === newValue) {
    68.             return;
    69.         }
    70.         this.cb(newValue); // 操作DOM的函数
    71.     }
    72. }
    73. class Observer {
    74.     constructor(data) {
    75.         this.walk(data)
    76.     }
    77.     walk(data) {
    78.         if(!data || typeof data !== 'object') return
    79.         Object.keys(data).forEach(key => this.defineReactive(data, key, data[key]))
    80.     }
    81.     // { obj:  }
    82.     defineReactive(obj, key, value) {
    83.         let that = this;
    84.         let dep = new Dep();
    85.         this.walk(value);// 这个放在后面可以吗？
    86.         Object.defineProperty(obj, key, {
    87.             configurable: true,
    88.             enumerable: true,
    89.             get() {
    90.                 Dep.target && dep.add(Dep.target)
    91.                 return value;
    92.             },
    93.             set(newValue) {
    94.                 value = newValue;
    95.                 // 赋值的这个也可能是一个对象
    96.                 that.walk(newValue);
    97.                 dep.notify()
    98.             }
    99.         })
    100.     }
    101. }
    102. class Compiler {
    103.     constructor(vm) {
    104.         this.el = vm.$el
    105.         this.vm = vm
    106.         this.methods = vm.$methods
    107.         this.compiler(vm.$el)
    108.     }
    109.     compiler(el) {
    110.         let childNodes = el.childNodes
    111.         Array.from(childNodes).forEach(node => {
    112.             if (this.isTextNode(node)) {
    113.                 this.compileText(node)
    114.             } else if (this.isElementNode(node)) {
    115.                 this.compileElement(node)
    116.             }
    118.              // 递归编译子节点
    119.             if (node.childNodes && node.childNodes.length) {
    120.                 this.compiler(node)
    121.             }
    122.         })
    124.     }
    125.     compileElement(node) {
    126.         if(node.attributes.length) {
    127.             Array.from(node.attributes).forEach(attr => {
    128.                 let attrName = attr.name
    129.                 // v-on:click   and   v-model
    130.                 if(this.isDirective(attrName)) {
    131.                     attrName = attrName.indexOf(':') > -1 ? attrName.substr(5) : attrName.substr(2)
    132.                     let key = attr.value
    133.                     this.update(node, key, attrName, this.vm[key])
    134.                 }
    135.             })
    136.         }
    137.     }
    138.     udpate(node, key, attrName, value) {
    139.         if (attrName === 'text') {
    140.             node.textContent = value
    141.             // 如果加上虚拟DOM diff算法的话，此处的回调函数就不应该直接操作DOM了，应该传入新老树进行对比，最后再渲染
    142.             new Watcher(this.vm, key, val => {
    143.                 node.textContent = val
    144.             })
    145.         } else if (attrName === 'model') {
    146.             node.value = value
    147.             new Watcher(this.vm, key, val => {
    148.                 node.textContent = val
    149.             })
    150.             node.addEventListenner('input', () => {
    151.                 this.vm[key] = node.value
    152.             })
    153.         } else if (attrName === 'click') {
    154.             node.addEventListenner('click', this.methods[key].bind(this.vm))
    155.         }
    156.     }
    157.     isDirective(str) {
    158.         return str.startsWith('v-')
    159.     }
    160.     // 元素节点 <div v-model="msg"></div>
    161.     isElementNode(node) { 
    162.         return node.nodeType === 1
    163.     }
    164.     // {{ count}} 文本节点
    165.     compileText(node) {
    166.         let reg = /\{\{(.+?)\}\}/
    167.         let value = node.textContent
    168.         if(reg.test(value)) {
    169.             let key = RegExp.$1.trim()
    170.             node.textContent = value.replace(reg, thiis.vm[key])
    171.             new Watcher(this.vm, key, val => {
    172.                 node.textContent = val
    173.             })
    174.         }
    175.     }
    176.     isTextNode(node) {
    177.         return node.nodeType === 3
    178.     }
    180.     // 缺少调度啊？？？
    181.     // 没有考虑作用域？？？？？
    182. }

    3.vue3.0相关响应式如下：
    最大的优势： 考虑到内存的问题，不用每次都像2.0那样，new Dep()

    // vue3.0
function isObject(data) {
    return data && typeof data === 'object'
}
export function reactive(data) {
    if(!isObject(data)) return
    return new Proxy(data, {
        get(target, key, receiver) {
            const ret = Reflect.get(target, key, receiver);
            // 依赖收集
            track(target, key)
            return isObject(ret) ? reactive(ret) : ret
        },
        set(target, key, value, receiver) {
            return Reflect.set(target, key, value, receiver);
        },
        deleteProperty(target, key, receiver) {
            const ret = Reflect.deleteProperty(target, keu, receiver)
            // todo 通知
            return ret
        }
    })
}
// proxy无法监听基本类型, 采用一个对象包起来
export function ref(target) {
    let value = target
    const obj = {
        get value() {
            track(obj, 'value')
            return value
        },
        set value(newValue) {
            if (value === newValue) return
            value = newValue
            trigger(obj, 'value')
        }
    }
    return obj
}