Vue实现数据双向绑定

如题所述

举报该问题

其他回答

第1个回答 2024-09-04

1、vue双向数据绑定原理

vue双向数据绑定原理是通过**数据劫持**结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

2、核心

关于Vue双向数据绑定，其核心是Object.defineProperty()方法；

3、介绍一下Object.defineProperty()方法

Object.defineProperty(obj,prop,descriptor)，这个语法内有三个参数，分别为obj（要定义其上属性的对象）prop（要定义或修改的属性）descriptor（具体的改变方法）

简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

v-model原理(掌握)

v-model其实是个语法糖，它背后本质上包含了两个操作：

v-bind绑定input元素的value属性

v-on指令绑定input元素的input事件

<inputtype="text"v-model="msg"/><inputtype="text"v-bind:value="msg"v-on:input="msg=$event.target.value"/>//下拉框案列<body><divid="app"><selectv-model="mySelect"><optionvalue="orange">橙子</option><optionvalue="apple">苹果</option><optionvalue="banana">香蕉</option></select></div></body><script>constvm=newVue({el:'#app',data:{mySelect:'banana'}})</script>```

<divid="app"><inputtype="text"v-model="word"><h2>{{word}}</h2></div></body></html><scriptsrc="./lib/vue.js"></script><script>varvm=newVue({el:"#app",data:{word:"helloVue"}})</script>

<inputtype="text"id="ipt"value=""oninput="changeData(this.value)"><h2id="title"></h2><script>//声明一个data对象，专门用来放数据vardata={};//获取元素vartitle=document.getElementById("title");vaript=document.getElementById("ipt");//定义对象属性Object.defineProperty(data,"msg",{get:function(){return"helloworld"},set:function(newValue){//自动捕获被修改后最新的值title.innerHTML=newValue;txt.value=newValue;}})//最初的赋值title.innerHTML=data.msg;ipt.value=data.msg;//拿到input的数据，修改msg，当msg修改时，会触发set方法functionchangeData(value){data.msg=value;}</script>

vue的双向数据绑定原理是什么？

vue数据双向绑定是通过数据劫持结合“发布者-订阅者模式”的方式来实现的。vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通过Object.defineProperty()对属性设置一个setter函数，当数据改变了就会来触发这个函数。