vue原理之observer

上节课我们讲了vue五种类型中的vue 实现data响应
这节课我们讲第二中类型observer

Observer

功能
负责把 data 选项中的属性转换成响应式数据
data 中的某个属性也是对象，把该属性转换成响应式数据
数据变化发送通知

具体代码实现如下

class Observer {constructor(data) {this.walk(data)}// 1. 判断数据是否是对象，如果不是对象返回 // 2. 如果是对象，遍历对象的所有属性，设置为 getter/setterwalk(data) {if (!data || typeof data != 'object') {return}Object.keys(data).forEach(key => {this.defineReactive(data, key, data[key])})}//  定义响应式成员  即对data总的数据实现setter和getterdefineReactive(data, key, val) {const that = this// 如果 val 是对象，继续设置它下面的成员为响应式数据 this.walk(val)Object.defineProperty(data, key, {enumerable: true,configurable: true,get() {return val;},set(newValue) {if (val === newValue) {return}// 如果 newValue 是对象，设置 newValue 的成员为响应式 that.walk(newValue)//这里不用this  因为在set方法中 在function的内部 会开启新的作用域 此时的this执行data对象   val = newValue;}})}}

整体代码如下：

// 具体实现步骤
// 1： 通过属性  保存选项的数据
// 2： 把data中的成员 转换为getter和setter  注入到vue实例中 方便使用
// 3：调用observer对象 监听数据变化
// 4：调用compiler 解析指令和插值表达式
class Vue {constructor(options) {// 通过属性  保存选项的数据this.$options = options || {};//如果我们在调用vue构造函数的时候 没有传入参数 我们初始化一个空对象this.$data = options.data || {};this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;//如果我们是传入的选择器 则将选择器转换为dom对象// 把data中的成员 转换为getter和setter  注入到vue实例中 方便使用this._proxyData(this.$data)// 调用observer对象 监听数据变化new Observer(this.$data)// 调用compiler 解析指令和插值表达式 }_proxyData(data) {//vue传过来的参数 转换为getter和setter// 遍历data的所有属性Object.keys(data).forEach(key => {Object.defineProperty(this, key, {// 可遍历 可枚举enumerable: true,configurable: true,get() {return data[key]},set(newValue) {if (newValue === data[key]) {return} else {data[key] = newValue;}}})})// 把data中的属性 注入到vue实例中}
}
class Observer {constructor(data) {this.walk(data)}// 1. 判断数据是否是对象，如果不是对象返回 // 2. 如果是对象，遍历对象的所有属性，设置为 getter/setterwalk(data) {if (!data || typeof data != 'object') {return}Object.keys(data).forEach(key => {this.defineReactive(data, key, data[key])})}//  定义响应式成员  即对data总的数据实现setter和getterdefineReactive(data, key, val) {const that = this// 如果 val 是对象，继续设置它下面的成员为响应式数据 this.walk(val)Object.defineProperty(data, key, {enumerable: true,configurable: true,get() {return val;},set(newValue) {if (val === newValue) {return}// 如果 newValue 是对象，设置 newValue 的成员为响应式 that.walk(newValue)//这里不用this  因为在set方法中 在function的内部 会开启新的作用域 此时的this执行data对象   val = newValue;}})}
}let vm = new Vue({el: '#app',data: {msg: 'hello',count: 123,person: {name: 'zs'}}
})vm.msg={'sex':'ada'}

上一篇：vue原理代码的基本实现
下一篇：详解vue原理中的编译compiler

vue原理之observer相关推荐

Vue原理解析之observer模块
Vue原理解析之observer模块 vue.js JoeRay61 2017年02月16日发布本文是针对Vue@2.1.8进行分析 observer是Vue核心中最重要的一个模块(个人认为),能够 ...
vue 启动时卡死_十分钟浅入Vue 原理
vue原理引用众所周知vue是一个MVVM 渐进式框架,MVVM是vue的设计模式,在vue框架中数据会自动驱动视图. 1.MVVM设计模式解释 View是视图,就是DOM:对应视图也就是H ...
掌握这些Vue原理，就能月薪30K?
点击上方蓝色字关注我们~ 不会vue的前端工作者不是合格的web工程师!在2019年接近尾声的时候,尤雨溪宣布 Vue 3.0的源码开放了,想要在2020年跳槽的程序员们,现在可以着手准备了.去BAT ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
element 往node里面增加属性值_【Vue原理】Compile - 源码版之 Parse 属性解析
写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 [2.5.17] 如果你觉得排版难 ...
初始化触发点击事件_【Vue原理】Event - 源码版之自定义事件
专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本[2.5.17] Vue 的自定义事件很简单,就是使用观察者模 ...
vue 数值拼接字符串_【Vue原理】Compile - 白话版
写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 [2.5.17] 如果你觉得排版难 ...
v-model双向绑定原理_【Vue原理】VModel 白话版
↑点击上方 "神仙朱" 一起研究Vue源码吧专注 Vue 源码分享,为了方便大家理解,分为了白话版和源码版,白话版让大家可以轻松理解工作原理,源码版让大家更清楚内部操作和 Vu ...
data的值如何初始化vue_【Vue 原理】Vue 是如何代理 data、methods 和 props 的？
前言 Vue 有一个非常有趣的功能,就是我们所有传进去的 data .methods 或者 props,都会挂载到 Vue 实例上, 我们可以通过 this.xxx 的简单做法来进行访问.那么,这到底 ...

vue原理之observer

Observer

具体代码实现如下

vue原理之observer相关推荐

最新文章

热门文章