前端面试题整理——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进行通信的方式(怎么通信) ...
随机推荐
- 华山论剑之 PostgreSQL sequence (二)
rename 对 sequence 的影响 关联列与 sequence 后,即 sequence 属于该列后,drop 表或列时会自动 drop 相关 sequence. 但如果对表或列 rename ...
- QQ音乐官方定制精简版v1.3.6 纯净无广告
介绍 近期腾讯推出了QQ音乐简洁版.顾名思义,QQ音乐简洁版就是官方精简后的版本,没有内置任何广告.完全专注于听歌,不存在直播.K歌.短视频等花里胡哨的内容.如有违规,请删删.. 结尾附pc端 QQ音 ...
- C#读写自定义的多字段配置文件
mark一下,日后填坑 参考: WPF 读写自己写的配置文件
- vue轻量进度条
**### vue------ mode 好玩东西+1: 轻量级进度条: 1.引入 import NProgress from 'nprogress'; // progress bar import ...
- WAF绕过的各种姿势
主要思路: 根据WAF部署位置,针对WAF.WEB服务器.WEB应用对协议解析.字符解析.文件名解析.编码解析以及SQL语法解析的差异,绕过WAF,将payload送至服务器执行. 常用绕过方法: 1 ...
- activemq 使用经验
activemq 使用经验 ActiveMQ 是apache的一个开源JMS服务器,不仅具备标准JMS的功能,还有很多额外的功能.公司里引入ActiveMQ后,ActiveMQ成里我们公司业 务系 ...
- linux更新源管理
1.备份源 主要防止在更新了新的源之后出现错误情况,备份一下现有的源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.old 2.编辑sourc ...
- 比Tensorflow还强？
大家好,我是章北海 Python是机器学习和深度学习的首选编程语言,但绝不是唯一.训练机器学习/深度学习模型并部署对外提供服务(尤其是通过浏览器)JavaScript 是一个不错的选择,市面上也出现了 ...
- URL转义特定字符
import java.net.URLDecoder; import java.net.URLEncoder; import java.nio.charset.Charset; // 实例代码 Str ...
- jQuery--基本事件总结
基本事件介绍 blur() 失去焦点 change() 改变(select) click() 单机 dbclick() 双击 error() 页面异常 focus() 获得焦点 focusin() j ...