vue2和vue3数据绑定的区别,vue3 数据双向绑定
本文主要介绍vue2和vue3的双向数据绑定的区别，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
vue 2和vue3之间双向数据绑定的区别。Vue2和Vue3之间的双向数据绑定存在问题。双向数据绑定的原理Proxyvue语法：数据的双向绑定1。说明v-模型2 . v-模型和修改器3 . v-模型和定制组件
vue2与vue3双向数据绑定区别
的新响应机制采用了ES6的ProxyApi，并放弃了Object.defineProperty()。
Vue2双向数据绑定存在的问题
关于对象：Vue无法检测属性的添加或删除。因为Vue将在初始化实例时对属性执行getter/setter转换，所以属性必须存在于数据对象上，Vue才能将其转换为responsive。
关于数组：VUE无法检测到以下数组的变化：
当您使用索引直接设置数组项时，例如：vm.items[indexOfItem]=newValue
修改数组长度时，例如：vm.items.length=newLength
在官网的深度回应原理一章中，有详细说明。对于以上两种情况的解决方法，官网也给出了答案，就是用set的方法。
原理
Vue2.0使用Object.defineProperty对象和对象属性的劫持发布订阅模式，以便在数据发生变化时直接通知变化并驱动视图更新。
type= text id= in /输入值为：span id=out/span。
var int=document . getelementbyid( in )；
var out=document . getelementbyid( out )；
//定义一个对象
const data={name:peak ，年龄：10}
//遍历对象，劫持对象的属性。
Object.keys(数据)。forEach((key)={
Object.defineProperty(数据，键，{
//当且仅当其enumerable为true时，此属性才能出现在对象的enumeration属性中。
可枚举：真，
//当且仅当属性的可配置为true时，才能更改属性描述符，并从相应的对象中删除该属性。
可配置：真，
Get: ()={ //为属性提供getter的方法
console.info(`get ${key}-${val} `)
返回val
},
Set: (newVal)={ //为属性提供setter的方法
//当属性值改变时，我们可以执行额外的操作，比如调用侦听器。
If(new val==val){//如果没有变化，则不做任何其他操作
返回；
}
Console.log(`触发视图更新函数$ { new val } `)；
out.innerHTML=newVal
},
});
});
int.addEventListener(input ，函数(e) {
obj . name=e . target . value；
})
Data.age=25 //触发set方法
vue3.0双向数据绑定Proxy
Vue3.0中的响应公式采用了ES6中的代理方法。
代理对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等。).
语法：
const p=新代理(目标，处理程序)
target参数指示要由代理包装的对象(它可以是任何类型的对象，包括本机数组、函数，甚至是另一个代理)
参数handler是以函数为属性的对象，每个属性中的函数定义了agent P在执行各种操作时的行为。
让obj={
答：1，
乙：2
}
const proxy=新代理(obj，{
get:函数(目标、道具、接收者){
返回目标中的道具？目标[道具] : 0
},
set:函数(目标、属性、值、接收者){
目标[道具]=666
}
})
console.log(proxy.a) //1
console.log(proxy.c) //0
proxy.a=10
console.log(proxy.a) //666
对象b=10
Console.log(proxy.b) //不是666而是10
在上面的代码中，obj是我们要代理的目标对象，get和set方法是参数处理程序的两个属性，如下所示：
Handler.get()接收三个参数，第一个参数target是代理的目标对象，第二个参数prop是代理的目标对象的属性，第三个参数是代理或者继承代理的对象，通常是代理本身。Handler.set()接收四个参数，其中三个与get方法相同，除了一个额外的值指示新的属性值。上面的代码表示在访问proxy的属性时，截取并判断该属性是否是目标对象的属性，如果是，则返回其值，否则返回0。
当代理上的属性被重写时，重写的属性被赋值为666。
注意：此时劫持数据只是劫持代理对象，与原对象obj无关。如果你操作obj，就不会被监控。
使用代理实现简单版本的数据响应；
身体
h2 id=app/h2
输入id=input type=text /
/body
let app=document . getelementbyid( app )
let input=document . getelementbyid( input )
Let obj={//源数据
文本：“你好，世界”
}
let proxy=new Proxy(obj，{
Set: function (target，prop，value){//输入事件触发劫持和更新方法。
目标[属性]=值
更新(值)
}
})
函数update(value){ //update方法用于同步dom更新。
app.innerHTML=value
输入值=值
}
输入。AddEventListener (input ，function(e){//侦听输入数据中的更改并修改代理的值
proxy.text=e .目标.值
})
Proxy.text=obj.text //初始化源数据
vue语法：数据的双向绑定
1.指令v-model
使用v-model可以为输入元素创建数据双向绑定，它会根据元素的类型自动选择正确的方法来更新元素。下面的代码演示了单行文本框、多行文本框、单选按钮、复选框和下拉选择框。
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题说明v-型号/标题
/头
身体
div id=应用程序
H31。单行文本框/h3
输入type= text v-model= singleText style= width:240 px；
p{{singleText}}/p
H3。多行文本框/h3
textarea v-model= multiText style= width:240 px；/textarea
p{{multiText}}/p
H3。收音机盒/h3
！-因为点击选中的单项选项不能取消其选中状态，所以一般没有使用单项选项的场景。设置v-model共享一个变量(radioValue)可以达到RadioGroup-的效果
Input= ra type= radio value=张三 v-model=radioValue
张三
输入= rb 类型= radio 值= Lisi v-model=radioValue
标签= rb b. Lisi /label
p{{radioValue}}/p
H34。单个复选框/h3
！-单个复选框用于在真和假之间切换-
输入id= c type= checkbox v-model= toggle value
Label= c 哒哒哒/label
p{{toggleValue}}/p
H35。多个复选框/h3
！-多个复选框，v模型接受数组类型的变量-
输入id= ca type= checkbox value= AAA v-model= checked values
的标签=caAAAA/label
输入id= CB type= checkbox value= BBB v-model= checked values
的标签=cbBBBB/label
输入id= cc type= checkbox value= CCC v-model= checked values
的标签=ccCCCC/label
p{{checkedValues.join(，)}}/p
H3。单一下拉框/h3
select v-model=singleSelect
！-如果未设置value value，选项节点的文本值将被视为value value-
期权价值=张三张三/期权
选项4/选项
/选择
p{{singleSelect}}/p
H37。多个下拉选择框/h3
选择多个垂直模式=multiSelect
！-按住Ctrl执行多选-
选项值=1种语言/选项
选项值=2数学/选项
选项值=3历史/选项
选项：value=4 地理位置/选项
/选择
p{{multiSelect.join(，)}}/p
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 16/dist/vue . min . js /script
脚本
var app=新Vue({
埃尔： #app ，
data(){
返回{
singleText: ，
多文本：，
辐射值：，
toggleValue:false，
检查的值：[],
单选：张三，
多选：[1,3]
}
},
方法：{
}
});
/脚本
/body
/html
2.v-model与修饰符
修饰符可用版本说明。懒惰的所有将用户输入的数据赋值于变量的时间有输入时延迟到数据改变时。数字所有自动转换用户输入为数值类型。整齐所有自动过滤用户输入的首尾的空白字符下面的代码展示了整齐和数字的简单用法。
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题v模型与修饰符/标题
/头
身体
div id=应用程序
输入类型= text 垂直模型。修剪。number= text @ keyup= handle keyup
/div
脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2。5 .16/区/区。量滴js /脚本
脚本
var应用=新Vue({
埃尔： #app ，
数据：()=({
文本：""
}),
方法：{
handleKeyUp(事件){
console.log(this.text，typeof this.text)
}
}
});
/脚本
/body
/html
3.v-model与自定义组件
在自定义组件中，值属性和投入事件尤为重要，值属性用于接收外部传入的值以更新组件内部的状态，输入事件由开发者决定在什么事件调用。
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题v模型与修饰符/标题
/头
身体
div id=应用程序
！-自定义组件-
自定义屏幕v-model= text /自定义屏幕英国铁路公司
输入类型= text 垂直模型。修剪。number= text
/div
脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2。5 .16/区/区。量滴js /脚本
脚本
Vue.component(自定义屏幕,{
//使用价值属性接收外部传入的值
道具：[值],
方法：{
handleReset(){
console.log(重置为\\);
这个. emit(input ， )；//使用$emit发送投入事件，并将目标值作为参数传出
}
},
模板：" div\n "
氘输入值为：{{value}}/h2\n
button @click=handleReset 重置为空/button\n
/div
})
var应用=新Vue({
埃尔： #app ，
数据：()=({
文本：""
}),
方法：{
}
});
/脚本
/body
/html
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。