Vue响应式原理模拟 | 前端进阶之旅 - 前端求职面试刷题宝典

# 数据驱动

数据响应式、双向绑定、数据驱动
数据响应式
- 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作提高开发效率
双向绑定
- 数据改变，视图改变;视图改变，数据也随之改变
- 我们可以使用 v-model 在表单元素上创建双向数据绑定
数据驱动是 Vue 最独特的特性之一
- 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

# 数据响应式的核心原理

# Vue 2.x

Vue 2.x深入响应式原理
MDN - Object.defineProperty
浏览器兼容 IE8 以上(不兼容 IE8)

// 模拟 Vue 中的 data 选项 
let data = {
    msg: 'hello'
}
// 模拟 Vue 的实例 
let vm = {}
// 数据劫持:当访问或者设置 vm 中的成员的时候，做一些干预操作
Object.defineProperty(vm, 'msg', {
  // 可枚举(可遍历)
  enumerable: true,
  // 可配置(可以使用 delete 删除，可以通过 defineProperty 重新定义) 
  configurable: true,
  // 当获取值的时候执行 
  get () {
    console.log('get: ', data.msg)
    return data.msg 
  },
  // 当设置值的时候执行 
  set (newValue) {
    console.log('set: ', newValue) 
    if (newValue === data.msg) {
      return
    }
    data.msg = newValue
    // 数据更改，更新 DOM 的值 
    document.querySelector('#app').textContent = data.msg
  } 
})

// 测试
vm.msg = 'Hello World' 
console.log(vm.msg)

@前端进阶之旅: 代码已经复制到剪贴板

如果有一个对象中多个属性需要转换 getter/setter 如何处理?

#

# 数据驱动

数据响应式、双向绑定、数据驱动

数据响应式

数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作提高开发效率

双向绑定

数据改变，视图改变;视图改变，数据也随之改变
我们可以使用 v-model 在表单元素上创建双向数据绑定

数据驱动是 Vue 最独特的特性之一

开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

# 数据响应式的核心原理

# Vue 2.x

// 模拟 Vue 中的 data 选项 
let data = {
    msg: 'hello'
}
// 模拟 Vue 的实例 
let vm = {}
// 数据劫持:当访问或者设置 vm 中的成员的时候，做一些干预操作
Object.defineProperty(vm, 'msg', {
  // 可枚举(可遍历)
  enumerable: true,
  // 可配置(可以使用 delete 删除，可以通过 defineProperty 重新定义) 
  configurable: true,
  // 当获取值的时候执行 
  get () {
    console.log('get: ', data.msg)
    return data.msg 
  },
  // 当设置值的时候执行 
  set (newValue) {
    console.log('set: ', newValue) 
    if (newValue === data.msg) {
      return
    }
    data.msg = newValue
    // 数据更改，更新 DOM 的值 
    document.querySelector('#app').textContent = data.msg
  } 
})

// 测试
vm.msg = 'Hello World' 
console.log(vm.msg)

@前端进阶之旅: 代码已经复制到剪贴板

如果有一个对象中多个属性需要转换 getter/setter 如何处理?