vue的响应式原理面试_vue面试题目

vue的响应式原理面试_vue面试题目coderwhyVue面试题-vue响应式原理笔记

大家好,又见面了,我是你们的朋友全栈君。

Vue的响应式原理

  • 数据发生改变,界面跟着更新,并不是理所当然的,Vue内部是做了很多封装的

依赖技术的分析和学习

  • 首先,来看一个最简单的Vue响应式例子:
 <div id="app">
        {
  
  {message}}
 </div>
   <script src='./js/vue.js'></script>
    <script> const app = new Vue({ 
      el: '#app', data: { 
      message: '哈哈哈哈', name: 'coderYYY' } }) </script>
  • 分析
    • 1.app.message修改数据,Vue内部是如何监听message数据的改变?
      • Vue2 -> object.defineProperty -> 监听对象属性的改变
      • Vue3 -> Proxy
    • 2.当数据发生改变,Vue是如何知道要通知哪些人,界面发生刷新?
      • 发布者订阅者模式
    const obj = { 
   
            message: '哈哈哈哈',
            name: 'yyy'
        }
        // 1.监听值的改变 -> Object.defineProperty(属性所在的对象,要添加或者修改的对象属性,属性描述符)
        Object.keys(obj).forEach(key => { 
   
            let value = obj[key]

            Object.defineProperty(obj, key, { 
   
                set(newValue) { 
   
                    console.log('监听' + key + '改变');
                    // 告诉谁?谁用告诉谁?谁在用?
                    // 根据解析html代码,获取到哪些人有用属性
                    // 张三/李四/王五 在用
                    value = newValue
                    // dep.notify()// 通知
                },
                get() { 
   
                    // 谁用一次就会调用一次get
                    // 张三: get -> update
                    // 李四: get -> update
                    // 王五: get -> update
                    console.log('获取' + key + '对应的值');
                    return value
                }
            })
        })
        // 2.发布者订阅者模式
        // 发布者
        class Dep { 
    // 存储所有对属性有依赖的东西
            constructor() { 
   
                this.subscribe = [] // subscribe 订阅 这个数组记录谁要订阅属性
            }
            addSub(watcher) { 
   
                this.subscribe.push(watcher)
            }
            notify(){ 
   
                this.subscribe.forEach(item=>{ 
   
                    item.update()
                })
            }
        }
        const dep = new Dep()
        // 订阅者
        class Watcher { 
   
            constructor(name) { 
   
                this.name = name;
            }
            update() { 
   
                console.log(this.name + '发生update');
            }
        }
        const w1 = new Watcher('张三')
        dep.addSub(w1)
        const w2 = new Watcher('李四')
        dep.addSub(w2)
        const w3 = new Watcher('王五')
        dep.addSub(w3)
        dep.notify()

在这里插入图片描述
在这里插入图片描述

通过图解理解过程

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135185.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号