当前位置：首页 > 网站源码 > 正文内容

vue的响应式原理和数据绑定（如何理解vue数据双向绑定原理）

网站源码2年前 (2023-01-21)925

本篇文章给大家谈谈vue的响应式原理和数据绑定，以及如何理解vue数据双向绑定原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、vue数据双向绑定的原理+响应式原理
2、vue响应式原理是什么？
3、vue响应式原理是什么?
4、能说说vue的响应式原理吗？

vue数据双向绑定的原理+响应式原理

双向绑定：

数据变化更新视图 view = model 利用Object.defineProperty的get、set函数对数据更改、读取进行监听。如果数据改变就通知watcher进行重新渲染页面

视图变化更新数据 model = view 利用事件监听，通过target.value拿到新值赋值给data

数据变化更新视图关键在于如何知道数据发生了变化，数据变化了通知视图进行更新

让数据变得能监测，需要使用Object.defineProperty中的get、set函数

let car = {}

let val = 3000

Object.defineProperty(car, 'price', {

get(){

console.log('price属性被读取了')

return val

set(newVal){

console.log('price属性被修改了')

val = newVal

}

})

car.price = 4000 设置属性值会进入set方法

console.log(car.price) 读取属性值会进入get方法

Object.defineProperty通过对数据读取和设置进入的get、set函数对数据进行了监听

响应式原理：

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

思考：

get函数好像意义不大

发布者、订阅者不能很好理解

vue响应式原理是什么？

当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Object。

definproperty劫持数据后vue会查找当前属性有无依赖项既被watch，或者依赖当前属性的值，如果有，就会注册依赖既deps，而注册deps时会在wather内添加新的更新目标。

当数据发生变更时，会触发deps的更新方法，调用所有的watcher，watcher又会触发对应deps的更新，直到所有依赖项更新完毕。

扩展资料：

Vue 是一个 MVVM框架，核心是双向数据绑定，VM（视图模型）是作为V（视图）和M（模型）的桥梁。对Vue响应式（双向数据绑定）的理解，如果错误尽请指出，一起交流，共同进步。Vue响应式原理核心是数据劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。

Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。

参考资料来源：百度百科-Vue·js前端开发技术

vue响应式原理是什么?

vue响应式基本原理是基于Object.defineProperty(obj，prop，descriptor)，descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法（可以收集依赖），设置属性值时触发set方法（更新依赖）。Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript对象。而当你修改它们时，视图会进行更新。

vue响应式系统

vue作为一个前端框架，近两年非常的火，虽然它的社区不像react那样繁荣，但它配套的东西都有固定的团队维护，用起来更方便。它是MVVM模型的框架（不熟悉框架模型的同学可以看看阮一峰大神的博客，或者点这里），实现数据的双向绑定，与其他框架相比vue非常的轻量级，另一个重要的特点就是它的响应式系统。