vue中的双向数据绑定原理,vuejs数据双向绑定原理
Vue是一个mvvm框架，即数据的双向绑定，即数据变化时，视图变化，视图变化时，数据同步变化。本文将通过实例详细讲解原理，有需要的可以参考。
目录
数据的变化反映到视图命令操作视图声明性操作视图摘要视图的变化反映到数据存在的问题。
数据的变化反应到视图
我们前面学过，数据劫持后，数据被修改后可以为所欲为，操作视图当然也可以。
命令式操作视图
目标：通过dom的原始操作，我们可以在P元素中每次显示name的最新值。
div id=应用程序
p/p
/div
脚本
let data={
姓名：小蓝同学，
年龄：18，
身高：180
}
//遍历每个属性
Object.keys(数据)。forEach((key)={
//键属性名
//数据[键]属性值
defineReactive(数据，键，数据[键])
})
函数定义有效(数据，键，值){
Object.defineProperty(数据，键，{
get(){
返回值
},
set(newVal){
值=新值
//当数据发生变化时，操作dom进行更新
document . query selector(# app p)。innerHTML=data.name
}
})
}
//第一次呈现
document . query selector(# app p)。innerHTML=data.name
/脚本
声明式操作视图
目标：我们将数据中name属性的值作为文本呈现在用v-text标记的P标记中。在vue中，我们称之为有标记的声明性渲染指令。
div id=应用程序
p v-text=name/p
/div
脚本
let data={
姓名：小蓝同学，
年龄：18，
身高：180
}
//遍历每个属性
Object.keys(数据)。forEach((key)={
//键属性名
//数据[键]属性值
//数据原始对象
defineReactive(data，key，data[key])
})
函数定义有效(数据，键，值){
Object.defineProperty(数据，键，{
get() {
返回值
},
set(newVal) {
值=新值
//当数据发生变化时，操作dom进行更新
编译()
}
})
}
//
函数编译(){
let app=document . getelementbyid( app )
//1.获取应用程序下的所有子元素
const nodes=app . child nodes//[text，input，text]
//2.遍历所有子元素
nodes.forEach(node={
//nodeType为1作为元素节点。
if (node.nodeType===1) {
const attrs=节点.属性
//遍历所有属性以查找v模型
Array.from(attrs)。forEach(属性={
常量目录名=属性节点名
const dataProp=attr.nodeValue
if (dirName===v-text) {
node.innerText=data[dataProp]
}
})
}
})
}
//第一次呈现
编译()
/脚本
小结
无论是指令还是插值表达式，这些都只是将数据反映到视图中的标签。通过标签，我们可以将数据的变化响应到相应的dom位置。
查找数据并将其绑定到dom的过程称为绑定。
视图的变化反应到数据
目标：将数据中消息属性对应的值渲染到输入中，修改输入值后，可以反向修改消息值。在vue系统中，v-model指令就是这样做的。让我们实现v-model的功能。
div id=应用程序
输入v-model=name /
/div
脚本
let data={
姓名：小蓝同学，
年龄：18，
身高：170
}
//遍历每个属性
Object.keys(数据)。forEach((key)={
//键属性名
//数据[键]属性值
//数据原始对象
defineReactive(数据，键，数据[键])
})
函数定义有效(数据，键，值){
Object.defineProperty(数据，键，{
get() {
返回值
},
set(newVal) {
//数据发生变化，操作数字正射影像图进行更新
if (newVal===value) {
返回
}
值=新值
编译()
}
})
}
//编译函数
函数编译(){
让app=document。getelementbyid( app )
//1.拿到应用下所有的子元素
常量节点=app。子节点//[文本，输入，文本]
//2.遍历所有的子元素
nodes.forEach(node={
//节点类型为一为元素节点
if (node.nodeType===1) {
常量属性=节点。属性
//遍历所有的软锰矿找到v型车
Array.from(attrs).forEach(属性={
常量目录名=属性节点名
const dataProp=attr.nodeValue
if (dirName===v-model) {
node.value=data[dataProp]
//视图变化反应到数据无非是事件监听反向修改
node.addEventListener(input ，(e)={
数据[数据滴]=e。目标值
})
}
})
}
})
}
//首次渲染
编译()
/脚本
现存的问题
无法做到精准更新
div id=应用程序
p v-text=name/p
p v-text=age/p
p v-text=name/p
/div
脚本
let data={
名称： 小兰同学，
年龄：18,
身高：180
}
//遍历每一个属性
对象.键(数据)。forEach((key)={
//键属性名
//数据[键]属性值
//数据原对象
defineReactive(data，key，data[key])
})
函数定义有效（数据，键，值){
Object.defineProperty(数据，键，{
get() {
返回值
},
set(newVal) {
//数据发生变化，操作数字正射影像图进行更新
if (newVal===value) {
返回
}
值=新值
编译()
}
})
}
//编译函数
函数编译(){
让app=document。getelementbyid( app )
//1.拿到应用下所有的子元素
常量节点=app。子节点//[文本，输入，文本]
//2.遍历所有的子元素
nodes.forEach(node={
//节点类型为一为元素节点
if (node.nodeType===1) {
常量属性=节点。属性
Array.from(attrs).forEach(属性={
常量目录名=属性节点名
const dataProp=attr.nodeValue
console.log(目录名，数据路径)
if (dirName===v-text) {
控制台。日志(` o更新了${dirName}指令，需要更新的属性为${dataProp} `)
node.innerText=data[dataProp]
}
})
}
})
}
//首次渲染
编译()
/脚本
以上就是深入了解某视频剪辑软件中双向数据绑定原理的详细内容，更多关于某视频剪辑软件双向数据绑定的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。