Vue双向绑定实现

最新推荐文章于 2024-05-28 00:19:30 发布
最新推荐文章于 2024-05-28 00:19:30 发布
阅读量5k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlfandzy/article/details/79754758
版权

昨天接到一个电话面试，上来第一个问题就是Vue双向绑定的原理。当时我并不知道如何监听数据层到视图层的变化，于是没答上来，挂电话后，我赶忙查了下资料，主要思路有如下三种。

1.发布者-订阅者模式（backbone.js）

思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素。

2.脏值检查（angular.js）

思路：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测，大致如下：

  • DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

  • XHR响应事件 ( $http )

  • 浏览器Location变更事件 ( $location )

  • Timer事件( $timeout , $interval )

  • 执行 $digest() 或 $apply()

3.数据劫持（Vue.js）

思路： vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。


Object.defineProperty()：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

var obj = {};
    Object.defineProperty(obj, 'hello', {
        get: function() {
            console.log('get val:'+ val);
            return val;
     　 },
    　　set: function(newVal) {
            val = newVal;
            console.log('set val:'+ val);
        }
    });
obj.hello='111';//控制台打印set val:111
obj.hello; //控制台打印get val:111

当获取hello属性时，触发get；设置hello值时，触发set；这就是vue实现双向绑定的核心

完整代码如下

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >v-model </ title >
</ head >

< body >
< div id= 'app' >
< h2 >{{title}} </ h2 >
< input id= 'i' v-model= 'text' type= "text" >
< h1 >{{text}} </ h1 >
< button v-on:click= 'clickMe' >click me </ button >
</ div >
< script >
//Dom类 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图
//并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
class Doms {
constructor( node, vm) {
if ( node) {
this. $frag = this. nodeToFragment( node, vm)
return this. $frag
}
}
nodeToFragment( node, vm) { //将dom转换成fragment
var frag = document. createDocumentFragment()
var child;
while ( child = node. firstChild) {
this. compileElement( child, vm)
frag. appendChild( child)
}
return frag
}
compileElement( node, vm) { //获取v-model属性,给dom赋值
var reg = / \{\{ ( . * ) \}\} / //匹配双括号里面的任何字符
if ( node. nodeType === 1) { //element元素
var attr = node. attributes;
for ( var i = 0; i < attr. length; i++) {
if ( attr[ i]. nodeName == 'v-model') {
var name = attr[ i]. nodeValue //获取绑定的key
node. addEventListener( 'input', function ( e) {
vm[ name] = e. target. value //触发set方法
})
new Watcher( vm, node, name, 'value')
} else if ( attr[ i]. nodeName. includes( ':')) {
var eventType = attr[ i]. nodeName. split( ':')[ 1] //事件名
var cb = vm. methods && vm. methods[ attr[ i]. nodeValue]
if ( eventType && cb) {
node. addEventListener( eventType, cb. bind( vm), false)
}
}
}
if ( node. childNodes && node. childNodes. length) { //如果还有子节点 递归
[... node. childNodes]. forEach( n => this. compileElement( n, vm))
}
}
if ( node. nodeType === 3) { //text
if ( reg. test( node. nodeValue)) {
var name = RegExp. $1
name = name. trim()
new Watcher( vm, node, name, 'nodeValue')
}
}
}
}
class Vue { //Vue类
constructor( params) {
this. data = params. data //获取属性
this. methods = params. methods //获取方法
this. observe( params. data, this) //监听属性
var id = params. el;
var dom = new Doms( document. getElementById( id), this)
document. getElementById( id). appendChild( dom)
params. mounted. call( this)
}
observe( obj, vm) { //读取data内属性，并监听
if (! obj || typeof obj !== 'object') return
Object. keys( obj). forEach( key => this. defineReactive( vm, key, obj[ key]))
}
defineReactive( obj, key, val) { //利用Object.defineProperty监听属性改变
var dep = new Dep()
Object. defineProperty( obj, key, {
get: function () {
if ( Dep. target) { //添加订阅者watcher到主题对象Dep
dep. addSub( Dep. target)
}
return val
},
set: function ( newVal) {
if ( newVal === val) return
val = newVal
console. log( val)
//作为发布者发布通知
dep. notify()
}
})
}

}
class Dep { //收集订阅者的容器类
constructor() {
this. subs = []
}
addSub( sub) {
this. subs. push( sub)
}
notify() {
this. subs. forEach( sub => sub. update())
}
}

