前端面试题整理——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进行通信的方式(怎么通信) ...
随机推荐
- svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件
基于Svelte3自定义组件Navbar+Tabbar沉浸式导航条|底部凸起菜单栏 Svelte 一种全新的构建用户界面的框架.当下热门的 Vue 和 React 在浏览器中需要做大量的工作,而 Sv ...
- think php 图像加水印
1.将下载好的字体引入至 thinkPHP 框架的public/static 下(这里我建了一个文件夹叫font) (1.) (2.) 2.将字体路径写入config.php中 'font'=&g ...
- laravel 数据验证规则
return [ 'accepted' => '必须为yes,on,1,true', 'active_url' => '是否是一个合法的url,基于PHP的checkdnsrr函数,因此也 ...
- Linux服务器 I/O 原理和流程
计算机I/OI/O在计算机中指Input/Output,IOPS (Input/Output Per Second)即每秒的输入输出量(或读写次数),是衡量磁盘性能的主要指标之一.IOPS是指单位时间 ...
- 云原生技术赋能ISV实现应用现代化
日前,由BP商业伙伴主办,中国开源云联盟和云原生应用现代化联盟协办的2021-2022云计算生态峰会成功举办.头部ISV代表.最终用户和云原生技术专家等与会各方围绕"云原生技术赋能ISV&q ...
- LGP6773题解
阴间状态,出题人是怎么想到的... 为啥lg题解全部都是直接丢状态不说是怎么想的啊.要是以后遇到阴间状态题该怎么想.jpg 首先通过观察,我们可以形象地定义染色:边权为 \(1\) 的边相当于将此边割 ...
- vue3-组件中使用setup函数获取vuex中的数据的新方式
传统方式 setup() { const store = useStore() //传统方式 const aName = computed(() => store.state.name) ret ...
- e值计算来了
e值该如何计算呢? 若关于ex幂级数展开 ex=1+x+x2/2!+x3/3!+•••+xn/n! 取x=1,有e=1+1/2+1/6+••• 接下来就是十分简单的编程 这里选用了python语言(当 ...
- Spark 在 Window 环境下的搭建
1.java/scala的安装 - 安装JDK下载: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21 ...
- VMware15安装 CentOS7 步骤