vue3数据响应式 diff算法 MVVM

命令式编程(js)、声明式编程(vue)

$mount挂载做了什么事？

本质上和el没什么区别。

获得渲染之后的dom，追加到宿主元素

$option是什么：用来获取data外面的数据和方法

你对数据响应式的理解?

先说概念：是什么

数据响应式其实是一种机制，是侦测JS数据发生变化的一种机制。

为什么需要数据响应式

因为MVVM框架都需要数据驱动，要是不能检测数据变化，怎么驱动更新呢，所以我们需要数据响应式。

怎么实现，以及变化原因

这里又涉及到Vue2 及 Vue3 数据响应式的对比

Vue 对于数据响应式的升级主要在变化侦测部分：

Vue2 中的变化侦测实现对 Object 及 Array 分别进行了不同的处理，Objcet 使用了 
Object.defineProperty API ，Array 使用了拦截器对 Array 原型上的能够改变数据的方法进行拦截。虽然也实现了数据的变化侦测，但存在很多局限 ，比如对象新增属性无法被侦测，以及通过数组下边修改数组内容，也因此在 Vue2 中经常会使用到 $set 这个方法对数据修改，以保证依赖更新。

Vue3 中使用了 es6 的 Proxy API 对数据代理，没有像 Vue2 中对原数据进行修改，只是加了代理包装，因此首先性能上会有所改善。其次解决了 Vue2 中变化侦测的局限性，可以不使用 $set 新增的对象属性及通过下标修改数组都能被侦测到

vue3

 

 

 

 

 

 

深入了解MVVM(软件体系）

 

 

 

 

 

 

Object.defineProperty拦截数据

赋值可修改，不赋值可获取

 

删除 delete的使用：配置configurable默认false为true

 

 可枚举属性：enumerable

 开课吧第四期03高阶

如何利用响应式实现数据驱动？（源码）

源码中：observe

对原始对象遍历，拦截所有属性

function observe（obj）{
    遍历obj的所有key，定义拦截
    Object.keys(obj).forEach(key => defineReactive(obj,key,obj[key]) )
}

定义响应式
function defineReactive(obj,key,val){
    Object.defineProperty(obj,key,{
        get(){    获取某个key的时候，返回对象真正的值
            console.log('get',key)
            return val
        },
        set(newVal){
            if(newval !== val){
                console.log('set',key)
                val = newVal
                ...更新渲染页面
            }
        }
    })
}

Object.keys()   

返回给定对象的所有可枚举(一个一个列举出来)属性的字符串数组。

var anObj = { 100: 'a', b: 1, a: 2 , 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); 
输出：["2", "7", "100", "b", "a"]

什么是可枚举属性？

内部 “可枚举” 标志设置为 true 的属性

js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等。

可枚举的属性可以通过for...in循环进行遍历（除非该属性名是一个Symbol ( ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。) ）

如何利用虚拟Dom和diff实现定点更新？