class Watcher {
constructor( vm, node, name, type) {
Dep. target = this
this. name = name
this. node = node
this. vm = vm
this. type = type
this. update()
Dep. target = null
}
update() {
this. get()
this. node[ this. type] = this. value //订阅者执行响应操作
}
get() {
this. value = this. vm[ this. name] //触发响应属性的get
}
}

var vm = new Vue({
el: 'app',
data: {
text: 'lyl',
title: 'hello world'
},
methods: {
clickMe() {
this. title = 'hello world'
}
},
mounted() {
setTimeout(() => {
this. title = '你好'
}, 1000);
}
})
< / script >
</ body >

</ html >



GitHub地址：https://github.com/ChrisLuckComes/Vue2WayBind
wlfandzy
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 核心之数据双向绑定
qq_35430000的博客
03-09 2470
0 到 1 掌握：Vue 核心之数据双向绑定
Vue是如何实现数据双向绑定的？
csdssdn的博客
06-20 5853
有没有想过，我们在做原生页面开发时，有涉及到“数据绑定“的概念吗？答案肯定是有的，比如下面的例子： 通过 JavaScript 控制 DOM 的展示，就是数据（Data）到模板（DOM）的绑定，这就是数据单向绑定。而双向绑定就是在这个基础上，又扩展了反向的绑定效果，就是模板到数据的绑定。 上面的例子扩展以下： 我们将与单向绑定的却别是，数据与模板是相互影响的，一方发生变化，另一方立即做出更新。在这个简单的例子中，我们认识了双向绑定，Vue便是在此概念下进行模块化抽象封装。上面的例子中，我们看到
【Vue.js基础】8、表单处理：双向数据绑定
最新发布
weixin_52938153的博客
05-28 598
Vue.js是一个由尤雨溪（Evan You）开发的渐进式JavaScript框架，专注于构建用户界面。凭借其简单易用的API和灵活的架构，Vue.js能够轻松集成到项目中，也可以用于开发复杂的单页应用（SPA）。Vue.js采用双向数据绑定和基于组件的开发模式，显著提升了开发效率和代码复用性。其丰富的生态系统，包括Vue CLI、Vue Router和Vuex等工具，使得Vue.js成为现代Web开发中备受欢迎的选择。无论是初学者还是经验丰富的开发者，Vue.js都提供了强大的功能和极佳的开发体验。
用JS简单实现Vue的双向绑定
编程界明世隐的博客
04-08 2597
Vue实现数据双向绑定原理： 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用Object.defineProperty()将它们转为getter/setter。 这里来简单模拟一下双向绑定。 特点 1.比如input被监视，当输入发送改变时，...
vue双向数据绑定的实现
weixin_52223050的博客
11-05 2687
vue数据双向绑定原理
vue双向绑定实现解析
06-20
通过带着读者手写简化版的vue双向绑定，了解vue双向绑定的核心原理; 从零开始实现vue的双向绑定，让大家可以更好的理解双向绑定的逻辑走向； 本项目依次实现了下面的功能 1、自定义的vue类 2、模板解析 Compile 类 3...
Vue双向绑定实现原理与方法详解
10-15
主要介绍了Vue双向绑定实现原理与方法,结合实例形式详细分析了发布者-订阅者模式、脏值检查、数据劫持与双向绑定相关实现技巧,需要的朋友可以参考下
Vue 3.0双向绑定原理的实现方法
10-16
主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 实现双向绑定的四种方法
08-27
Vue 实现双向绑定的四种方法 Vue 框架中，双向绑定是指视图层和数据层之间的数据同步机制。使用 Vue 实现双向绑定的方法有多种，本文将介绍四种常见的方法：v-model 指令、.sync 修饰符、model 属性和 vue-better-...
Vue双向数据绑定的原理解析及代码实现
qq_33043025的博客
05-04 2076
参考：百度安全验证 本文转载自【微信公众号：手机电脑双黑客，ID：heikestudio】，经微信公众号授权转载，如需转载与原文作者联系 不多说了，我们直接来看看Vue的双向绑定机制从最简单到最终实现版本。 一、访问器属性 大家可能都知道， 关于Vue的双向绑定， 核心是Object.defineProperty()方法，那接下来我们就简单介绍一下！ 语法： Object.defineProperty(obj,prop,descriptor) 其中： obj 要在其上定义属性的对象
vue双向绑定简单实现
05-10
vue双向绑定的原理实现·············································· ·····························
vue项目优化之长列表性能优化(2)(Object.defineProperty)
jieweiwujie的博客
09-06 534
Object.freeze列表数据处理
Vue的双向绑定原理
weixin_42395736的博客
03-08 646
MVVM模型 M：模型（Model)：对应data中的数据 V：视图(View)：模板 VM：视图模型(ViewModel)：Vue实例对象 分解任务 <div id="app"> <input type="text" v-model="text"> {{text}} </div> 拟实现： 1、输入框以及文本节点与data中的数据绑定 2、输入框内容变化时，data中的数据同步变化。即view => model的变化。 3、data中的
Vue - 如何实现一个双向绑定
嘿嘿
01-19 1399
JS - 如何实现一个类似 vue 的双向绑定Github JS 实现代码 先来看一张图： 这张图我做个简要的描述： 首先创建一个实例对象，分别触发了 compile 解析指令 和 observer 监听器， compile 解析指令则循环递归 解析 类似 v-model 这样的指令，初始化 data 绑定数据，同时每个节点创建一个订阅者 watcher ， obse...
Vue：实现双向数据绑定
QD的博客
05-03 3407
参考剖析Vue原理&实现双向绑定MVVM javascript实现数据双向绑定的三种方式Vue实现双向数据绑定的方式Vue是如何实现双向数据绑定的呢？答案是前端数据劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到数据的变化，从而更新绑定的元素的值。实现对象属性变化绑定到UI大概的思路是： 1. 确定
Vue--双向绑定
好记性不如烂笔头~
05-30 492
在React或者Vue这类MVVM框架中使用双向绑定是很常见的需求，最近项目中在使用Vue，今天来谈一谈Vue中双向绑定的实现。 先来说几句废话：什么是双向绑定？ 把Model中的数据绑定到View中，然后更新Model时View会自动跟新，这叫单向绑定，而当用户改变View时Model中数据也能自动更新时，这叫双向绑定！ 如何实现Vue中的双向绑定？有两种方式可供参考： $emit 自定义事件处...
vue组件实现双向绑定
weixin_43729025的博客
09-06 2554
实现vue组件双向绑定 vue组件双向绑定可以使用传参方式父传子、子传父的传统方式去绑定，但是本篇文章将记录如何使用.async、v-model的形式完成父子组件的双向绑定。 使用.async双向绑定 在父组件以 :[子组件变量].sync="[父组件变量名]"的格式绑定 <template> <div class="index"> <!-- 写法一：绑定单个值 --> <div @click="setChild">我是父元素:{{ m
vue中v-model绑定的变量赋值给了另一个变量后，两个变量同时改变
weixin_44675256的博客
05-15 8243
vue中v-model绑定的变量赋值给了另一个变量后，两个变量同时改变首先想说一下那么先来看一下问题背景解决总结 首先想说一下 作为一个初学者，每次遇到一个半天解决不了的问题，等到最后解决了就会发现这根本不是什么大问题，真的就是基础不牢固！所以巩固基础很重要。 那么先来看一下问题背景 我们要做一个 搜索+分页 的功能，使用vue 我们将分页控件绑定了点击事件，点击后提交v-model绑定的form...
vue双向绑定如何实现
06-08
Vue双向绑定的实现依赖于其核心库中的响应式系统。当数据发生变化时，Vue会自动更新视图，反之亦然。 具体实现过程如下： 1. Vue会通过Object.defineProperty()方法来劫持data对象中的每个属性，并将其转化为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值