前端面试题整理——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进行通信的方式(怎么通信) ...
随机推荐
- pyqt（二）
二.文本和图片 1. 文本控件 文本控件是QLabel from PyQt5.QtWidgets import QWidget,QApplication,QLabel from PyQt5.QtCor ...
- JAVA 异常和异常处理
目录 一.异常 1.基本概念 2.异常体系图 3.五大运行时异常 4.编译异常 二.异常处理 1.异常处理的方式 1.1try-catch异常处理 注意事项 课堂练习题 1.2throws异常处理 注 ...
- LeetCode-026-删除有序数组中的重复项
删除有序数组中的重复项 题目描述:给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度. 不要使用额外的数组空间,你必须在 原地 修改输入数组 ...
- Golang开源流媒体服务器（RTMP/RTSP/HLS/FLV等协议）
一. lal 简介 lal是开源直播流媒体网络传输项目,主要由三部分组成: lalserver:流媒体转发服务器.类似于nginx-rtmp-module等服务,但支持更多的协议,提供更丰富的功能. ...
- Lua中如何实现类似gdb的断点调试--04优化钩子事件处理
在第一篇的01最小实现中,我们实现了一个断点调试的最小实现,在设置钩子函数时只加了line事件,显然这会对性能有很大的影响.而后来两篇02通用变量打印和03通用变量修改及调用栈回溯则是提供了一些辅助的 ...
- tp6微信公众号开发者模式基础消息
官方文档 https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_standard_messages ...
- 2022年官网下安装Logstash最全版与官网查阅方法（8.1.0最新安装）
一.环境整合 构建工具(参考工具部署方式) 软件名称 版本 相关文章推荐 NodeJS 16.0.0 https://www.cnblogs.com/liuyangfirst/p/15998172.h ...
- 题解 P1659 【[国家集训队]拉拉队排练】
一眼可得PAM 如果没学过PAM的可以看这里:PAM学习小结 我们令PAM上多记录一个信息\(sum\),表示该节点表示串在原串上出现了多少次. 当我们处理完了\(sum\),对于长度\(len\)为 ...
- ESXI 虚拟化误删除管理端口Management Network (vmk0)，导致无法访问后台解决方案
按F2开启控制台shell,启用后返回.按Alt+F1打开终端. 输入 esxcfg-vmknic -a -i 192.168.1.10 -n 255.255.255.0 "Manageme ...
- Python IO文件管理
文件操作 我们可以使用python来操作文件,比如读取文件内容.写入新的内容等,因为任何计算机文件的本质都是一些有不同后缀的字符组成的. python文件操作的两种模式 打开模式 while,写入模式 ...