vue响应式原理

介绍

什么是数据响应式?
我们只需要关注数据本身,当数据变化的时候,视图也会随之更新

vue2.x

vue2.x实现响应式的核心是使用Object.defineProperty,因为该方法只能处理属性,所以需要遍历vue实例的所有属性,并通过这个方法将这些属性转化为getter/setter,这里相当于拦截器的作用,无论是访问实例的属性还是设置其属性,都要先通过getter/setter。具体在setter方法中,其实还是操作了DOM,然后才能更新视图

官网中也说到了“Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。”

vue3

vue3的响应式是通过proxy完成,Proxy直接监听对象,而非属性,所以将多个属性转换成getter/setter的时候,不需要使用循环

你可能感兴趣的:(#,vue,vue.js,javascript,前端)