您现在的位置是:主页 > Web前端技术 > Web前端技术

vue2和vue3数据响应式原理分析及如何实现编程语言

IDCBT2021-12-24服务器技术人已围观

简介今天就跟大家聊聊有关vue2和vue3数据响应式原理分析及如何实现,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。 数

今天就跟大家聊聊有关vue2和vue3数据响应式原理分析及如何实现,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

数据响应式

    视图跟数据是自动更新的,数据更新的时候视图是自动的更新的

    追踪数据的变化,在读取数据或者设置数据的时候能够做一些劫持的一些操作

    vue2 使用defineProperty

    vue3 改用Proxy

    使用defineProperty如何追踪变化
    var obj = {}var age 
    Object.defineProperty(obj, 'age', {
        get: function() {
            consoel.log('get age ...')
            return age    },
        set: function(val) {
            console.log('set age ...')
            age = val    }})obj.age =100 //set age ...console.log(obj.age)//get age ...

    对象obj在取age属性的时候会调用数据劫持的get方法
    在给age属性赋值的时候会调用set方法

    那怎么使用Object.defineProperty实现一个数据响应式呢

    function defineReactive(data) {
      if (!data || Object.prototype.toString.call(data) !== '[object Object]')
        return;
      for (let key in data) {
        let val = data[key];
        Object.defineProperty(data, key, {
          enumerable: true, //可枚举
          configurable: true, //可配置
          get: function() {
            track(data, key);
            return val;
          },
          set: function() {
            trigger(val, key);
          },
        });
        if (typeof val === "object") {
          defineReactive(val);
        }
      }}function trigger(val, key) {
      console.log("sue set", val, key);}function track(val, key) {
      console.log("sue set", val, key);}const data = {
      name:'better',
      firends:['1','2']}defineReactive(data)console.log(data.name)console.log(data.firends[1])console.log(data.firends[0])console.log(Object.prototype.toString.call(data))

    标签:

    很赞哦! ()

本栏推荐