zoukankan      html  css  js  c++  java
  • 【每日一题】【vue2源码学习】对VUE响应式数据的理解

    数组和对象类型当值变化时如何劫持到?

    对象类型数据的劫持

    是内部通过defineReactive方法。使用Object.defineProperty将属性进行劫持(只会劫持已经存在的属性),多层对象是通过递归来实现的劫持。(详细还要看Object.defineProperty实现观察者模式的代码思路)。而到了vue3.x中时使用Proxy来实现响应式数据的。proxy提升性能但是兼容性不太好。

    数组类型数据的劫持

    则是通过重写数组的方法来实现的。这是因为因为defineProperty会依次的给对象的属性增加get和set方法来进行监听。但数组长度不定且可能数值项很多。每一项都监听性能特别差。所以不使用defineProperty的方式实现监听。(具体重写了哪些方法以及怎么重写的见后期第2题)

    内部依赖收集是怎么做到的?

    每个属性都拥有自己的dep属性,存放他所依赖的watcher,当属性变化后会通知自己对应的watcher去更新(其实后边每个对象类型自己本身也拥有一个dep属性,后期第九题$set也有涉及)。

    性能优化相关:

    • 每一个属性都要重定义,对象层级过深会递归劫持,性能就会变差
    • 不需要响应数据的内容不要放到data中(即后续新增的新值不会被监听,不能实现响应式数据,只能用vue.$set)
    • Object.freeze()可以冻结数据。冻结后的数据就不能用defineProperty重定义。

    vue【对象】响应式数据原理mock

    源码地址

    源码位置:

    github:src/core/observer/index.js:135

    本文使用 mdnice 排版

  • 相关阅读:
    简单理解Vue中的nextTick
    vue-router路由元信息及keep-alive组件级缓存
    Webpack配置区分开发环境和生产环境
    理解Vue.mixin,利用Vue.mixin正确的偷懒
    HTML5实现首页动态视频背景
    vue-router钩子函数实现路由守卫
    Vue路由(vue-router)详细讲解指南
    一文轻松搞懂Vuex
    利用HBuilder打包Vue开发的webapp为app
    WPF中剪贴板操作Clipboard
  • 原文地址:https://www.cnblogs.com/padding1015/p/13744218.html
Copyright © 2011-2022 走看看