vue2面试题:什么是双向数据绑定

vue2面试题:什么是双向数据绑定

  • 回答思路:1.什么是双向绑定-->2.双向数据绑定的原理-->3.如何实现双向数据绑定
    • 1.什么是双向绑定
    • 2.双向数据绑定的原理
    • 3.如何实现双向数据绑定
      • 来一个构造函数:执行初始化,对data执行响应化处理
      • 编译compile
      • 依赖收集

回答思路:1.什么是双向绑定–>2.双向数据绑定的原理–>3.如何实现双向数据绑定

1.什么是双向绑定

把Model绑定到View上为单向绑定,双向绑定就是在单向绑定的基础上,用户更新了view后model也会随之更新

2.双向数据绑定的原理

Dep:属性订阅器
Observer:监听器(对所有属性进行监听)
Compile:解析器(对每个节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数)
Watcher:观察者(负责建立Vue实例属性与视图之间的联系,在属性值发生变化时更新视图)

vue.js采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,在数据发生变动时发布消息给订阅者,触发相应的监听回调,分为一下几个步骤:
在这里插入图片描述
(1)对需要监听的数据对象进行递归遍历,包括子属性对象的属性,都加上setter、getter,改变其中值就会触发setter,Observer就能监听到了
(2)compile解析模板指令,将模板指令替换成数据,然后初始化渲染页面视图,绑定更新函数,添加订阅者,一旦有数据变化就通知watcher进行更新
(3)watcher是observer和compile的通信桥梁,主要作用:1.自身实例化时往Dep中添加订阅者2.自身必须要有一个update()函数3.等属性变动时Dep会调用dep.notify()通知watcher,watcher调用自身的update()方法进行更新,并触发compile绑定的回调函数

3.如何实现双向数据绑定

来一个构造函数:执行初始化,对data执行响应化处理

class Vue { 
 constructor(options) { 
 this.$options = options; 
 this.$data = options.data; 
 
 // 对data选项做响应式处理 
 observe(this.$data); 
 
 // 代理data到 vm上 
 proxy(this); 
 
 // 执行编译
 new Compile(options.el, this); 
 } 
}

在observer中对data响应化的具体操作:

function observe(obj) { 
	if (typeof obj !== "object" || obj == null) { 
		return; 
	} 
	new Observer(obj); 
} 
 
class Observer { 
	constructor(value) { 
	this.value = value; 
	this.walk(value); 
} 
walk(obj) { 
	Object.keys(obj).forEach((key) => { 
	defineReactive(obj, key, obj[key]); 
	}); 
 } 
}

编译compile

对每个元素节点的指令进行扫描和解析,根据指令替换数据,以及绑定相应的更新函数

class Compile { 
	constructor(el, vm) { 
		this.$vm = vm; 
		this.$el = document.querySelector(el); //获取dom 
		if (this.$el) { 
			this.compile(this.$el); 
		} 
 } 
 compile(el) { 
 	const childNodes = el.childNodes; 
 	Array.from(childNodes).forEach((node) => { // 
 	if (this.isElement(node)) { // 
 	console.log(" " + node.nodeName); 
} else if (this.isInterpolation(node)) { 
	console.log(" " + node.textContent); // 判断是否为插值文本{{}} 
 } 
 if (node.childNodes && node.childNodes.length > 0) { //判断是否有子元素 
 
	this.compile(node); // 对子元素进行递归遍历
	} 
}); 
} 
isElement(node) { 
	return node.nodeType == 1; 
} 
isInterpolation(node) { 
	return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent); 
 } 
}

依赖收集

依赖收集,创建Dep实例

