精华内容
下载资源
问答
  • 2022-06-07 20:49:59

    前言

    Vue响应式原理是Vue最独特的特性之一,当数据模型进行修改时,视图就会进行更新,这使得状态管理简单直接,但是其底层的细节还是需要我们深入学习理解,这样遇到一些问题我们才能快速进行定位,并解决;下面我将带大家由浅入深,逐步理解Vue的响应式原理;
    在这里插入图片描述

    如何监测数据的变化

    要想准确响应数据的变化,首先需要精确及时的监测数据的变化,Vue检测数据的变化核心还是通过Object.defineProperty();下面通过实例为大家详细阐述Vue检测数据变化的过程,代码示例如下:

    <script type="text/javascript" >
    			let data = {
    				name:'xizhutao',
    				address:'安徽',
    			}
    			//创建一个监视的实例对象,用于监视data中属性的变化
    			const obs = new Observer(data)		
    			console.log(obs)	
    			//准备一个vm实例对象
    			let vm = {}
    			vm._data = data = obs
    			function Observer(obj){
    				//汇总对象中所有的属性形成一个数组
    				const keys = Object.keys(obj)
    				//遍历
    				keys.forEach((k)=>{
    					Object.defineProperty(this,k,{
    						get(){
    							return obj[k]
    						},
    						set(val){
    							console.log(`${k}被改了,我要去解析模板,生成虚拟DOM.....我要开始忙了`)
    							obj[k] = val
    						}
    					})
    				})
    			}
    		</script>
    

    以上代码检测数据变化的思路如下:
    一、封装一个Observer构造函数,接收一个data数据对象,通过Object.keys()方法,将接收到的数据对象中的属性存放到一个数组中,然后调用forEach()方法对数组进行遍历,用Object.defineProperty()给this即Observer实例对象添加数组中的每一项属性;
    二、通过get、set方法监测数据的操作,一旦Observer构造函数的实例对象上的属性被访问,get函数就会被调用,返回data数据中的属性值,同样的Observer构造函数的实例对象上的属性被修改了,data数据中的属性值也实现了修改;这就是Vue监测数据变化的原理;

    注意事项

    对象

    Vue不能监测对象的Property的添加和删除,在监测数据变化原理中讲到,在Vue初始化实例对象时,会将data对象中的属性存到数组中进行遍历,然后调用Object.defineProperty()给属性添加get , set方法监视data对象中属性的变化,因此如果我们在初始化实例对象后,给Vue实例添加属性,并不会给添加的属性添加对应的get、set方法,导致添加的属性并不是响应式的;如果你还不理解,请看以下示例代码:

    var vm = new Vue({
      data:{
        a:11
      }
    })
    // vm.a 是响应式的
    vm.b = 22
    // vm.b 是非响应式的
    

    以上代码中的a属性在初始化实例对象时就有,因此会生成相对应的get、set方法,然而b属性是在初始化vm实例后添加的属性,因此并没有生成相对于的set和get方法;导致属性b并不是响应式的;
    针对以上问题我们可以使用Vue.set(object, propertyName, value)或者vm.$set ( target,propertyName/index,value)方法解决,但是此方法只能给嵌套的对象添加属性,不能给vm或vm的根数据对象添加响应式属性;
    代码示例如下:

    //someObject为嵌套在data数据对象内的一个对象
    Vue.set(vm.someObject, 'b', 22)
    vm.$set(this.someObject,'b',22)
    

    ⚠注意:set方法不能给vm或vm的根数据对象设置属性,只能给跟数据对象中嵌套的对象设置属性❗❗❗

    数组

    Vue不能监测以下数组的变动:1、通过索引号修改数组的对应值,修改后的值不是响应式的;2.通过length修改数组长度时,数据不是响应式的;示例如下:

    var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的
    

    为了解决以上通过索引添加的数据不是响应式的,可以使用以下方法解决:
    1、Vue.set(vm.items, indexOfItem, newValue)
    2、vm.$set(vm.items, indexOfItem, newValue)
    3、vm.items.splice(indexOfItem, 1, newValue)
    为了解决通过length属性改变数组长度也是响应式的,可以使用以下方法:
    vm.items.splice(newLength)
    代码示例如下:

    var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    Vue.set(vm.items , 0 , 'aa') // 响应性的
    vm.$set(vm.items , 0 , 'aa') // 响应性的
    vm.items.splice(0 , 1 , 'aa')//响应性的
    //通过length
    vm.items.splice(2)//响应性的
    

    更详细的信息请查看Vue.js官网:深入理解响应式原理

    写在最后

    🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞

    更多相关内容
  • Vue响应式原理

    千次阅读 2022-03-24 23:27:47
    响应式原理:采用数据劫持结合发布-订阅模式的方式,通过Object-defineProperty()来劫持data里面各个属性的setter和getter,在数据变动的时候,发布消息给订阅者,触发相应的监听回调。 Object.defineProperty()可以...

    Vue响应式原理

    Vue 最独特的特性之一,是其非侵入性(不用调用Vue的api来实现数据更新)的响应式系统。

    响应式:即数据改变,对应的视图也会改变。

    Vue2

    响应式原理:采用数据劫持结合发布-订阅者模式的方式,通过Object.defineProperty()来劫持data里面各个属性的setter和getter,在数据变动的时候,触发set方法,检测到数据发生变化,会发布消息给订阅者,触发相应的监听回调,生成新的虚拟DOM树,视图更新。

    Object.defineProperty()可以直接在一个对象上定义一个新的属性,或者修改一个对象的现有属性,并返回此对象。还可以设置一些额外隐藏的属性(例如是否可写writeable,是否可以枚举enumerate)。

    在这里插入图片描述
    当页面渲染时(render),触发data里面的数据(getter),watcher(观察者)会把接触过的数据记录为依赖。每个数据都有getter和setter,当你修改这个数据的时候,依赖的setter触发,然后通知到watcher,从而使关联这个数据的组件重新渲染。

    实现一个Object.defineProperty()功能。

    var obj={}
    //defineReactive就是响应式
    function defineReactive(data,key,val){   //data数据对象,key键(即属性),val值(用来周转,set里面修改值之后,设置val为新的值,get才能获取到新的val)
        Object.defineProperty(data,key,{   
            //getter
            get(){       //里面的get()和set()与外面的defineReactive构成了一个闭包环境(因为要内存函数使用到val,所以要用闭包)
                console.log('访问对象的'+key+'属性')
                return val;  //要有返回值,才能获取到这个属性的值
            },
            //setter
            set(newValue){
                console.log('改变对象的'+key+'属性',newValue)
                if(val==newValue){
                    return ;     //如果传入的参数(属性要改为的值)和原来的值相等,就不做任何处理
                }
                val=newValue  //如果传入的参数是一个新的值,就改变这个属性的值
            }
        })
    }
    
    defineReactive(obj,'a',10)
    console.log(obj.a)    //访问对象的属性  /n   10
    obj.a=15
    obj.a++   //先访问到val,再改变
    console.log(obj.a)  //改变对象的属性   /n  访问对象的属性  /n  
    

    在这里插入图片描述

     defineReactive(obj,'a',10)
     defineReactive(obj,'b',20)
     console.log(obj.a)
     console.log(obj.b)
     obj.b=30
     console.log(obj.b)
    

    在这里插入图片描述
    例:使用Object.defineProperty()实现一个响应式功能.

    <div id="app">
     <input type="text" id="a">
     <span id="b"></span>
    </div>
    
    <script type="text/javascript">
       var data = {   //模拟vue里面的data属性
           a:1,
           b:2
       };
       var vm={}   //模拟vue实例
    
       function defineReactive(vm,key,val){   //defineReactive就是响应式
       //实现数据双向绑定的方法————数据劫持:当访问或者设置vm中的某一个成员时,做一些干预操作。
          Object.defineProperty(vm, key, { //参数1:vue实例,参数2:要劫持的属性,参数3:对象(用来获取和设置对象的属性值)
              //getter
              get: function() {
                 console.log('get vm '+key+' val:'+ val);
                 document.getElementById('a').value = val;
                 document.getElementById('b').innerHTML = val;
                 return val;
              },
              //setter
              set: function(newVal) {
                 if(val===newVal){
                     return ;
                 }
                 val = newVal;
                 console.log('set vm '+key+' val:'+ val);
                 document.getElementById('a').value = val;
                 document.getElementById('b').innerHTML = val;
              }
          });
       }        
       document.addEventListener('keyup', function(e) {//触发事件的时机,从而执行相应的操作
           vm.a=e.target.value
       });
       Object.keys(data).forEach(k=>{   //data里面有多个属性时,遍历data的各个属性
          defineReactive(vm,k,data[k])
       })
    </script>
    

    Vue3

    Vue2存在的问题:

    • Vue2在使用Object.defineProperty()之前,是利用for循环,一个一个遍历data里面的属性,让每一个属性实现响应式,性能比较差。
    • Vue2对于数组数据的响应式(例如利用索引设置数组的值、修改数组长度)是有局限性的(直接通过下标修改数组, 界面不会自动更新 ),但是Vue3就可以。

    响应式原理:Vue3通过ES6的代理对象Proxy进行响应式,代理data对象里面所有的属性及数组,访问属性时触发get(),改变属性值时触发set(),然后发布消息给订阅者,重新渲染页面。

    实现Proxy的功能。

    <div id="app">
    </div>
    <script>
        let data={
            msg:'Hello',
            count:0,
            arr:[1,2,3,4]
        }
        //模拟vue实例
        const vm=new Proxy(data,{  //用Proxy,不用循环就可以遍历到data对象的所有属性,数组也可以更改数值,改变数组长度
            //执行代理行为的函数
            //当访问vm的成员会执行
            get(target,key){   //target就相当于是data对象,key是对象的属性
                console.log('get key:',key,target[key])
                document.querySelector('#app').textContent=target[key]
                return target[key]
            },
            //当设置vm的成员会执行
            set(target,key,newValue){
                console.log('set key',key,newValue)
                if(target[key]===newValue){
                    return;
                }
                target[key]=newValue
                document.querySelector('#app').textContent=target[key]
            }
        })
    </script>
    
    展开全文
  • 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图。在面试中是经常考查的知识点,也是面试加分项。 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解...
  • vue响应式原理

    千次阅读 2021-09-07 15:02:25
    vue响应式原理 vue响应式也叫作数据双向绑定,大致原理阐述: ​ 首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式,这样我们就可以在数据被修改时在setter方法设置监视...

    vue响应式原理
    vue响应式也叫作数据双向绑定,大致原理阐述:

    ​ 首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式,这样我们就可以在数据被修改时在setter方法设置监视修改页面信息,也就是说每当数据被修改,就会触发对应的set方法,然后我们可以在set方法中去调用操作dom的方法。

    ​ 此外,如果页面有input用v-model绑定数据,我们需要在这种绑定了data的input元素上添加监听,添加input事件监听,每当input事件被触发时,就修改对应的data。

    vue实现数据响应式,是通过数据劫持侦测数据变化,发布订阅模式进行依赖收集与视图更新,换句话说是Observe,Watcher以及Compile三者相互配合,

    • Observe实现数据劫持,递归给对象属性,绑定setter和getter函数,属性改变时,通知订阅者
    • Compile解析模板,把模板中变量换成数据,绑定更新函数,添加订阅者,收到通知就执行更新函数
    • Watcher作为Observe和Compile中间的桥梁,订阅Observe属性变化的消息,触发Compile更新函数

     1.什么是响应式

    当price 发生变化的时候,Vue就知道自己需要做三件事情:

    • 更新页面上price的值

    • 计算表达式 price*quantity 的值,更新页面

    • 调用totalPriceWithTax 函数,更新页面

    数据发生变化后,会重新对页面渲染,这就是Vue响应式,那么这一切是怎么做到的呢?

    想完成这个过程,我们需要:

    • 侦测数据的变化

    • 收集视图依赖了哪些数据

    • 数据变化时,自动“通知”需要更新的视图部分,并进行更新

    对应专业俗语分别是:

    • 数据劫持 / 数据代理

    • 依赖收集

    • 发布订阅模式

    如何侦测数据的变化 

    ​​​​​​​首先有个问题,在Javascript中,如何侦测一个对象的变化?其实有两种办法可以侦测到变化:使用 Object.defineProperty和ES6的 Proxy,这就是进行数据劫持或数据代理。

    方法1.Object.defineProperty

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

    方法2.Proxy

    Proxy 是 JavaScript 2015 的一个新特性。 Proxy 的代理是针对整个对象的,而不是对象的某个属性,因此不同于 Object.defineProperty 的必须遍历对象每个属性, Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化,当然对于深层结构,递归还是需要进行的。此外 Proxy支持代理数组的变化。

    为什么要收集依赖

    我们之所以要观察数据,其目的在于当数据的属性发生变化时,可以通知那些曾经使用了该数据的地方。比如第一例子中,模板中使用了price 数据,当它发生变化时,要向使用了它的地方发送通知。 

    订阅者 Dep

    1.为什么引入 Dep

    收集依赖需要为依赖找一个存储依赖的地方,为此我们创建了Dep,它用来收集依赖、删除依赖和向依赖发送消息等。

    于是我们先来实现一个订阅者 Dep 类,用于解耦属性的依赖收集和派发更新操作,说得具体点,它的主要作用是用来存放 Watcher 观察者对象。我们可以把Watcher理解成一个中介的角色,数据发生变化时通知它,然后它再通知其他地方。

    观察者 Watcher

    1.为什么引入Watcher

    Vue 中定义一个 Watcher 类来表示观察订阅依赖。至于为啥引入Watcher,《深入浅出vue.js》给出了很好的解释:

    当属性发生变化后,我们要通知用到数据的地方,而使用这个数据的地方有很多,而且类型还不一样,既有可能是模板,也有可能是用户写的一个watch,这时需要抽象出一个能集中处理这些情况的类。然后,我们在依赖收集阶段只收集这个封装好的类的实例进来,通知也只通知它一个,再由它负责通知其他地方。

    依赖收集的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中,形成如下所示的这样一个关系(图参考《剖析 Vue.js 内部运行机制》)。

    640?wx_fmt=other

     收集依赖

    所谓的依赖,其实就是Watcher。至于如何收集依赖,总结起来就一句话,在getter中收集依赖,在setter中触发依赖。先收集依赖,即把用到该数据的地方收集起来,然后等属性发生变化时,把之前收集好的依赖循环触发一遍就行了。

    具体来说,当外界通过Watcher读取数据时,便会触发getter从而将Watcher添加到依赖中,哪个Watcher触发了getter,就把哪个Watcher收集到Dep中。当数据发生变化时,会循环依赖列表,把所有的Watcher都通知一遍。

    最后我们对 defineReactive 函数进行改造,在自定义函数中添加依赖收集和派发更新相关的代码,实现了一个简易的数据响应式。


    • 总结: 

       

      640?wx_fmt=other

    • 在 newVue() 后, Vue 会调用 _init 函数进行初始化,也就是init 过程,在 这个过程Data通过Observer转换成了getter/setter的形式,来对数据追踪变化,当被设置的对象被读取的时候会执行 getter 函数,而在当被赋值的时候会执行 setter函数。

    • 当render function 执行的时候,因为会读取所需对象的值,所以会触发getter函数从而将Watcher添加到依赖中进行依赖收集。

    • 在修改对象的值的时候,会触发对应的 setter, setter通知之前依赖收集得到的 Dep 中的每一个 Watcher,告诉它们自己的值改变了,需要重新渲染视图。这时候这些 Watcher就会开始调用 update 来更新视图。

    展开全文
  • Vue响应式原理详解

    2020-11-29 18:10:19
    Vue 嘴显著的特性之一便是响应式系统(reactivity system),模型层(model)只是普通JavaScript对象,修改它则更新视图(view)。 Vue 响应式系统的底层细节 如何追踪变化 把一个普通的JavaScript对象传给Vue实例的...
  • 理解VUE响应式原理

    2021-11-22 10:05:48
    1、响应式原理基础 响应式原理基础是基于Object.defineProperty(obj, prop, descriptor),descriptor里面可以定义get和set方法,可以在获取属性值事触发get方法(可以收集依赖),设置属性值时触发set方法(更新...

    1、响应式原理基础

            响应式基本原理是基于Object.defineProperty(obj, prop, descriptor), descriptor里面可以定义get和set方法,可以在获取属性值事触发get方法(可以收集依赖),设置属性值时触发set方法(更新依赖)。

            扩展:上面是vue2.0的响应式基本原理,vue3.0的基本原理是Proxy,可以监听属性的get和set方法,监听属性的添加和删除等等,比Object.defineProperty能力更强,但是不兼容IE11。

    2、核心对象:Dep与Watcher

            Dep: vue在data里申明的每一个属性都会生成一个Dep的实例对象,Dep.subs存储着当该属性变化时需要去更新的Watcher;

            Watcher: 有3种情况会生成Watcher的实例对象,分别为:

    1.  定义在computed里的计算属性;
    2. 在watch里写的监听函数;
    3. 组件的渲染Watcher;

    3、收集依赖与更新依赖

    3.1 收集依赖

            将Watcher的实例对象w分发到它所依赖的属性的Dep中,过程如下:

    1. 将Dep.target = 当前的Watcer 的实例对象w;
    2. w执行定义的函数(即在computed/watch写的函数);
    3. 执行函数的过程如果使用data里定义的属性,则会触发属性的get方法,get方法中Dep实例对象dep会将Dep.target中存储的w放入到dep.subs数组中,完成依赖收集。

        说明:Dep.target为当前Watcer的实例对象

    3.2 更新依赖

            当修改我们申明的某个属性时,会触发属性的set方法,set方法会将dep.subs数组中收集的Watcher实例对象进行更新,即触发我们定义在computed和watch里面的函数。

    4、源码调试

    4.1 测试的页面代码

    <template>
      <div>
        <div>a:<input v-model="a" /></div>
        <div>c:{{ c }}</div>
        <div>b:<input v-model="b" /></div>
      </div>
    </template>
    <script>
    export default {
      data: () => {
        return {
          a: '',
          b: ''
        }
      },
      computed: {
        c() {
          return 'source from ' + this.a;
        }
      },
      watch: {
        b() {
          console.log('b changed');
        }
      }
    };
    </script>
    

    上面的代码vue初始化后会生成如下几个对象:

    1、对象说明

    属性a和b对应的Dep实例对象(收集a、b改变需要更新的Watcher):depA、depB;

    页面渲染函数生成对应的Watcher实例对象updateWatcher;

    computed属性c生成对应的Watcher实例对象:watcherC;

    watch监听属性b生成对应的Watcher实例对象:watcherB;

    2、Dep与Watcher的关系

    a、b变化页面需要重新渲染,所以updateWatcher存在于depA和depB的subs中;

    计算属性c依赖属性a的变化更更新,所以watcherC存在于depA的subs中;

    b的变化会触发定义watch 里b的监听函数,所以watcherB存在于depB的subs中;

    3、最终的关系结果

    最终属性a收集的依赖 depA.subs = [ updateWatcher,  watcherC];

    最终属性b收集的依赖 depB.subs = [ updateWatcher,  watcherB];

    4.2  源码调试

            找到源码文件:node_modules\vue\dist\vue.runtime.esm.js;

            4.2.1 主要涉及如下几个函数:

            1、收集依赖的入口函数:initState(页面初始化时执行);

            初始化顺序是先data-->computed-->watch:原因是computed依赖data, watch监听data和computed里的属性,被依赖的需要先初始化。

            2、初始化computed和watch时,生成Watcher实例化对象

                  先执行Watcher.get函数,将Dep.target = 当前Watcher实例化对象

            触发收集依赖

    执行计算属性里面的函数,如果访问到data中的某个属性时,会触发data属性的get方法,触发依赖收集:

     

     当修改这个属性时会触发set方法,会触发更新dep.subs里面watcher对象

    最终触发Watcher的更新函数,将待更新的watcher放入队列中:

    4.2.2 computed属性特别说明

            computed属性在初始化initComputed之前还有一次更早的初始化,在调用createComponent函数生成vnode组件时,调用了Vue.extend --》defineComputed方法,并在组件的原型Prototype上添加computed里的计算属性,并声明为响应式属性,为何这样设计,原因不知,如有小伙伴知道,还请告知,谢谢

    展开全文
  • Vue响应式原理介绍 监听Vue实例中的data选项,我们以下用一个普通的js对象模拟data,用Object.defineProperty进行定义属性值的getter和setter方法。当data选择项中的key进行获取和修改时,Vue内部会调用相应的方法。...
  • Vue 源码之Vue 响应式原理【完整版】

    千次阅读 2022-03-27 23:53:38
    Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用,它的作用是为对象的某个属性对外提供 get、set 方法,从而实现外部对该属性的读和写操作时能够被内部监听,实现后续的同步视图更新功能...
  • 简述vue响应式原理

    2021-08-09 11:22:37
    响应式数据的最终目标,是当对象本身或对象属性发生变化时,将会运行一些函数,最常见的就是render函数。 在具体实现上,vue用到了几个核心部件: Observer Dep Watcher Scheduler Observer Observer要实现的目标...
  • 作为计算机工程师,框架是提高开发效率的重要工具。理解框架的核心原理,有助于更好地使用它和定位问题。同时,一个优秀的框架,其设计方案和实现...本文将通过实现一个简单的响应式系统,来理解vue.js的响应式原理
  • 主要介绍了Vue响应式原理-理解Observer、Dep、Watcher,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • coderwhy Vue面试题-vue响应式原理笔记
  • Vue响应式原理---双向绑定

    千次阅读 2022-04-24 17:30:10
    二、响应式的基本原理—双向绑定 双向绑定,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新,在单向绑定的基础上,如果用户更新了View,Model的数据也会自动更新。 双向绑定由三个...
  • 浅谈Vue响应式原理

    万次阅读 多人点赞 2021-02-02 21:22:39
    二、响应式的基本原理 1.通过Object.definePropert来实现监听数据的改变和读取(属性中的getter和setter方法) 实现数据劫持 2.观察者模式(发布者-订阅者) 观察者(订阅者) – Watcher: update():当事件发生时,...
  • VUE响应式原理

    2021-10-15 17:13:08
    Vue响应式原理核心是通过ES5的保护对象的Object.defineProperty中的访问器属性中的get和set方法,data中声明的属性都被添加了访问器属性,当读取data中的数据时自动调用get方法,从实际保存数据的半隐藏属性中,读...
  • vue响应式原理.pdf

    2020-04-19 11:13:33
    响应式原理:在读取属性的时候收集依赖,在改变属性值的时候触发依赖的更新 实现一个observer,劫持对象属性的getter和setter 实现一个全局的订阅器Dep,可以追加订阅者,和通知依赖更新 在读取属性的时候追加当前...
  • Vue 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。下面这篇文章主要给大家深入讲解了关于Vue的响应式原理,以及Vue响应式的一些注意事项,需要的朋友下面随着小编来一起学习学习吧。
  • Vue 内部使用了 Object.defineProperty() 来实现数据响应式,通过这个函数可以监听到 set 和 get 的事件。 var data = { name: 'yck' } observe(data) let name = data.name // -> get value data.name = 'yyy' /...
  • 数据响应式: 数据模型是JavaScript 的普通对象,当我们修改数据时,视图会进行更新,避免了操作DOM,提高了开发效率 双向绑定:数据改变,视图也会跟着变化;视图改变,随之数据也会改变 数据驱动:开发过程中需要关注数据...
  • 学过 vue 如果不了解响应式原理,怎么能说自己熟练使用 vue,要是没有写过一个简易版的 vue 怎么能说自己精通vue,这篇文章通过300多行代码,带你写一个简易版的 vue,主要实现 vue 数据响应式 (数据劫持结合发布...
  • vue响应式原理与双向数据的深入解析  了解object.defineProperty 实现响应式 清楚 observe/watcher/dep 具体指的是什么 了解 发布订阅模式 以及其解决的具体问题 在Javascript里实现数据响应式一般有俩种方案,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,770
精华内容 10,308
关键字:

vue响应式原理