Vue底层原理之变化侦测


在这里插入图片描述

1. 说在前面

1.1 Vue的两大特性

  • 组件系统：把页面抽象成多个相对独立的模块，实现代码重用，提高开发效率和代码质量，便于代码维护。
  • 数据驱动：宗旨是以数据驱动，减少dom操作。
    数据可以理解为状态，视图即是用户所见页面，它是动态变化的，根据用户的操作或者后台数据变化来，状态变化视图（也就是页面）也会随之改变，所以我们得到了这样一个公式：
    在这里插入图片描述
  • state是状态输入，页面UI是得到的结果，状态改变，页面随之改变，这便是数据驱动视图。
  • state与UI是用户所定义，render()是固定的，所以这也是Vue扮演的角色。
  • 那么，Vue怎么知道state变化了呢？😧😧

1.2 变化侦测的定义

  • 我们期望出现的结果是：Vue能够监听到数据的变化，既而改变视图。
  • 变化侦测即是追踪数据状态，一旦数据变化，就去更新视图。

2. 使Object数据“可侦测”

2.1 单个属性监听

  • 如果我们要监听以下对象的某个属性：
let obj = {
	name: '小明',
	age: 18
}

众所周知，我们可以对这个对象里的任意属性进行增删改查等诸多操作，那么，我们如何才能知道：操作的具体属性是哪个，操作完的结果变成了什么？😣😣

  • 接下来，轮到Object.defineProperty() 出场了
let value = '小明';
Object.defineProperty(obj,  "name", {
	  get: function() {
	         console.log("取值")
	         return value;
	     },
     set: function(val) {
         console.log(`新值${value}`)
         value = val
     }
})
  • 这样便可以知道name属性的变化，读取和操作都能监听到
    在这里插入图片描述
    在这里插入图片描述
  • name 属性我们可以监测到变化与读取，但是age属性是不行的
  • 数据虽有变化，但是没法捕获，这显然是不对的，（就好像我娶了几个漂亮老婆，不发朋友圈让大家知道，炫耀一番，心里总是不舒服的）
    在这里插入图片描述

3. 让对象所有属性都变成“可观测”

observer.js 实现

  • 为了让obj里的每一个数据都变得可观测，我们可以写一个专门负责侦听的类，代码如下：
  • 注释也写的明明白白的，别忘了给个三连（给大家拜年了🙏🙏🙏）
export class Observer {
    // 初始化
    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 Observer(val)
    }

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

4.测试及使用

  • 代码如下：
<!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>Document</title>
</head>
<body>
    <h2>如何让对象中的每一个属性都能够被观测？</h2>
    <script type="module">
        import { Observer } from './observer.js'
        let obj =  new Observer({
            name: '小明',
            age: 18,
            demo: {
                a: 111,
                b: 'str'
            }
        })
        console.log(obj.value.name)
        console.log(obj.value.age)
        console.log(obj.value.demo.a)
        obj.value.age = 20
    </script>
</body>
</html>
  • 效果在这里👇👇👇
    在这里插入图片描述

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)

在这里插入图片描述

# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue