Vue学习笔记：理解Vue2如何解决数组和对象的响应式问题

最新推荐文章于 2024-07-18 22:23:20 发布

蓝色香蕉船

最新推荐文章于 2024-07-18 22:23:20 发布

阅读量7.2k

点赞数 4

分类专栏： vue 前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_36290842/article/details/120941497

版权

Vue2通过Object.defineProperty实现数据监听，但无法检测数组和对象内部变化。为解决此问题，Vue2对数组使用特殊变异函数，对对象深度遍历设置getter和setter。Vue3改用Proxy提高首屏加载速度。

摘要由CSDN通过智能技术生成

前言

Vue2是通过用Object…defineProperty来设置数据的getter和setter实现对数据和以及视图改变的监听的。对于数组和对象这种引用类型来说，getter和setter无法检测到它们内部的变化。那么Vue2是则么来解决这个问题的呢？
通过一个简单的例子来理解Vue2中是如何解决数组和对象的响应式问题。

基本的代码

<html>

<head>

</head>

<body>
  <script>
    //1. 定义一个data对象来模拟组件中的数据
    var data = {
   
      name: 'xwd'，
      sex: 1，
      dog: {
   
        name: 'peter'，
        age: 5
      }，
      hobby: [
        "pingpang"， "basktetball"
      ]，

    }
	//2. 对Data做 reactive化
    Observer(data)
	
    function Observer(data) {
   
		// 模拟组件初始化对Data reactive化
      if (typeof data != "object" || data == null) {
   
        return data
      }
      for (let item in data) {
   
        //将数据响应式化
        defineReactive(data， item， data[item])
      }
      return data
    }
	
    function defineReactive(target， key， value) {
   
      Object.defineProperty(target， key， {
   
        enumerable: false，
        configurable: false，
        get() {
   
		//用打印控制台模拟视图发生渲染
          console.log("视图渲染使用了数据")
          return value;
        }，
        set(newValue) {
   
          if (newValue !== value) {
   
	
            value = newValue;
		    //用打印控制台模拟数据变更视图更新
            console.log(