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的,必定会问响应式原理. 核心: / ... 
随机推荐
- SpringBoot第十八篇:异步任务
			作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11095891.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 系统中的异 ... 
- json data转匿名对象C#
			using Newtonsoft.Json.Linq; 代码如下: static void Main(string[] args) { Console.WriteLine("Test 4.8 ... 
- Shell脚本——显示系统上的登录用户数
			写一个脚本showlogged.sh,其用法格式为: showlogged.sh -v -c -h|--help 其中,-h选项只能单独使用,用于显示帮助信息:-c选项时,显示当前系统上登录的所有用户 ... 
- git add命令行添加文件、文件夹以及撤销文件add的方法
			1.添加某个文件类型到暂存区,比如所有的 .html 文件. git add *.html 2.添加某个文件或者某个文件夹中的某个文件到暂存区 ,比如 index 下的 index.htm ... 
- ipxe(可选):winboot:网络引导(启动)wim格式的windows PE系统:配置文件写法
			ipxe 无盘[网络]引导wim格式的pe系统 wimboot引导程序需要为其提供4个内核参数 bcd bootmgr boot.sdi boot.wim 所需文件附件 以下是我的可用的ipxe的配置 ... 
- 使用 Spring Boot 构建 RESTful API
			1. 使用 Idea 创建 Spring Initializer 项目 在创建项目的对话框中添加 Web 和 Lombok,或者建立项目后在 pom.xml 中添加依赖: <dependency ... 
- 单片机成长之路(51基础篇) - 026 基于stm89c52之单片机看门狗
			基于stc89c52的看门狗,代码如下: main.c #include "stc89c5x_Quick_configuration.h" // 自定义头文件 #include & ... 
- app支付宝支付错误信息:抱歉,订单不存在,请检查后重试。
			按这篇文章操作:https://openclub.alipay.com/read.php?tid=2026&fid=60 原因:应用签约时间在新api 2.0启用前,而api是使用2.0的才会 ... 
- 安装oracle时出现的问题
			数据库引擎和几个功能安装失败后 ,重新再装还是一样,好不容易全部功能装完成后结果发现登录不了oracle!!!!!!!!!!!!! 气死人,搞了一上午才发现原来是微软账号在搞事,登录本地管理员账户就 ... 
- Bootstrap导航栏示例
			<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ... 
