vue底层原理总结

一.数据劫持+发布订阅

1.双向数据绑定原理

数据响应式是指在改变数据的时候，页面视图也会同步更新，即当修改vue 实例data里的数据时，视图也就是页面会重新渲染，这就是vue的数据的响应式，数据驱动。

vue2的响应式原理是通过Object.defineProperty 结合 getter 与 setter 方法实现的监听和代理，进而来实现数据响应式.当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法

基本使用

const data = {};
let name = "小哲";

Object.defineProperty(data,'name',{
    get:function(){
        console.log('触发get')
        return name
    },
    set:function(newVal){
        console.log('触发set')
        name=newVal
    }
})

//测试
console.log(data.name)   // 触发get  小哲
data.name = '来福'         // 触发set

这样就是可以实现数据的获取和赋值的监听

2.vue监听data变化

监听器observe对数据进行了劫持监听，当监听到数据的变化的时候，就通过set方法把变化的数据传递给订阅器Dep，然后订阅器Dep将数据的变化通知给订阅者Watcher，watcher接收到数据的变化后就开始更新视图。无法监听新增属性/删除属性（所以vue提供了$set和$delete）

//vue可以监听到处理数组的方法
['pop', 'shift', 'unshift', 'sort', 'reverse', 'splice', 'push']

 二.虚拟dom

 值得注意的是使用虚拟dom并不会比直接改真实dom更快，反而因为中间加了虚拟dom这一步骤而让过程变慢，真正优化其性能的是因为虚拟dom的存在，可以将原先每次更改重新渲染页面的过程改为了多次更改完成后统一重新渲染，而diff算法的存在进一步优化了这一步骤，因为diff算法，将新旧dom中都存在的对象移动到对应位置，新dom有旧dom没的新建，旧dom有新dom没的删除。减少了加载相同对象的过程。

（在使用的时候要注意，尽量不要把key值设为index，因为在diff算法的过程中，一旦在开头加一个新对象，所有对象的key值都要变，diff算法有根据key值判断是否为同一对象的过程，这样一来就会加大工作量，让程序更慢。）