高校廉洁文化建设网站,中国互联网百强企业名单,做网站需要那些技术,网站空间太小响应式
:::tip 提示 我们了解过响应式可以同步更新数据和视图#xff0c;但是其工作原理我们最好也要了解一下。这样当你使用时遇到一些常见的错误#xff0c;也能够快速定位是什么问题导致的。 了解响应式原理之前#xff0c;你必须要先去了解 ES5 的 Object.defineProper…响应式
:::tip 提示 我们了解过响应式可以同步更新数据和视图但是其工作原理我们最好也要了解一下。这样当你使用时遇到一些常见的错误也能够快速定位是什么问题导致的。 了解响应式原理之前你必须要先去了解 ES5 的 Object.defineProperty。 :::
响应式是 Vue 最独特的特性之一之前我们在 MVVM 模式中也有介绍到数据模型。数据模型你可以理解就是在选项 data 中定义的变量。数据模型在响应式系统中仅仅是普通的 JavaScript 对象。而当你修改它们时视图会进行更新。这使得状态管理非常简单直接。而在传统的模式中你修改 JavaScript 定义的数据后还要手动更新 dom 是比较繁琐的。
所以在响应式中我们要知道定义的数据它是如何被跟踪的。例如我修改了选项 data 中的数据 vue 是怎么知道我改了然后去触发更新视图操作的。
如何追踪变化
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项时Vue 将遍历此对象所有的 property并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。无法 shim 代表没有办法将其降级成其他 API 进行使用。
这些 getter/setter 对用户来说是不可见的但是在内部它们让 Vue 能够追踪依赖在 property 被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时会通知 watcher从而使它关联的组件重新渲染。 通过代码的方式进行演示一遍
templatediv idapp{{ message }}/div
/templatescript
export default {data() {return {message: Hello Vue!}}
}
/script这是一个组件所以会存在一个 watcher 实例准备渲染这个页面之前Vue 会把选项 data 的所有属性进行遍历并设置 getter/setter。在 getter 方法中实现了如果访问此属性则会把访问的相关信息存储到依赖中记录。在 setter 方法中实现了如果此属性的数据被改了则会通知 watcher 把当前属性所有依赖项关联的地方都重新渲染。例如 { message } 访问了 message 属性所以它会被记录到依赖项中当 message 属性被修改时则 { message } 的部分会被重新渲染。
避免遇到 bug 无法跟踪问题
由于 JavaScript 的限制Vue 不能检测数组和对象的变化。
因为 Vue2.0 的源码中是使用了 Object.defineProperty 进行实现响应式Vue 会先遍历一个数组或对象对其的每一个属性设置监听变化所以你后面添加进来的属性是不会触发监听变化的也就是说你改了这个值页面上绑定了这个值的元素也不会更新。
但是这个问题在 Vue3.0 中已经解决了源码中使用了 Proxy 代理这个 API 是可以直接监听一整个数组或对象的变化。而 Object.defineProperty 只能监听数组或对象上面的属性变化。
目前在单文件组件形式测试过了就算不是响应式也能够同步页面更新不确定是否在 Vue2.0 新版本中解决了欢迎复现的小伙伴一起讨论。
原文链接菜园前端
