vue响应数据的原理
vue最大的特点就是数据驱动视图。
vue的数据改变,页面一定发生改变?不一定。
当操作引用类型的数据,动态添加属性时,页面不会发生改变。
vue响应式数据原理(也叫数据绑定原理、双向数据绑定原理):
底层是Object.defineProperty(),目前用的vue2.6版本和将来更新的vue3.0(proxy)都是通过给data中的数据加一个数据劫持(setter和getter方法)。但是不管哪种版本,ie浏览器都有兼容性问题,vue2.6不兼容ie8及以下,vue3.0不兼容ie11。
Object.defineProperty()处理data里的数据,数据就添加上get和set方法,数据获取的时候触发get,数据修改的时候触发set。在修改数据的时候,优先触发set,触发watcher监听,再通知界面。
vue中如果动态添加属性,该属性就没有经历过处理,就没有set和get方法,所以数据变页面不变。
vue提供一个实例方法:vm.$set(目标对象,'动态添加的属性名','属性值')可以添加一个响应式属性,会触发视图的更新。
vue响应数据的原理的更多相关文章
- 详解vue的数据binding原理
自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...
- vue-双向响应数据底层原理分析
总所周知,vue的一个大特色就是实现了双向数据响应,数据改变,视图中引用该数据的部分也会自动更新 一.双向数据绑定基本思路 “数据改变,视图中引用该数据的部分也会自动更新“,从这句话,我们可以分析出以 ...
- Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
文章目录 1.列表排序 1.1 .代码实例 1.2 .测试效果 1.3.需要掌握的前提知识 2.Vue监测数据变化的原理 2.1.代码实例 2.2 .测试效果 3.Vue检测数据的原理 3.1 基本知 ...
- Vue 监视数据总结 && 表单控件使用总结
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- Vue响应式原理及总结
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- vue响应式原理,去掉优化,只看核心
Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...
随机推荐
- 拼数(C++)
问题: 设有n个正整数,将他们排成一排,组成一个最大的多位整数. INPUT: 第一行,正整数的个数n 第二行,n个正整数 OUTPUT: 一个正整数,表示最大的整数. 输入样例: 3 13 312 ...
- linux kernel debug
1. sysrq http://www.chinaunix.net/old_jh/4/902287.html 常用的SysRq命令(序列) 重启机器的SysRq命令序列是 k(SAK) s(sync ...
- http响应总结:常见http响应错误总结
工作中经常会被同事问这个http请求为什么调不通,我虽然能解释清楚错误是什么,但是没有总结过,想到刚开始时,也是看了别人的文章才会的,所以总结一下,贡献一下自己的经验. http 404 响应 404 ...
- .net core 2.2部署到Windows Server 2012 R2 standard
安装.net core 2.2 下载地址:https://dotnet.microsoft.com/download/dotnet-core/2.2 找到ASP.NET Core Runtime 2. ...
- 一种小型后台管理系统通用开发框架中的Cache缓存设计
本篇博客记录一下我在实习的公司的后台管理系统开发框架中学习到的一种关于网站的缓存(Cache)的实现方法,我会在弄懂的基础上,将该方法在.net core上进行实现.因为公司开发都是基于.net fr ...
- Asp.net MVC企业级开发(01)---Autofac
1.1 控制反转 在面向对象设计的软件系统中,它的底层都是由N个对象构成的,各个对象之间通过相互合作,最终实现系统的业务逻辑.同时,对象之间的耦合关系是无法避免的,也是必要的,这是协同工作的基础.但是 ...
- Mvc中模拟模型
如题,每次研究前台技术都要建数据库.连接,还遇到VS各种版本问题,太麻烦. 写这么一个东西,模仿后台Model,上课的时候研究代码层面的内容.甚好. 数据库类: class myDatabase { ...
- Struts2处理(jQuery)Ajax请求
1. Ajax Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...
- Mybatis一对一,一对多,多对多代码
一对一 <!-- 关系映射 --> <!-- 1-1:自动映射 --> <select id="oneToOne" resultType=" ...
- javascript中常用函数
1.js 获取文件后缀名 <script type="text/javascript"> var filename="www/data/index.php&q ...