Vue原理篇——侦听器的实现

最新推荐文章于 2023-01-15 21:02:54 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2023-01-15 21:02:54 发布

阅读量546

点赞数

文章标签： vue.js Vue原理 Vue侦听器的实现 Vue侦听器原理

本文链接：https://blog.csdn.net/qq_39055970/article/details/126961639

版权

vue高级内容专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue原理篇——侦听器的实现

1.前言
2.侦听器的实现

1.前言

我们在上一篇文章中说了Vue的响应式原理，使用Object.defineProperty，但是有一个问题，就是每次只能一个一个设置。而这篇文章就是为了说明如何使用侦听器让对象里的每个值都变成可观测的。

2.侦听器的实现

（1）创建一个Observe类，判断传入的值是数组还是对象（本篇文章值说明对象的逻辑，数组的逻辑有兴趣的同学可以自己实现下），如果是对象，使用自定义的walk方法，进行遍历，使用defineReactive方法，让每个属性都变成可观测的。
（2）在defineReactive方法中，判断传入的属性是否是对象，如果是就递归Observe，如果不是就执行Object.defineProperty进行数据劫持。

index.js：

export class Observe{
  constructor(value){
    this.value = value
    if(Array.isArray(value)){
      // 数组的逻辑
    }else{
      // 对象的逻辑
      this.walk(value)
    }
  } 

  walk(obj){
    const keys = Object.keys(obj)
    for(let i = 0;i < keys.length;i++){
      defineReactive(obj,keys[i])
    } 
  } 
}

// 循环，让每个属性都变成可观测的
function defineReactive(obj,key,val){
  if(arguments.length === 2){
    val = obj[key]
  }
  if(typeof val === 'object'){
    // 递归
    new Observe(val)
  }

  Object.defineProperty(obj,key,{
    enumerable:true,  //  可枚举
    configurable:true,  //  可删除
    get(){
      console.log(`${key}被读取了`)
      return val
    },
    set(newVal){
      console.log(`${key}属性被修改了，新值为${newVal}`)
      val = newVal
    }
  })
}

（3）使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>如何让数据可观测“”</title>
</head>
<body>
  <h2>Vue侦听器原理解析——让每个属性都可以被观测（Observe类的实现）</h2>
  <script type="module">
    import {Observe} from './observe.js'
    let obj = new Observe({
      name:'小明',
      age:'18',
      demo:{
        a:'aaa',
        b:'bbb'
      }
    }) 
    console.log(obj.value.name)
    obj.value.name = 25

    console.log(obj.value.demo.a)
    obj.value.demo.a = 'aaaaaaa'
  </script>
</body>
</html>

在这里插入图片描述

Sheldon一蓑烟雨任平生

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue原理篇——侦听器的实现

我们在上一篇文章中说了Vue的响应式原理，使用Object.defineProperty，但是有一个问题，就是每次只能一个一个设置。而这篇文章就是为了说明如何使用侦听器让对象里的每个值都变成可观测的。
复制链接

扫一扫