vue响应式原理

将data下边所有的属性变成可观察的 - observable

Vue.js是一款MVVM框架。怎么做到更改数据时,驱动视图刷新的呢。

总体来说: Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

这个函数将Vue的数据设置成observable的。当_data数据发生改变的时候就会触发set,对订阅者进行回调(在这里是render)

js 复制代码
function observe(value, cb) {
    Object.keys(value).forEach((key) => 
        defineReactive(value, key, value[key] , cb)
    )
}

function defineReactive (obj, key, val, cb) {
    Object.defineProperty(obj, key, {
        //但是默认是不可枚举的(for in打印打印不出来),可:enumerable: true
        //默认不可以修改,可:wirtable:true     
        //默认不可以删除,可:configurable:true
        
        enumerable: true,
        configurable: true,
        get: ()=>{
            /*....依赖收集等....*/
            return val
        },
        set:newVal=> {
            val = newVal;
            cb(); /*订阅者收到消息的回调*/
        }
    })
}

class Vue {
    constructor(options) {
        this._data = options.data;
        observe(this._data, options.render)
    }
}

let app = new Vue({
    el: '#app',
    data: {
        text: 'text',
        text2: 'text2'
    },
    render(){
        console.log("render");
    }
})

这样也存在一个问题,我们需要对app._data.text才能触发数据的set。我们可以做一个代理,做到通过app.text直接设置就能触发set对视图进行重绘通。

代理

我们可以在Vue的构造函数constructor中为data执行一个代理

javascript 复制代码
_proxy.call(this, options.data);/*构造函数中*/

/*代理*/
function _proxy (data) {
    const that = this;
    Object.keys(data).forEach(key => {
        Object.defineProperty(that, key, {
            configurable: true,
            enumerable: true,
            get: function proxyGetter () {
                return that._data[key];
            },
            set: function proxySetter (val) {
                that._data[key] = val;
            }
        })
    });
}

总结

不考虑数组情况,一个简单的响应式原理就是这样。遍历data下所有属性,通过 defineProperty 劫持到数据的get和set方法,在set数据时,回调runder函数。实现视图刷新。同时需要 _proxy代理_data上的数据到app上。

javascript 复制代码
function observe(value, cb) {
  Object.keys(value).forEach((key) => 
      defineReactive(value, key, value[key] , cb)
  )
}
function defineReactive (obj, key, val, cb) {
    Object.defineProperty(obj, key, {
        //但是默认是不可枚举的(for in打印打印不出来),可:enumerable: true
        //默认不可以修改,可:wirtable:true     
        //默认不可以删除,可:configurable:true
        
        enumerable: true,
        configurable: true,
        get: ()=>{
            /*....依赖收集等....*/
            return val
        },
        set:newVal=> {
            val = newVal;
            cb(); /*订阅者收到消息的回调*/
        }
    })
}

function _proxy (data) {
  const that = this;
  Object.keys(data).forEach(key => {
      Object.defineProperty(that, key, {
          configurable: true,
          enumerable: true,
          get: function proxyGetter () {
              return that._data[key];
          },
          set: function proxySetter (val) {
              that._data[key] = val;
          }
      })
  });
}

class Vue {
    constructor(options) {
        _proxy.call(this, options.data);
        this._data = options.data;
        observe(this._data, options.render)
    }
}

let app = new Vue({
    el: '#app',
    data: {
        text: 'text',
        text2: 'text2'
    },
    render(){
        console.log("render");
    }
})

app.text = '22'
console.log(app)
相关推荐
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说5 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录9 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店9 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app