vue响应数据的原理

vue最大的特点就是数据驱动视图。

vue的数据改变，页面一定发生改变？不一定。

当操作引用类型的数据，动态添加属性时，页面不会发生改变。

vue提供一个实例方法：vm.$set()可以添加一个响应式属性，会触发视图的更新。

vue响应式数据原理（也叫数据绑定原理、双向数据绑定原理）：

　　底层是Object.defineProperty()，目前用的vue2.6版本和将来更新的vue3.0（proxy）都是通过给data中的数据加一个数据劫持（setter和getter方法）。但是不管哪种版本，ie浏览器都有兼容性问题，vue2.6不兼容ie8及以下，vue3.0不兼容ie11。

　　Object.defineProperty()处理data里的数据，数据就添加上get和set方法，数据修改的时候触发set，数据获取的时候触发get。

原文地址：https://www.cnblogs.com/wuqilang/p/11370824.html

时间： 2024-10-07 12:05:21

vue响应数据的原理的相关文章

详解vue的数据binding原理

请看原文: 草席两个页面: <!DOCTYPE html> <html> <head> <title>ideal</title> <meta charset="utf-8"> </head> <body> <div id="test"> <p>{{msg}}</p> <p>{{msg}}</p> <p>

解vue的数据binding原理(转)

<!DOCTYPE html><html><head> <title>ideal</title> <meta charset="utf-8"></head><body><input class="test" type="text" name="asd" onkeyup="handleChange()" v-

前面的话 Vue最显著的特性之一便是不太引人注意的响应式系统(reactivity system).模型层(model)只是普通JS对象,修改它则更新视图(view).这会让状态管理变得非常简单且直观,不过理解它的工作原理以避免一些常见的问题也是很重要的本文将详细介绍Vue响应式系统的底层细节追踪变化把一个普通JS对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter.Object.defi

深度解析 Vue 响应式原理

深度解析 Vue 响应式原理该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进阶,亦或是源码解读,你都能在本图谱中得到满意的答案,希望这个面试图谱能够帮助到大家更好的准备面试. Vue 初始化在 Vue 的初始化中,会先对 props 和 data 进行初始化 Vue.prototype._init = function(options?: Object) { // ...

深入探讨vue响应式原理

现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题.在这个章节,我们将研究一下 Vue 响应式系统的底层的细节. 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 get

深入Vue响应式原理

深入Vue.js响应式原理一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h => h(App), }).$mount('#app'); 二.实例化一个Vue应用到底发生了什么? this._init() callHook(vm, 'beforeCreate') observe(vm._data) vm._data = vm.$options.data() proxy(vm, _

vue响应式原理解析

# Vue响应式原理解析首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher.js 监听者函数,用来设置dep.target开启依赖收集的条件,和触发视图的更新函数 - 3. compile.js 编译者函数,用来编译模版和实例化 watcher 函数 - 4. index.js 入口文件注意dep函数就是一个壳子,用来存放watcher和触发watcher更新的首先从

Vue响应式原理深入解析

Vue最明显的特性之一便是响应式系统,其数据模型即是普通的 JavaScript 对象.而当你读取或写入它们时,视图便会进行响应操作. 响应式data: <div id = "exp">{{ message }}</div> const vm = new Vue({ el: '#exp', data: { message: 'This is A' } }) vm.message = 'This is B' // 响应式 vm._message = 'This i

Vue实现数据双向绑定的原理

Vue实现数据双向绑定的原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调.当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter.用户看不