vue中view-model双向绑定基础原理解析

2024-10-26 09:39:52

利用Object.defineProperty进行数据劫持

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue V-M</title>
</head>
<body>
  <div id="ap">
    <input id="input" type="text"><br/>
    <div id="text"></div><br/>
    <button id="button" type="button">打印</button>
  </div>
  <script>
    var input = document.querySelector('#input');
    var text = document.querySelector("#text");
    var button = document.querySelector("#button");
    var data = {value:''};

    Object.defineProperty(data, 'value', {
      get:function(){
        console.log('get value ',input.value);
        return input.value;
      },
      set:function(value){
        console.log('set value ',value);
        text.innerHTML = value;
        input.value = value;
      }
    });

    input.addEventListener("keyup", function (e) {
      data.value = e.target.value;
    }, false)

    button.addEventListener('click',function(e){
      console.log('data ',data);
    },false);
  </script>
</body>
</html>

vue双向绑定的原理总结

MVVM

视图模型双向绑定，是Model-View-ViewModel的缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。以前是操作DOM结构更新视图，现在是数据驱动视图。

优点:
1.低耦合。视图（View）可以独立于Model变化和修改，一个Model可以绑定到不同的View上，当View变化的时候Model可以不变化，当Model变化的时候View也可以不变；
2.可重用性。你可以把一些视图逻辑放在一个Model里面，让很多View重用这段视图逻辑。
3.独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。
4.可测试。

数据(model)变化主动触发ui(view)变化，同时ui(view)变化主动触发数据(model)变化，当然这里的ui变化指定表单中的用户输入，可通俗的理解为：在单向绑定的基础上给可输入元素（input、textarea等）添加change(input)事件，来动态修改model和view

vue当中的双向绑定

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

使用 v-model / .sync 实现，v-model是 v-bind:value 和 v-on:input 的语法糖

v-bind:value 实现了 data ⇒ UI 的单向绑定
v-on:input 实现了 UI ⇒ data 的单向绑定

引申出这两个单向绑定如何实现

v-bind的实现

通过 Object.defineProperty API 给 data 创建 getter 和 setter，用于监听 data 的改变，data 一变就会安排改变 UI

v-on的实现

通过 template compiler 给 DOM 添加事件监听，DOM input 的值变了就会去修改 data。

Compile（指令解析器）

Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新视图

Observer（数据监听器）

Observer的核心是通过Object.defineProprtty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher

Watcher（订阅者）

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：

在自身实例化时往属性订阅器(dep)里面添加自己
自身必须有一个update()方法
待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调

到此这篇关于vue中view-model双向绑定基础原理的文章就介绍到这了,更多相关vue中view-model双向绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue中的基础过渡动画及实现原理解析

前言在日常开发中动画是必不可少的一部分不仅能让元素直接的切换显得更加自然同时也能极大的增强用户体验因此在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果同时也是支持JS的不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.keyframes动画以及实现的原理过渡动画实现的原理 1.首先最基础的一点在于如果你想要在单元素/单个组件之中实现过渡动画那么你需要在元素/组件所在的HTML标签之外包裹一层 <transition>标签
Vue基础语法知识梳理下篇

目录计算属性键盘事件监视属性绑定样式 class样式 style样式条件渲染 v-if v-show 列表渲染 v-for指令 vue监测data中的数据收集表单数据计算属性定义:要用的属性不存在,要通过已有属性计算得来原理:底层借助了Objcet.defineProperty方法提供的getter和setter get函数什么时候执行? (1).初次读取时会执行一次 (2).当依赖的数据发生改变时会被再次调用注: 计算属性最终会出现在vm上,直接读取使用即可如果计算属性要
vue-router相关基础知识及工作原理

前言今天面试被问到 vue的动态路由,我竟然没有回答上来,感觉不是什么难得问题.好久没有看vue-router的文档,很多用的东西和概念没有对上.回来一看什么是动态路由就傻眼了.看来有必要把vue -router相关知识总结一下,好丢人的感觉. 单页面应用的工作原理我理解的单页面工作原理是通过浏览器URL的#后面的hash变化就会引起页面变化的特性来把页面分成不同的小模块,然后通过修改hash来让页面展示我们想让看到的内容. 那么为什么hash的不同,为什么会影响页面的展示呢?浏览器在这里
vue中view-model双向绑定基础原理解析

利用Object.defineProperty进行数据劫持代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue
全面解析vue中的数据双向绑定

1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable
自定义Vue中的v-module双向绑定的实现

v-module 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件,父组件监听 input 事件中传递的 value 值,并存储在父组件 data 中:然后父组件再通过 prop 的形式传递给子组件 value 值,再子组件中绑定 input 的 value 属性即可. 我们着手实现一遍: 子组件传值首先子组件需要一个 input 标签,这个 input 标签需要绑定 input 事件,$emit 触发父组件的 input 事件,通过这种方法子组件传递值给父组件 <in
vue中的computed 和 vm.$data 原理解析

目录官方一个最简单的例子如下先看看 initData 这条线我们具体看看defineReactive的源代码在初始化computed时,有2个地方需要去关注我们看看Watcher的构造函数使用vuex中store中的数据,基本上离不开vue中一个常用的属性computed. 官方一个最简单的例子如下 var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { //
vue中自定义组件双向绑定的三种方法总结

目录 1. 父组件使用v-model绑定 2. 父组件使用v-model绑定 3. 父组件使用:name.sync绑定官方文档地址 1. 父组件使用v-model绑定子组件props接收参数,$emit触发input事件传值 2. 父组件使用v-model绑定子组件props接收参数,参数名称可以自定义,$emit触发方法传值,方法名称可以自定义,通过model属性将prop参数名和事件名进行关联 3. 父组件使用:name.sync绑定子组件props接收参数名称为name,$emi
Vue双向绑定实现原理与方法详解

本文实例讲述了Vue双向绑定实现原理与方法.分享给大家供大家参考,具体如下: 昨天接到一个电话面试,上来第一个问题就是Vue双向绑定的原理.当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种. 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入
解析Vue2.0双向绑定实现原理

一.实现双向绑定的做法前端MVVM最令人激动的就是双向绑定机制了,实现双向数据绑定的做法大致有如下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素. 2.脏值检查(angular
vue 自定义组件 v-model双向绑定、父子组件同步通信的多种写法

上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo
详解vue中v-model和v-bind绑定数据的异同

vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data
vue实现简单数据双向绑定

本文实例为大家分享了vue实现简单数据双向绑定的具体代码,供大家参考,具体内容如下这里是简单的实现,有助于新手理解消化,当然vue要实现双向数据代理不可缺少,期待后续在更新 vue双向数据绑定 -> Object.defineProperty() //2.0核心语法 -> 数据代理 -> 双向绑定 -> 订阅发布模式 compile-> 模版解析 (template模版 html 指令 {{表达式}}) observer-> 观察者(订阅发布) data里的所有的属性