甘肃龙网

  1. 首页 > 生活 > >

Vue数据双向绑定探究

生活百科绑定

前面的啰嗦话 ， 写一点吧 ， 或许就有点用呢
使用过vue的小伙伴都会感觉 ， 哇 ， 这个框架对开发者这么友好 ， 简直都要笑出声了 。
确实 ， 使用过vue的框架做开发的人都会感觉到 ， 以前写一大堆操作dom ， bom的东西 ， 现在用不着了 ， 对开发者来说更容易去注重对操作逻辑的思考和实现 ， 省了不少事儿呢！！！
我是直接从原生js ， jq的开发用过度到使用vue ， 对这个框架也是喜爱有加 ， 闲来无事 ， 去看了看它的一些实现原理 。
下面来介绍一下vue的一个非常"牛逼"的功能 ， 数据双向绑定 ， 也就是我们在项目里用到的v-model指令 。
v-model在vue官方文档上是介绍在"表单输入绑定"那一节 。
对于表单 ， 大家肯定用得都已经超级熟练了 ， 对于、和标签在项目里面使用都已经没话说了
官方提到的v-model是一个语法糖 ， 为什么这么说呢？下面看个例子：
<div id="test1"><input v-model="input"><span>input: {{ input }}</span></div>
如上 ， 是一个简单的使用v-model的双向绑定 ， 我们在改变input这个变量的值 ， 即在输入框中去写内容的时候 ， 在span标签内的插值()会同步更新我们刚刚输入的值
其实上面的也可以这样写：
<div id="test1"><input v-on:input="input = $event.target.value" v-bind:value=http://www.kingceram.com/post/'input'>input: {{ input }}


好了 ， 前面啰里啰嗦半天 ， 现在进入正题
想对比react和的双向绑定实现 ， 我也不清楚 ， 哈哈哈 ， 直接说vue吧 ， 不扯了
响应式系统
拿尤雨溪大佬做vue测试的的那个例子来说吧(购物车的例子)
<div id='app'><div><span>价格：</span><input v-model.number="price"></div><div><span>数量：</span><input v-model.number="quantity"></div><p>价格：{{ price }}</p><p>数量：{{ quantity }}</p><p>总计：{{ total }}</p></div>
data() {return {price: 5,quantity: 3}},computed: {total() {return this.price * this.quantity;}}
当我们在使用输入框的值的时候 ， 下面的total会更新 ， 我们对应输入值的变量也会更新
哇 ， 好神奇 ， 为什么呢 ， 这不是编程常规的工作方式！！！
因为我们用原生js写的时候是这样的：
let price = 5;let quantity = 3;let total = price * quantity;// 等于15吧price = 10;// 改变价格;console.log(total);// bingo ， 打印的还是15
我们需要在找一种办法 ， 把要运行计算的total放到别的时候去运行 ， 当我们的价格、数量变化的时候执行
let price = 5;let quantity = 3;let total = 0;let storage = [];// 储存将要计算的操作 ， 等到变量变化的时候去执行let target= () => { total = price * quantity;}function record () {storage.push(target);}function replay() {storage.forEach(run => run());}record();target();price = 10;console.log(total);// 依然是15replay();console.log(total);// 执行结果是30
目的达到 ， 但是这样肯定不是vue用来扩展使用的方式 ， 我们用ES6的class类来做一个可维护的扩展 ， 实现一个标准的观察者模式的依赖类
class Depend {constructor () {this.subscribers = [];}depend() {if(target && this,this.subscribers.includes(target)) {this.subscribers.push(target);}}notify() {this.subscribers.forEach(sub => sub());}}// 来执行上面写的classconst dep = new Depend();let price = 5;let quantity = 3;let total = 0;let target = () => { total = price * quantity };dep.depend();target();console.log(total);// total是15price = 10;console.log(total);// 因为没有执行target ， 依旧是15dep.notify();console.log(total);// 执行了存入的target ， total为30


上一篇：Post请求的3种编码格式：application/x-www-form

下一篇：angularjs 获取复选框的值_家园风水值怎么快速提升_天涯明月刀手游怎么拜