V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
FakeLeung
V2EX  ›  前端开发

vue 是怎么知道两个变量哪个需要更新视图,哪个不需要?

  •  
  •   FakeLeung · 2019-01-09 23:20:40 +08:00 · 2793 次点击
    这是一个创建于 2134 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如有一个模版

    <p>{{a}}</p>
    

    vue 的数据:

    const vm = new Vue({
    
    	data: () => ({
    		a: 'a',
            b: 'abc'
    	})
    
    })
    

    当我修改 a 时,视图更新了。

    当我尝试修改 b 时,那么 vue 内部有没有进行更新,或者说 vue 如何知道 b 被修改了,却不需要更新视图的?

    5 条回复    2019-01-16 10:44:26 +08:00
    akatquas
        1
    akatquas  
       2019-01-09 23:31:19 +08:00 via iPhone
    文档文档,
    3.0 以前是 defineProperty 里面劫持

    3.0 以后我没看到,估计是是 Proxy 触发

    ╮( ̄▽ ̄"")╭
    Biwood
        2
    Biwood  
       2019-01-09 23:35:01 +08:00
    virtual dom diffing algorithm,其实还是借鉴了 react.js 的思路,在使用这类框架的时候建议还是了解一下设计思想以及实现原理
    FakeLeung
        3
    FakeLeung  
    OP
       2019-01-10 00:18:09 +08:00
    @akatquas #1
    @Biwood #2
    是的,我知道是 definePrototype 劫持了,那么,b 更新了,也会触发 setter 中的劫持,但是 vue 内部,到底是用什么办法,不去更新视图?
    是因为 Dep 中没有相对应的 target 还是因为 diff 了 vdom 发现无需更新视图?
    Lxxyx
        4
    Lxxyx  
       2019-01-10 04:33:07 +08:00 via Android
    getter 来做依赖收集,也就是说,如果你在模板或者方法里面调用了这个变量,那么框架就知道这个变量是有人使用的,在这个变量变化的时候会通知那些使用它的地方
    redbuck
        5
    redbuck  
       2019-01-16 10:44:26 +08:00
    初始化的时候劫持 data 里的所有属性的 set/get 操作(defineProperty),同时解析模板的时候会收集模板里用到的属性(依赖收集),对属性进行 set 操作的时候,会通知所有订阅者更新 dom
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1042 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 20:16 · PVG 04:16 · LAX 12:16 · JFK 15:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.