前端面试题整理——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进行通信的方式(怎么通信) ...
随机推荐
- CNN（卷积神经网络）入门
参考博文: 深度学习基础--卷积--1*1的卷积核与全连接的区别:https://blog.csdn.net/wydbyxr/article/details/84061410 如何理解卷积神经网络中的 ...
- RENIX软件连接机箱测试RTSM基本操作——网络测试仪实操
本文主要介绍了RENIX软件RTSM功能连接机箱测试的基本操作.文章分为三部分内容,第一部分为RTSM功能简介,第二部分为RTSM原理简介,第三部分为RTSM测试方案的具体介绍. 第一部分.RTSM功 ...
- JVM垃圾回收阅读笔记
Java内存运行时区域的各个部分,其中程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭,栈中的栈帧随着方法的进入和退出而有条不紊地执行着出栈和入栈操作. 每一个栈帧中分配多少内存基本上是 ...
- 超强视频超分AI算法，从此只看高清视频
最近发现一个特别强的视频超分算法----BasicVSR,在真实世界数据集中,实现了前所未有的视觉重建效果,最近它还拿下了超分比赛NTIRE 2021三冠一亚的优异成绩,登上了CVPR 2022. 视 ...
- 【转载】SQL复杂实例
from:http://blog.csdn.net/basycia/article/details/52134320 OR from:http://www.wzsky.NET/ ...
- 微信小程序 实现图片上传并展示到前端（多文件）并实现表单提交验证
链接: https://blog.csdn.net/guanj0623/article/details/121595884?spm=1001.2014.3001.5501 https://blog.c ...
- XSS攻击防范
前端安全系列之XSS攻击防范 1.使用textContent 2.使用HTML转义 把JS中的标签转成字符 3.对于链接跳转 禁止含有'javascript:'开头的字符 4.标签属性中含有恶意执行代 ...
- centos7下rsync+inotify脚本实现文件同步，.NET CORE客户端文件更新后自动重启服务
源服务器IP:192.168.8.51 目标服务器IP:192.168.8.79 安装前源服务器及目标服务器均需关闭FIREWALLD\SELINUX防火墙 sestatus | grep statu ...
- vue结合antV/g6 实现网络拓扑图
最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了antV/g6,主要原因有以下几点: 1.阿里出品,所以框架的成熟性有保障 2.业务场景契合(1.规则拓扑图:2.动画流向:每个节点会有流 ...
- LGP7704题解
来一个特别暴力的做法. 首先,如果删掉 \(x\) 和 \(y\) 的效果一定和删掉 \(xy\) 的效果相同,且代价一定不大于后者. 于是我们只删除质数,题目就变成了寻找 \(i!(1 \leq i ...