前端面试题整理——VUE双向绑定原理
VUE2.0和3.0数据双向绑定的原理，并说出其区别。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0/3.0双向数据绑定原理</title>
</head>
<body>
姓名：<span id="name"></span>
<br>
<input type="text" id="inputText" oninput="changeTxt2()">
<hr>
姓名：<span id="name2"></span>
<br>
<input type="text" id="inputText2" oninput="changeTxt2()"> <script>
// 2.0
// ES5：Object.defineProperty 数据劫持实现
let obj = {name: ''};
let newObj = JSON.parse(JSON.stringify(obj))
Object.defineProperty(obj, 'name', {
get() {
return newObj.name
},
set(value) {
if (value === newObj.name) return;
newObj.name = value;
observer();
}
}) function observer() {
document.getElementById('name').innerHTML = document.getElementById('inputText').value = obj.name;
} function changeTxt() {
obj.name = document.getElementById('inputText').value;
} /*
* Object.defineProterty弊端：
* 1、需要将原来的对象克隆一份
* 2、需要分别给对象中指定每一个属性设置监听
* 3、深度监听需要递归到底，一次性计算量大
* 4、不能监听数组，只能监听对象
* 5、无法监听新增和删除的属性，只能通过Vue.set和Vue.delete这两个API进行
* */
// 如何监听数组：重写数组的相应方法对视图进行更新
// 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象，原型指向 oldArrayProperty，再扩展新的方法不会影响Array的原型
const arrProto = Object.create(oldArrayProperty)
// 重写方法
['push','pop','shift','unshift'].forEach(methodName=>{
arrProto[methodName] = function(){
// 先触发视图更新,下面updateView方法是伪代码，表示视图更新的封装方法
updateView()
// 再调用Array原有方法执行数组更新
oldArrayProperty[methodName].call(this,...arguments)
}
})
// 3.0
// ES6：Proxy 委托代理
let obj2 = {};
obj2 = new Proxy(obj2, {
get(target, prop) {
// target，代理的对象
// prop，代理对象的属性
return target[prop]
},
set(target, prop, value) {
target[prop] = value
observer2()
}
})
// 不需要克隆，只需要整个对象进行代理
// Proxy可以对数组进行监听，同时可以监听新增和删除属性
// 缺点：浏览器兼容弱
function observer2() {
document.getElementById('name2').innerHTML = document.getElementById('inputText2').value = obj2.name;
}
function changeTxt2() {
obj2.name = document.getElementById('inputText2').value;
}
</script>
</body>
</html>
前端面试题整理——VUE双向绑定原理的更多相关文章
- 前端面试题整理——VUE相关题目与回答
1.v-if与v-show的区别? v-if的原理是根据判断条件来动态的进行增删DOM元素, v-show是根据判断条件来动态的进行显示和隐藏元素,频繁的进行增删DOM操作会影响页面加载速度和性能所以 ...
- 前端面试题整理—Vue篇
1.对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器 vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统 vue是一款MVVM框架,基于双向绑定数据,当数据发生 ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- Vue双向绑定原理，教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- Vue双向绑定原理（源码解析）---getter setter
Vue双向绑定原理 大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...
- vue 学习二 深入vue双向绑定原理
vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...
- 前端面试题（VUE）
(前端面试题大全,持续更新) vue:v-model 双向绑定的原理 依赖收集 虚拟DOM的作用 vue@3.0中的preset配置? 父组件A和其子组件B/子组件C,B/C进行通信的方式(怎么通信) ...
随机推荐
- python hex转flaot
在使用树莓派 modbus-tk 读取寄存器值后,得到的4byte值存为了元组,想将该数据转化为float,习惯了c的用法,转到python时,数据转换这一块一头雾水,经过多次尝试最终实现.记录一下: ...
- FlinkX
FlinkX的安装与简单使用 目录 FlinkX的安装与简单使用 FlinkX的安装 FlinkX的简单使用 MySQLToHDFS MySQLToHive MySQLToHBase MySQLToM ...
- 『德不孤』Pytest框架 — 13、Pytest中Fixture装饰器（三）
目录 9.ids参数说明 10.name参数说明 11.scope参数说明 (1)scope="function" (2)scope="class" (3)sc ...
- 七天接手react项目 —— state&事件处理&ref
state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...
- 分布式 PostgreSQL 集群(Citus)官方示例 - 实时仪表盘
Citus 提供对大型数据集的实时查询.我们在 Citus 常见的一项工作负载涉及为事件数据的实时仪表板提供支持. 例如,您可以是帮助其他企业监控其 HTTP 流量的云服务提供商.每次您的一个客户端收 ...
- Hive框架
1.什么是Hive? Hive 是基于Hadoop之上的数据仓库.2.什么是数据仓库? 数据仓库其实就是一个数据库 数据仓库是一个面向主题的,集成的,不可更新的,随时间不变化的数据集合,它用于支持 企 ...
- Spfa 求含负权边的最短路 + 判断是否存在负权回路
在Bellman-Ford算法之后,我们总算迎来了spfa算法,其实就如同堆优化Dijkstra算法之于朴素版Dijkstra算法,spfa算法仅仅是对Bellman-Ford算法的一种优化,但是在形 ...
- Bert不完全手册3. Bert训练策略优化！RoBERTa & SpanBERT
之前看过一条评论说Bert提出了很好的双向语言模型的预训练以及下游迁移的框架,但是它提出的各种训练方式槽点较多,或多或少都有优化的空间.这一章就训练方案的改良,我们来聊聊RoBERTa和SpanBER ...
- 如何防止 IP 被盗用 保护网络正常运行
IP被盗用是指盗用者使用未经授权的IP来配置网上的计算机.目前IP盗用行为非常常见,许多"不法之徒"用盗用地址的行为来逃避追踪.隐藏自己的身份.IP的盗用行为侵害了网络正常用户的权 ...
- Spring Boot 中初始化资源的几种方式
假设有这么一个需求,要求在项目启动过程中,完成线程池的初始化,加密证书加载等功能,你会怎么做?如果没想好答案,请接着往下看.今天介绍几种在Spring Boot中进行资源初始化的方式,帮助大家解决和回 ...