function defineReactive(obj, key, val) { 
	this.observe(val); 
	const dep = new Dep(); 
	Object.defineProperty(obj, key, { 
		get() { 
			Dep.target && dep.addDep(Dep.target);// Dep.target 就是Watcher实例 
			return val; 
		}, 
		set(newVal) { 
			if (newVal === val) return; 
			dep.notify(); // 通知dep执行更新方法 
	}, 
}); 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/344836.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux: make/Makefile 相关的知识

背景: 会不会写makefile,从一个侧面说明了一个人是否具备完成大型工程的能力一个工程中的源文件不计数,其按类型、功能、模块分别放在若干个目录中,makefile定义了一系列的 规则来指定,哪些文件需要先编译&#xff0c…

ubuntu22.04安装filebeat报错解决

1、查看报错 journalctl -u filebeat 或者 filebeat -c /etc/filebeat/filebeat.yml找到报错信息 runtime/cgo: pthread_create failed: Operation not permitted 2、解决报错 在filebeat.yml配置文件添加如下配置,重启filebeat seccomp:default_action: allow…

ansible 常用模块

目录 1.ping模块 2.command模块 3. shell模块 4.copy模块 5.file模块 6.fetch模块 7.cron模块 8.yum模块 9.service模块 10.user模块 11.group模块 12.script 模块 13.setup模块 14. get_url模块 15.stat模块 16.unarchive模块 1.ping模块 使用ansible db1 -m pin…

【数学建模】综合评价方法

文章目录 综合评价的基本理论和数据预处理综合评价的基本概念综合评价体系的构建综合指标的预处理方法评价指标预处理示例 常用的综合评价数学模型线性加权综合评价模型TOPSIS法灰色关联度分析熵值法秩和比(RSR)法综合评价示例 综合评价的基本理论和数据…

NODE笔记 2 使用node操作飞书多维表格

前面简单介绍了node与简单的应用,本文通过结合飞书官方文档 使用node对飞书多维表格进行简单的操作(获取token 查询多维表格recordid,删除多行数据,新增数据) 文章目录 前言 前两篇文章对node做了简单的介绍&#xff…

Android-System fastboot 介绍和使用

一、fastboot简介 在android手机中,fastboot是一种比recovery更底层的刷机模式。 实际操作中:fastboot是一种线刷,就是使用USB连接手机的一种刷机模式。相对于某些系统来说,线刷比卡刷更可靠,安全。recovery是一种卡刷…

node 第二十三天 mongoDB shell 命令 CRUD 增删改查 基础

什么是 mongoDB shell 命令 mongoDB shell 命令就是在cmd窗口或者powershell窗口与mongoDB交互的命令, 以下简称mongosh 对应我们上一天安装的 mongosh 工具 有什么用 mongosh 对一般的开发者可能意义不大, 因为在开发过程中我们会基于某一款语言来使用mongoDB, 比如在node端我…

【Java程序员面试专栏 专业技能篇】计算机网络核心面试指引

关于计算机网络部分的核心知识进行一网打尽,包括计算机的网络模型,各个层的一些重点概念,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 分层基本概念 计算机网络模型的分层及具体作用 计算机网络有哪些分层模型 可以按照应用层到物…

单调栈经典例题

import java.util.Scanner;public class Main{public static void main(String[] args) {//单调递增栈,栈中的所有元素严格单调递增//比如1 6 5 4 9 8 7 10 11 56不会出现在答案里//因为被4给拦截住了//遍历到4的时候可以把56都出栈//89也不会出现,被7拦住了//遍历到…

【漏洞复现】SpringBlade export-user接口SQL注入漏洞

文章目录 前言声明一、SpringBlade系统简介二、漏洞描述三、影响版本四、漏洞复现五、修复建议 前言 SpringBlade 是一个由商业级项目升级优化而来的微服务架构 采用Spring Boot 2.7 、Spring Cloud 2021 等核心技术构建,完全遵循阿里巴巴编码规范。提供基于React和…

2024年美赛数学建模思路 - 案例:退火算法

文章目录 1 退火算法原理1.1 物理背景1.2 背后的数学模型 2 退火算法实现2.1 算法流程2.2算法实现 建模资料 ## 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上&a…

文献速递:人工智能医学影像分割---基于合成MRI辅助的深度注意力全卷积网络的CT前列腺分割

文献速递:人工智能医学影像分割—基于合成MRI辅助的深度注意力全卷积网络的CT前列腺分割**** 01文献速递介绍 Prostate cancer is the most common cancer and the second leading cause of cancer death among men in the United States.1 Depending on the risk…

TA百人计划学习笔记 3.2混合模式及剔除

资料 源视频 【技术美术百人计划】图形 3.2 混合模式及剔除_哔哩哔哩_bilibili ppt https://github.com/sunkai174634/PhotoShopBlendModeUnityShader 实例 notargs.com混合模式 unity 官方文档 ShaderLab:混合 - Unity 手册 是什么 从渲染流程解释 从效果上解释 Bl…

常见的二十种软件测试方法详解

一.单元测试(模块测试) 单元测试是对软件组成单元进行测试。其目的是检验软件组成单位的正确性。测试对象是:模块。 对模块进行测试,单独的一个模块测试,属于静态测试的一类 测试阶段:编码后或者编码前&…

支付宝推出新年“五福节”活动,新增四大AI玩法;大型语言模型综合指南

🦉 AI新闻 🚀 支付宝推出新年“五福节”活动,新增四大AI玩法 摘要:支付宝宣布今年的“集五福”活动升级为“五福节”,新增了四大AI玩法:飙戏小剧场、时空照相馆、会说话红包和大家来找福。用户可以通过拼…

“接口”公共规范的遵守者

👨‍💻作者简介:👨🏻‍🎓告别,今天 📔高质量专栏 :☕java趣味之旅 欢迎🙏点赞🗣️评论📥收藏💓关注 💖衷心的希…

Kubernetes多租户实践

由于namespace本身的限制,Kubernetes对多租户的支持面临很多困难,本文梳理了K8S多租户支持的难点以及可能的解决方案。原文: Multi-tenancy in Kubernetes 是否应该让多个团队使用同一个Kubernetes集群? 是否能让不受信任的用户安全的运行不受信任的工作…

VUE3好看的我的家乡网站模板源码

文章目录 1.设计来源1.1 首页界面1.2 旅游导航界面1.3 上海景点界面1.4 上海美食界面1.5 上海故事界面1.6 联系我们界面1.7 在线留言界面 2.效果和结构2.1 动态效果2.2 代码结构 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/…

在无公网IP环境下实现VS Code远程开发的方法

哈喽大家好,我是咕噜美乐蒂,很高兴又见面啦! 随着云计算和远程协作的普及,越来越多的开发者选择使用VS Code进行远程开发。然而,有时我们会发现自己处于一个没有公网IP的网络环境,这可能会导致无法直接访问…

EasyCVR视频融合平台铁路抑尘喷洒监控系统视频搭建方案

一、建设背景与需求分析 随着我国铁路建设的迅猛发展,铁路抑尘喷洒设备质量监控系统在技术和管理方面都取得了显著的进步,面临安全压力也随之加大。为了确保铁路运输的安全和稳定,车站监控室、喷洒区域、操作间以及安全防护区域等关键区域都…