响应式html是不是vue,Vue如何实现响应式系统

前言

最近深入学习了Vue实现响应式的部分源码，将我的些许收获和思考记录下来，希望能对看到这篇文章的人有所帮助。有什么问题欢迎指出，大家共同进步。

什么是响应式系统

一句话概括：数据变更驱动视图更新。这样我们就可以以“数据驱动”的思维来编写我们的代码，更多的关注业务，而不是dom操作。其实Vue响应式的实现是一个变化追踪和变化应用的过程。

vue响应式原理

以数据劫持方式，拦截数据变化；以依赖收集方式，触发视图更新。利用es5 Object.defineProperty拦截数据的setter、getter；getter收集依赖，setter触发依赖更新，而组件render也会变为一个watcher callback被加入相应数据的依赖中。

发布订阅

利用发布订阅设计模式实现，Observer作为发布者，Watcher作为订阅者，两者无直接交互，通过Dep进行统一调度。

Observer负责拦截get,set；get时触发dep添加依赖，set时调度dep发布；添加Watcher时会触发订阅数据的get，并加入到dep调度中心的订阅者队列中。

以下的UML类图是Vue实现响应式功能的类，以及他们之间的引用关系。

只包含部分属性方法

上图中的类已经标识的蛮清楚了，但是还是需要一个调用关系图，让调用过程更加清晰，如下图所示。

响应式data对象中，每一项key的劫持get/set函数都闭包了Dep调度实例，这张图显示了一个key更改过程中的数据流转。

部分源码

数据变更过程中的订阅/发布模型上图已经清晰的展示了，从图中我们已经知道了可以通过增加watcher来订阅某一项数据的变更。那么，我们只需要把组件render作为一个watcher订阅的话，数据驱动视图的渲染岂不是水到渠成了。Vue正是这么做的！

以下代码片段来自Vue.prototype._mount函数

{

vm._update(vm._render(),hydrating)

},noop)

hydrating = false

// manually mounted instance,call mounted on self

// mounted is called for render-created child components in its inserted hook

if (vm.$vnode == null) {

vm._isMounted = true

callHook(vm,'mounted')

}

一些问题思考

#person赋值新的对象，新对象里的属性是否也是响应式的呢？

({

person: null

})

})

vm.person = {name: 'zs'}

setTimeout(() => {

// 更改name

vm.person.name = 'finally zs'

},3000)

答案：是响应式的。

原因：因为Vue劫持set时，会对value再次做observe，源码如下。

代码 */

// 这里会再次对新的value做拦截

childOb = observe(newVal)

dep.notify()

}

#当我们监听多层属性时，上层引用变更，是否会触发回调？

({

person: {name: '令狐洋葱'}

}),watch: {

'person.name'(val) {

console.log('name updated',val)

}

}

})

vm.person = {}

答案：会。

原因：person.name作为一个表达式传入Watcher时，会被解析成类似这样的函数

{this.vm.person.name}

这样就会先触发person get,然后触发name get；所以我们配置的回调函数，不仅仅加入到了name依赖中，person也有。

#接着上个问题，person如果被赋值了新的对象，老对象和老对象上的依赖如何垃圾回收的？

老对象的回收：由于老对象的直接引用只有vue实例上的person，person切换到了新的引用，所以老对象没有引用了，就会被回收掉。

老对象上的依赖dep，watcher的依赖里还存在；但是在run执行时，会调用watcher的get() 获取当前值；get中会执行新的依赖收集，并在收集完毕后，清空老的依赖。

具体源码如下：

#当我们多次同步修改name时，回调函数是否会触发多次？

({

person: {name: '令狐洋葱'}

}),watch: {

'person.name': (val) {

console.log('name updated: ' + val)

}

}

})

vm.person = {name: 'zs'}

vm.person.name = '无敌'

答案: 不会，因为watch回调函数执行是异步的，且会去重。可以通过sync强制配置成同步run，就会执行2次了。

自己实现一个响应式系统

只包含核心功能，具体源码可以看这里，欢迎来star。

实现功能非常基础啦，重在理解，功能不全的。

Observer

{

reactive(obj,prop,obj[prop])

})

}

}

function reactive(obj,prop) {

let value = obj[prop]

// 闭包绑定依赖

let dep = new Dep()

Object.defineProperty(obj,{

configurable: true,enumerable: true,get() {

//利用js单线程，在get时绑定订阅者

if (Dep.target) {

// 绑定订阅者

dep.addSub(Dep.target)

}

return value

},set(newVal) {

value = newVal

// 更新时，触发订阅者更新

dep.notify()

}

})

// 对象监听

if (typeof value === 'object' && value !== null) {

Object.keys(value).forEach(valueProp => {

reactive(value,valueProp)

})

}

}

Dep

{

const oldVal = sub.value

sub.cb && sub.cb(sub.get(),oldVal)

})

}

}

Watcher

参考文档：

总结

以上是编程之家为你收集整理的Vue如何实现响应式系统全部内容，希望文章能够帮你解决Vue如何实现响应式系统所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！