Objet.defineProperty

用过 vue 的都知道，vue 如果有个数据 firstName 改变了，那么相应用到 firstName 的地方都得改变，
比如
计算属性（computed）

computed: {fullName: () => this.firstName + this.lastName
}

数据监听（watch）

watch: {firstName: function (val, oldVal) {// dosomething}
}

模板渲染（render）

<span>姓: {{ firstName }}<span>

这三个地方就相当于 firstName 的依赖（Watcher）,后面细讲。

另外 Vue 中数据定义是这样的

new Vue({el: '#app',data: { firstName: '王' }
})

那么怎么才能监听到 fisrtName 的改变并更新相应的数据呢？

在 Object.defineProperty 之前，是 MutationObserver -MDN ⇲，他的作用如下

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品

这是已经淘汰的东西，不多做介绍， vue2.x 做法就是利用 Objet.defineProperty 监听 data 的改变从而去触发各个部分的更新。

做个简单的介绍，可以猛戳这里⇲ 了解更多.
以上面为例

const data = { firstName: '李' };
const vm = {};
Object.defineProperty(vm, "firstName", {enumerable: true,configurable: true,get() { console.log('我被获取了！'); return data.firstName; },set(newValue) { data.firstName = newValue;console.log('我被改变了， 这是新值：', newValue) },
});
vm.firstName = '李';
console.log(vm.firstName)
// 我被改变了， 这是新值： 李
// 我被获取了！
// 李

上面给 vm 定义一个响应式 firstName 属性，并且这个属性可枚举（enumerable : true）、可配置（configurable : true）。firstName 改变就就会触发 set 方法,获取 firstName 就会触发 get 方法。

把响应式核心实现方法说了，再来理一理 vue 响应式实现原理。

vue响应式原理

先上一张图，来自掘金小册（推荐！）剖析 Vue.js 内部运行机制⇲

上面的图基本就很经典的概括了 Vue 的生命周期。包含初始化、编译、挂载、更新。。。而Vue的响应式也基本贯穿了整个周期。

另外注意：

上图 watcher 不是代码中的 vue 中的 watch ，而是依赖。
watcher(依赖) 有三类： computed watcher、watch watcher 、render watcher，这里提一嘴，后面再说。

关于响应式原理这张图概括的比较全了

你这手写vue2.x/3.x的响应式保熟吗？相关推荐

前端进阶-手写Vue2.0源码（三）｜技术点评
前言今天是个特别的日子祝各位女神女神节快乐哈封面我就放一张杀殿的帅照表达我的祝福哈哈此篇主要手写 Vue2.0 源码-初始渲染原理上一篇咱们主要介绍了 Vue 模板编译原理它是 Vue ...
【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌握HTML网页设计前端盒子的布局.嵌套,及css效果的使用... 微信官网首页主要有以下几个需要关注的 ...
【手写 Vue2.x 源码】第二十八篇 - diff 算法-问题分析与 patch 优化
一,前言首先,对 6 月的更文内容做一下简单回顾: Vue2.x 源码环境的搭建 Vue2.x 初始化流程介绍对象的单层.深层劫持数组的单层.深层劫持数据代理的实现对象.数组数据变化的观测 ...
html中响应式字体怎么写,如何实现网页中字体响应式
回顾上一篇文章"[实战]用Media Query实现响应式Web布局",谈到页面框架实现响应式布局,那么这里就有一个疑问:字体也可以吗?答案:完全可以. 大伙都知道,现在设置字体大 ...
手写vue2的Lazyload
调用方式,express写个后台服务调图片,具体使用不贴了 import VueLazyload from "./modules/vue-lazyload";Vue.use(Vue ...
【手写 Vue2.x 源码】第十八篇 - 根据 render 函数，生成 vnode
一,前言上篇,介绍了 render 函数的生成,主要涉及以下两点: 使用 with 对生成的 code 进行一次包装将包装后的完整 code 字符串,通过 new Function 输出为 ren ...
【手写 Vue2.x 源码】第十九篇 - 根据 vnode 创建真实节点
一,前言上篇,根据 render 函数,生成 vnode,主要涉及以下几点: 封装 vm._render 返回虚拟节点 _s,_v,_c的实现本篇,根据 vnode 虚拟节点渲染真实节点二,根据 ...
【手写 Vue2.x 源码】第二十二篇 - dep 和 watcher 关联
一,前言上篇,主要介绍了 Vue 依赖收集的过程分析: 介绍了 Vue 的响应式特性介绍了 Vue 的依赖收集过程介绍了 dep 和 watcher 以及观察者模式: 本篇,Vue 依赖收集的实 ...
【手写 Vue2.x 源码】第三十一篇 - diff 算法 - 比对优化（下）
一,前言上篇,diff 算法-比对优化(上),主要涉及以下几个点: 介绍了如何对儿子节点进行比对: 新老儿子节点可能存在的 3 种情况及代码实现: 新老节点都有儿子时,diff 的方案介绍与处理逻辑 ...
基于人工智能方法的手写数字图像识别_【工程分析】基于ResNet的手写数字识别...
ねぇ呐私に気付いてよ快点注意到我吧もうそんな事那种事一定望んでも再去奢求しょうがないだろ也无可奈何吧 --真野あゆみ<Bipolar emotion>(作詞:Mits ...

你这手写vue2.x/3.x的响应式保熟吗？

Objet.defineProperty

vue响应式原理

你这手写vue2.x/3.x的响应式保熟吗？相关推荐

最新文章

热门文章