zoukankan      html  css  js  c++  java
  • Vue对象的Object的变化侦测

    ------------恢复内容开始------------

    1、什么是变化侦测

    Vue.js会自动通过状态生成Dom,并输出到页面上进行显示,这过程称为渲染,当状态发生变化时vue能立刻感知到哪些状态改变了,并进行更新

    2.如何追踪状态变化

    js里面侦测对象的变化有两种,一种是Object.defineProperty和Es6的proxy

     function defineReactive(data,key,val) {
    Object.defineProperty(data,key,{
    enumerable:true,//可枚举
    configurable:true,
    get:()=>{
    console.log('isGet')
    return val
    },
    set:(newVal)=>{
    console.log(newVal,val)
    if(val===newVal){
    return
    }
    console.log('isSet')
    val=newVal
    }
    })
    }
    let obj={}
    defineReactive(obj,'dog','good')
    obj.dog //good
    obj.dog = 'good1' //good

    每次从obj的key中读取数据时,get函数被出发,当往obj的key中设置数据时,set被触发

    3,依赖收集

    <template>
       <h1>{{name}}</h1>
    </template>  
    当模板使用数据时,当数据发生变化,会将通知发送到组件中,内部组件通过虚拟Dom重新渲染

    及首先将数据name的地方收集起来,当属性发生变化是,将收集的依赖循环触发,在getter中收集依赖,在setter中触发依赖

    ------------恢复内容结束------------

  • 相关阅读:
    计算机硬件知识整理
    cf689d ST表RMQ+二分
    hdu5289 ST表+二分
    hdu5443 ST表裸题:求区间最大
    poj3264 倍增法(ST表)裸题
    cf932d 树上倍增
    zoj3195 联通树上三个点的路径长
    hdu6107 倍增法st表
    hdu2586 lca倍增法
    poj1470 LCA倍增法
  • 原文地址:https://www.cnblogs.com/lk1186578324/p/12570595.html
Copyright © 2011-2022 走看看