10分钟学习vue响应式更新机制及不使用框架实现简单的数据双向绑定

栏目: JavaScript · 发布时间: 5年前

内容简介:最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。单向数据流是指model中的数据发生改变时引起view的改变。双向数据绑定是指model中的数据发生改变时view的改变,view的改变也会引起model的改变。

最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。

2 单向数据流与数据双向绑定

单向数据流是指model中的数据发生改变时引起view的改变。

10分钟学习vue响应式更新机制及不使用框架实现简单的数据双向绑定

双向数据绑定是指model中的数据发生改变时view的改变,view的改变也会引起model的改变。

10分钟学习vue响应式更新机制及不使用框架实现简单的数据双向绑定
//这个是单向数据流,改变这个input的value值并不能是data中的text属性发生改变。
<input type="text" :value="text">
data:{
    return {
        text:'文本输入框'
    }
}
//这个是双向数据绑定,无论是修改model还是修改view都能引起另一方的改变。
<input type="text" v-model="text">
data:{
    return {
        text:'文本输入框'
    }
}
复制代码

3 vue中的数据双向绑定实现原理

vue给我们提供了实现数据双向绑定的两种语法糖,分别v-model和.sync修饰符,v-model用于为表单元素提供数据双向绑定,.sync修饰符用于为任意属性提供数据双向绑定,接下来我们来尝试不使用vue提供的语法糖,自己实现数据双向绑定。

要想view发生改变的时候引起model的改变首先要监听到view的改变,view发生改变时再去改变model,有了思路之后下面是代码实现。

//首先通过input事件监听视图的改变
<input type="text" :value="inputTitle" @input="onInput">
data:{
    return {
        text:'文本输入框'
    }
},
methods:{
    //视图发生改变的时候,将视图的值赋予模型的值,实现数据双向绑定
    onInput(event) {
        this.text=event.target.value;
    }
}
复制代码

4 vue中的单向数据流实现原理

vue的单向数据流涉及到Object.defineProperty()这个API。

Object.defineProperty用法:

//Object.defineProperty用于数据劫持,可以监听一个变量的读取与写入,并在发生读取与写入的时候执行回调函数
Object.defineProperty(obj,prop,desc);
//obj是要定义的对象,prop是要定义的属性名,desc是属性的描述符
复制代码

举例:

//定义一个对象并监听他的text属性的存值操作与取值操作
let data={};
Object.defineProperty(data,'text',{
    get() {
        console.log('取值操作');
    },
    set(newVal) {
        console.log('存值操作');
    }
});
console.log('data');
===>输出:
===>{}
===>取值操作
data.text='文本输入框';
===>输出
===>存值操作
复制代码

有了Object.defineProperty()这个API就可以监听model中数据的改变并在数据改变的时候修改视图达到单向数据流的效果。

5 实现一个简易的数据双向绑定

下面实现一个简易的数据双向绑定,目标是在修改view可以使model中的变量发生改变,修改model可以使视图发生改变。

//html
<div id="app">
    <input type="text" id="input">
</div>
//js
let input = document.querySelector('#input');
//定义model
let data={
    text:''
};
//监听model中text的变化,首先实现数据单向流
Object.defineProperty(data,text,{
   get() {
   
   },
   //text发生改变的时候,修改input元素的value值 
   set(newVal) {
        input.value=newVal;
   }
});
//监听input元素的改变并修改model的值,实现数据双向绑定
input.addEventLisener('input',event=> {
    data.text=event.target.value;
});
复制代码

至此就实现了简易的数据双向绑定,可以在控制台中修改data.text的值来查看视图是否发生改变,修改input元素的值在控制台中打印data.text查看model是否发生改变。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

沸腾十五年

沸腾十五年

林军 / 中信出版社 / 2009-7 / 59.00

覆雨翻云的中国网事; 荡气回肠的产业传奇;虚拟世界的真实讲述;万象网络的还原走笔。 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本书记录了一群在中国创造属于自己历史的人和他们的故事,他们是中国互联网自1995年兴起的波澜壮阔中的弄潮儿和财富新贵的代表:马化腾、丁磊、张朝阳、马云、陈天桥、李彦宏、史玉柱、田溯宁、张树新、王志东、王峻涛、雷军、......一起来看看 《沸腾十五年》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具