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)
blank

相关推荐

  • 使用nginx配置二级域名

    使用nginx配置二级域名最近想把三个项目配在一个服务器上,于是想使用nginx配置二级域名实现。1.域名添加解析我的是阿里云的域名,所以首先给自己的域名添加解析。打算使用www.codeliu.com,test1.codeliu.com,test2.codeliu.com这三个域名,其中test1.codeliu.com,test2.codeliu.com作为二级域名。2.准备好三个项目ecl…

  • Java学习之Request篇

    Java学习之Request篇0x00前言在b/s架构里面,请求和响应是必不可少的。访问网页时,会发出一个request请求,服务器接收到请求后,根据设定代码,给我们响应对应的内容。0x01

    2021年12月12日
  • Java之路:this关键字的用法

    Java之路:this关键字的用法(1)普通方法中,this总是指向调用该方法的对象。(2)构造方法中,this总是指向正要初始化的对象。(3)this可以让类中的一个方法,访问该类的另一个方法或属性。(4)可以使用this关键字调用重载构造方法。避免相同的初始化代码,只能在构造方法中用,并且必须位于构造方法的第一句。(5)this不能用于static方法。用this调用构造方法packagethis_const…

  • bug生命周期的状态

    bug生命周期的状态从一个bug被发现到这个bug被关闭这一段时间,bug可能会有以下状态:new,openPostpone,PendingRetest,Retest,PendingReject,Reject,Deferred,closed.(请注意这里有很多种状态,我们需要根据不同情况来决定怎样或者是否需要跟开发人员沟通)  下面就对这几种状态进行以下解释:  New:(新的)  当

  • 金融公司2014年度工作总结与2015年度工作计划

    金融公司2014年度工作总结与2015年度工作计划正文:一、 员工个人对全年重点工作、核心绩效指标进行罗列。自6月入职以来参加730、825、917、1015、1126的版本测试,测试的各个功能点,前台涉及的测试功能点包括广发、汇添富的申购、赎回,基金双持,票据购买、冻结收银台、理财管理、后台功能点包括用户开户信息查询等各种报表处理、申购异常处理、赎回异常处理、强制赎回等异常处理、定时任务管理、日常管理包括基础配置管理、基金管理中的…

  • 医学图形图像处理(医学影像和医学图像处理)

    文章目录1图像和数字图像1图像和数字图像  数字图像:被定义为一个二维函数,f(x,y),其中x,y代表空间坐标,f代表点(x,y)处的强度或灰度级。和普通的笛卡尔坐标系有区别,在计算机中坐标系左上角为原点:  图像数字化:图像进入计算机后,对图像进行数字化(映射)。数字图像三要素:  (1)像素:大小决定了图像存储、显示的清晰度;  (2)灰度值:通常为0-255,因为在计算机中通常用一个字节来表示一个像素,即28。  (3)坐标  图像存储在计算机中会丢失信息,因为是从一个连续的

发表回复

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

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