Vue 源码学习 —— 数据响应式原理 (Vue 2.x)
2021/4/24 12:55:08
本文主要是介绍Vue 源码学习 —— 数据响应式原理 (Vue 2.x),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
对象的响应式
-
目录结构:
-
执行关系:
-
observe.js
import Observer from './Observer' export default function observe (value) { // 如果 value 不是对象,则不处理 if (typeof value != 'object' || !value) return var ob if (value.__ob__) { ob = value.__ob__ } else { ob = new Observer(value) } return ob }
- Observer:
import { def } from './utils' import defineReactive from './defineReactive' import { arrayMethods } from './array' // 将一个 Object 对象的每个层级都转换为响应式的 export default class Observer { constructor (value) { def (value, '__ob__', this, false) this.walk(value) } } walk (value) { for (let key in value) { defineReactive(value, key, value[key]) } } }
- defineReactive:
import observe from './observe' export default function defineReactive (data, key, val) { observe(val) Object.defineProperty(data, key, { enumerable: true, configurable: true, get () { console.log(`${key} 被访问了,是 ${val}`) return val }, set (newVal) { console.log(`${key} 被修改了,是 ${newVal}`) if (newVal === val) { return } val = newVal observe(newVal) } }) }
- utils:
export function def (data, key, value, enumerable, writable) { Object.defineProperty(data, key, { value, writable, enumerable }) }
- index:
import observe from './observe' let obj = { a: { b: { c: { d: 6666 } } } } observe(obj) obj.a.b.c.d++
- 测试效果:
这篇关于Vue 源码学习 —— 数据响应式原理 (Vue 2.x)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Vue新手入门教程:从零开始学习Vue框架
- 2024-11-23如何集成Ant Design Vue的图标
- 2024-11-23如何集成Ant Design Vue图标
- 2024-11-23使用vue CLI快速搭建Vue项目教程
- 2024-11-23Vue CLI多环境配置简单教程
- 2024-11-23Vue3入门教程:轻松搭建你的第一个Vue3应用
- 2024-11-23Vue3+Vite快速上手指南
- 2024-11-23Vue3阿里系UI组件入门指南
- 2024-11-23Vue3的阿里系UI组件入门指南
- 2024-11-23Vue3公共组件入门教程