vue响应式原理和双向绑定,vue2.0响应式原理
Vue最独特的特征之一是它的非侵入式响应系统。下面主要介绍vue响应原理和双向数据的相关信息。有需要的朋友可以参考一下。
了解object.defineProperty实现响应
确切地知道观察者/监视者/dep指的是什么。
了解发布-订阅模型及其解决的具体问题。
Javascript中实现数据响应一般有两种方案，分别对应vue2.x和vue3.x使用的方式。它们是：
对象拦截(vue2.x) Object.defineProperty
整体对象代理(vue3.x)代理
提示：以下是本文的主要内容，以下案例可供参考。
vue-响应式是什么？
Vue最独特的特征之一是它的非侵入式响应系统。数据模型只是普通的JavaScript对象。当您修改它们时，视图将会更新。这使得状态管理非常简单明了，但是理解它是如何工作的同样重要，这样可以避免一些常见的问题。在本章中，我们将学习
Vue响应系统的底层细节。
vue-响应式如何实现的？
数据响应性：数据模型只是一个普通的JavaScript对象，当我们修改数据时，视图会更新，避免了频繁的Dom操作，提高了开发效率。这与Jquery不同，Jquery是一种频繁的DOM操作。
对双向数据绑定的理解
改数据，改视图，改视图，改数据(通过这句话，可以看出双向绑定包含了数据响应的内容)。
我们可以使用v-model在表单元素上创建双向数据绑定。
数据驱动是Vue最独特的功能之一。
在开发过程中，我们只需要关注数据本身，而不需要关注数据是如何渲染到视图中的。主流的MVVM框架已经实现了数据响应和双向绑定，所以它们可以将数据绑定到DOM。
在vue.js中，所谓的数据驱动是指当数据发生变化时，用户界面也随之变化，开发者不需要手动修改dom。
对数据驱动的理解：
那么vuejs是如何实现这种数据驱动的呢？
Vue实现双向数据绑定主要是采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty()劫持各种属性的setter和getter，在数据发生变化时向订阅者发布消息，并触发相应的监控回调。当一个普通的Javascript对象作为它的数据选项传递给Vue实例时，Vue将遍历它的属性，并使用Object.defineProperty将它们转换为Getter/setter。Getter/setter对用户是不可见的，但在内部，它们让Vue跟踪依赖关系，并在属性被访问和修改时通知更改。
vue的数据双向绑定
MVVM作为数据绑定的入口，集成了观察器、编译器和观察器。观察者监控自己模型的数据变化，编译编译好的模板指令(在vue中，用来解析{{}})。最后，使用Watcher在观察者和编译器之间搭建一座沟通的桥梁，从而实现数据的改变——视图的更新。查看交互更改(输入)-数据模型更改双向绑定效果。
对vue-双向数据的分析？/v-model 双向数据绑定的原理
代码如下(示例):
脚本
//在有值的情况下写入对象
let data={
姓名：李白，
年龄：18岁
}
Object.keys(数据)。forEach(key={
defineReactiveProperty(data，key，data[key])
})
函数defineReactiveProperty(数据，键，值){
Object.defineProperty(数据，键，{
//获取获取
get() {
返回值
},
//设置赋值
设置(新值){
if (newVaue===value) {
返回
}
价值=新价值
编译()
}
})
}
编译()
/脚本
/body
/html
函数compine () {
//通过document.queryselect (# app )获取app下的所有子元素。子节点
const nodes=document . query selector(# app)。子节点
//输出这个值。当前值是分层嵌套数组。我们使用foreach
//console.log(节点)
nodes.forEach(item={
//再次输出item html输入type= text v-model= name 是一个输入输入框。
//console.log(item)
//过滤掉当前标签，因为节点的这个输出会把space设置为 text nodeType为3，而label nodetype为1，if判断为有标签。
if (item.nodeType===1){
const attrs=item.attributes
//console.log (attrs) {0: type，1: v-model，type: type，v-model: v-model，length: 2}返回1是数组
Array.from(attrs)。forEach( arr={
//console . log(arr)//tex gt= text v-mode: name ，筛选出这个v-mode。
if (arr.nodeName===v-model){
item.value=data[arr.nodeValue]
item.addEventListener(input ，e={
console.log(e.target.value)
//
数据[数组节点值]=e .目标值
})
}
})
}
})
}
总结
数据响应的实现无非是对象属性拦截。我们使用Object.defineProperty来实现它，并在vue3中制作它
通过代理对象代理方案对其进行优化。
采访书中提到的一些专业术语
观察对象是指将数据处理成响应的对象。
Watcher实际上是指数据发生变化后的更新功能(vue中有两种watcher，一种是用来更新视图的watcher，另一种是通过watch配置项声明的watcher)。
Dep是指集合更新函数和触发发布和订阅实现的更新函数的对象。
指令实现的核心无非就是通过模板编译找到logo，然后把数据捆绑起来，等数据发生变化后再放上去。
发布模式的本质是解决一对多的问题，实现vue发生变化后数据的准确更新。
关于vue响应式原理和双向数据的这篇文章到此为止。关于vue响应式原理和双向数据的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。