文档章节

深入响应式原理

o
 osc_vh89klm7
发布于 2019/05/27 21:35
字数 931
阅读 10
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

一、vue最独特的特性之一就是非侵入式响应系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。

二、 Vue 响应式系统的底层的细节。

1、如何追踪变化?

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setterObject.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在属性被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同,所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

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

 

 

2、检测变化的注意事项。

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化,所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如:

var vm = new Vue({
  data:{
    a:1 } }) // `vm.a` 是响应式的 vm.b = 2 // `vm.b` 是非响应式的

对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如,对于:

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

this.$set(this.someObject,'b',2)

有时你可能需要为已有对象赋值多个新属性,比如使用 Object.assign() 或 _.extend()。但是,这样添加到对象上的新属性不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

也有一些数组相关的注意事项,之前已经在列表渲染中讲过。

3、声明响应式属性

由于 Vue 不允许动态添加根级响应式属性,所以你必须在初始化实例前声明所有根级响应式属性,哪怕只是一个空值:

var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: '' }, template: '<div>{{ message }}</div>' }) // 之后设置 `message` vm.message = 'Hello!'

如果你未在 data 选项中声明 message,Vue 将警告你渲染函数正在试图访问不存在的属性。

这样的限制在背后是有其技术原因的,它消除了在依赖项跟踪系统中的一类边界情况,也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑:data 对象就像组件状态的结构 (schema)。提前声明所有的响应式属性,可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Swift百万线程攻破单例(Singleton)模式

一、不安全的单例实现 在上一篇文章我们给出了单例的设计模式,直接给出了线程安全的实现方法。单例的实现有多种方法,如下面: class SwiftSingleton { } 这段代码的实现,在shared中进行条...

一叶博客
2014/06/20
3.3K
16
响应式框架--Groundwork

GroundworkCSS 是一个基于 Sass 预处理器的开源项目 ,主要用于快速构建响应式 Web 应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。 Groundwork 还提供多种 ...

匿名
2013/02/25
2.8W
4
高性能异步网络服务框架--libgod

libGod是一个全异步+协程机制实现的网络库,适用于windows、linux、bsd等多种平台。内部使用IOCP、epoll、kqueue等系统调用管理事件机制,同时巧妙的利用协程,将复杂的异步逻辑转换为同步,...

libGod
2012/11/09
6.7K
6
jQuery 滑动插件--jQuery iview

iView Slider 是一款优秀的 jQuery 滑动插件,用于实现文本、图片、视频等各种网页内容的滑动功能。iView Slider 支持响应式布局,能够很好的运行于触屏设备中。iView Slider 内置35种很炫的...

匿名
2012/12/28
3.7K
2
轻量开源社区系统--StartBBS

StartBBS(起点开源社区系统)是一个基于PHP+MySQL开发的新型社区系统,她轻量小巧, 简单易用,强大高效的开源论坛系统。又简称”SB(烧饼)”。 在线演示:http://startbbs.oschina.mopaas....

startbbs
2013/01/07
4.6W
13

没有更多内容

加载失败,请刷新页面

加载更多

什么是移动语义? - What is move semantics?

问题: I just finished listening to the Software Engineering radio podcast interview with Scott Meyers regarding C++0x . 我刚刚结束了对Scott Meyers进行的有关C ++ 0x的Software En......

技术盛宴
今天
24
0
算法与数据结构体系课

算法与数据结构体系课【超清原画】 下载地址:百度云盘 从0到工作5年,面试、进大厂、搭建知识体系、拓展技术上限 你不再需要其它算法与数据结构课程了 为什么学算法已经是一个不应该问的问题...

1930133570
今天
21
0
如何停止跟踪并忽略对Git中文件的更改? - How to stop tracking and ignore changes to a file in Git?

问题: I have cloned a project that includes some .csproj files. 我已经克隆了一个包含一些.csproj文件的项目。 I don't need/like my local csproj files being tracked by Git (or bei......

富含淀粉
今天
25
0
Redis阻塞

可能存在问题 内在原因:API或数据结构使用不合理、CPU饱和、持久化阻塞等 外在原因:CPU竞争、内存交换、网络问题等 问题处理: API或数据结构使用不合理,可能存在慢查询或者大对象: 发现...

游泳鸟
今天
17
0
OSChina 周五乱弹 —— 来人,上幼儿园老师跳舞的图!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑:《奇跡の海》- 坂本真綾 《奇跡の海》- 坂本真綾 手机党少年们想听歌,请使劲儿戳(这里) 巴蜀(@巴拉迪维)最近有点闹心了, @巴...

小小编辑
今天
64
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部