【vue你还了解哪些?】

简介: 【vue你还了解哪些?】

Vue 响应式原理


核心实现类:


Observer : 它的作用是给对象的属性添加 getter 和 setter,用于依赖收集和派发更新


Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例(里面 subs 是 Watcher 实例数组),当数据有变更时,会通过 dep.notify()通知各个 watcher。


Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器 watcher(user watcher)三种


Watcher 和 Dep 的关系

watcher 中实例化了 dep 并向 dep.subs 中添加了订阅者,dep 通过 notify 遍历了 dep.subs 通知每个 watcher 更新。


依赖收集:

initState 时,对 computed 属性初始化时,触发 computed watcher 依赖收集

initState 时,对侦听属性初始化时,触发 user watcher 依赖收集

render()的过程,触发 render watcher 依赖收集

re-render 时,vm.render()再次执行,会移除所有 subs 中的 watcer 的订阅,重新赋值。

派发更新

组件中对响应的数据进行了修改,触发 setter 的逻辑

调用 dep.notify()

遍历所有的 subs(Watcher 实例),调用每一个 watcher 的 update 方法。

原理

当创建 Vue 实例时,vue 会遍历 data 选项的属性,利用 Object.defineProperty 为属性添加 getter 和 setter 对数据的读取进行劫持(getter 用来依赖收集,setter 用来派发更新),并且在内部追踪依赖,在属性被访问和修改时通知变化。


每个组件实例会有相应的 watcher 实例,会在组件渲染的过程中记录依赖的所有数据属性(进行依赖收集,还有 computed watcher,user watcher 实例),之后依赖项被改动时,setter 方法会通知依赖与此 data 的 watcher 实例重新计算(派发更新),从而使它关联的组件重新渲染。


一句话总结:


vue.js 采用数据劫持结合发布-订阅模式,通过 Object.defineproperty 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调

目录
相关文章
|
3天前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
17 2
|
2天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
16 5
Vue使用element中table组件实现单选一行
|
2天前
|
JavaScript
Vue实现按钮级别权限
文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
12 4
Vue实现按钮级别权限
|
1天前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
1天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2天前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
10 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
1天前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
3天前
|
JavaScript
vue知识点
vue知识点
13 4
|
22小时前
|
JavaScript 网络架构
|
1天前
|
JavaScript 前端开发 Java
vue-day03 组件基础
文章介绍了Vue.js中组件的基础概念、注册格式、命名方式、全局与局部注册的区别、prop属性的详细使用以及通过prop向子组件传递数据的方法,并提供了计数器和博文小组件的实例。