浅析 Vue 响应式

·  阅读 34

本篇博客是作为个人自学记录,如有不足之处,请批评指正。

什么是响应式

在 Vue 里,数据的变化,可以触发一个行为,我们可以知道这个数据的变化

在 vue 组件里,我们会维护一个状态或数据,我们在视图使用了这个数据,当这个数据发生改变之后,视图会自动更新(不需要我们手动更改)

比方

在打个比方:一场篮球比赛,当球进得分之后,记分员就会给记分牌加分,刚刚,『记分牌』就是对『记分员』的一个响应

代码

<div id="myName">{{ name }}</div>

// 创建 Vue 组件:
let vm = new Vue({
  data: {
    name: '张三'
  },
}).$mount('#myName')

// 修改 name 只需要,不需要手动修改 DOM 更新数据
vm.name = '李四'
复制代码

数据响应式原理

响应式是Vue的一个核心特性,用于监听视图中绑定的数据,当数据发生改变时视图自动更新。

那么,Vue 是如何实现这个数据响应式原理的呢?

Vue 它是通过 Object.defineProperty() 来更新定义 data 中的所有属性(也就是上面代码的那个 data);

通过 Object.defineProperty() 可以把数据全部转为 getter / setter,增加一个拦截的功能,拦截属性的获取,然后进行一个依赖的收集,拦截属性的更新操作,进行一个通知

分类:
前端
标签: