• 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中触发依赖

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

  • 相关阅读:
    UITableView
    xib的读取方式
    远程登录树莓派
    来体验下Linux吧
    树莓派了解Linux基本命令
    来感受Linux命令行的“真香定律”
    初尝树莓派
    从入手树莓派开始
    08-java学习笔记-集合框架中的工具类
    07-java学习笔记-map集合
  • 原文地址:https://www.cnblogs.com/lk1186578324/p/12570595.html
Copyright © 2020-2023  润新知