手写基础版Vue响应式原理

最新推荐文章于 2022-10-21 16:44:39 发布
最新推荐文章于 2022-10-21 16:44:39 发布
阅读量166 收藏
点赞数
文章标签： javascript html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shkstart/article/details/109596764
版权

1. 定义测试对象

我们新建了一个obj对象，然后`new Observe`
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>0</h1>
  <script src="./index.js"></script>
  <script>
    const obj = {
      a: 1,
      b: 2,
      c: 3
    }
    new Observe(obj)

  </script>
</body>

</html>

2. 定义Observe观察者

let count = 0
function Observe (ops) {
  // 这里的ops就是我们的obj，提取ops对象中的所有键名组成的数组
  const keys = Object.keys(ops)
  // 循环遍历这个key数组
  for (let i = 0; i < keys.length; i++) {
    // 取到每一个key
    const key = keys[i]
    // 定义响应式 ops => obj, key => 对象的键名，ops[key] => 对象的键值
    defineRective(ops, key, ops[key])
  }
}

3. 定义defineRective响应式函数

function defineRective (obj, key, value) {
  // 给传过来的值定义get/set
  Object.defineProperty(obj, key, {
    get () {
      console.log(1)
      return value
    },
    set (val) {
      console.log(2)
      value = val
    }
  })
}

4. 定义更新页面的方式（假设）

// 假设这里是更新页面的方法
function update () {
  // 获取到页面的h1元素
  const h1 = document.querySelector('h1')
  // h1.innerHtml >>> 0 是将字符串转为数字
  h1.innerHTML = `我已经更新了${++count} 次了`
}

5. 测试

现在我们可以测试一下，读取obj中的值，获取设置obj中的值，看看能不能打印
const obj = {
      a: 1,
      b: 2,
      c: 3
    }
new Observe(obj)
console.log(obj.a)
obj.a = 4
console.log(obj.a)
## 浏览器打印如下:
i am get
1
i am set
i am get
4
没问题

6. 更新视图（假设）

那么既然读取对象中的数据就要刷新页面，那么我们这里就测试一下，读取一次页面就加1，我们可以在get/set中调用这个这个函数，达到更新视图的作用
function defineRective (obj, key, value) {
  // 给传过来的值定义get/set
  Object.defineProperty(obj, key, {
    get () {
      update() // 更新页面
      console.log('i am get')
      return value
    },
    set (val) {
      update()// 更新页面
      console.log('i am set')
      value = val
    }
  })
}

7. 优化defineRective响应式函数

之前我们测试的是普通的对象，假设现在我们里面对象嵌套对象，那么我们的代码能否实现响应式呢？我们可以测试一下
 const obj2 = {
      a: {
        f: 'hello'
      },
      b: {
        g: '华哥头发呢?'
      },
      c: 3
    }

   new Observe(obj2)
   console.log(obj2.a.f)
   console.log(obj2)
// 经过打印obj2发现，只有第一层对象有get/set，所有并没有实现深度相应
// 那么我们就可以深度遍历一下，如果对象的值还是一个对象的话，我们可以递归调用Observe函数来为我们的对象添加get/set方法


// 响应式
function defineRective (obj, key, value) {
  // 如果值还是一个对象的话，递归调用一下
  if (typeof value === 'object') Observe(value)
  // 给传过来的值定义get/set
  Object.defineProperty(obj, key, {
    get () {
      update() // 更新页面
      console.log('i am get')
      return value
    },
    set (val) {
      update()// 更新页面
      console.log('i am set')
      value = val
    }
  })
}

结尾

下期我们来讲讲 用Proxy来代替Object.defineProperty的优势，敬请期待!!
程序员驴子酱
关注
Vue 技术栈 手写响应式原理 到 探索设计模式
超逸の学习技术博客
03-08 3581
我们学习知识并不只是为了应付面试那种程度，对于面试应该作为我们的最低要求。这里就体现了数据安全思想，前端程序员或许考虑的没有Java程序员多，甚至没有为变量想过某个变量设置不可修改。由于工作的需要，我们也要努力提升自己的代码质量！让自己的职业生涯更加辉煌！
手写一个简易Vue
tiandao451的博客
01-29 1112
目录一、介绍二、前置知识观察者模式手写观察者模式三、简易版Vue整体结构VueObservercompilerDepwatcher 一、介绍 开一个坑先，Vue框架其实还算是蛮复杂的，所以决定先通过渐进式的方式实现一个最基础的Vue响应式功能，Vue其实基础功能简单来说就以下几点： 负责结构初始化的参数（选项） 负责把data中的属性注入到Vue实例，转化成getter、setter 负责调用observer监听data中的所有属性的变化 负责调用compiler解析指令、插值表达式 目前的todoLi
vue响应式核心原理手写源码
01-11
vue核心原理的源码解析，均为手写，每一步都配有详细注释。想了解vue原理的可以看看
手写Vue响应式原理
往事不回头,余生不将就
11-19 322
开门见山 本篇文章主要是介绍vue响应式原理,希望可以帮助到大家，主要有5个文件 1、Vue.js vue核心构造函数 2、Compiler.js编译文件 3、Observer.js数据劫持文件 4、Dep.js发布者文件 5、watcher.js观察者文件 Vue.js文件 class Vue { constructor(options) { //保存存入的数据如果没有值的默认是一个对象 this.$options = options || {}; .
vue手写响应式_Vue响应式原理（手写源码）
weixin_39738774的博客
12-20 184
前言：本文依照上一篇文章为基础进行书写，可先看上一篇开发环境的搭建后再来看本文章。链接：博客园什么是响应式？简单的来说就是更改数据的时候，视图也会更新。vue是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。1.vue响应式原理1.导出vue构造函数import {initMixin} from './init';functionVu...
手写vue响应式原理
CC酱写前端的博客
07-18 447
VUE 手写原理
vue响应式原理代码，手写简单vue
12-27
vue底层对象的响应式原理、观察者模式、数据劫持、数据代理、dep目标等vue底层知识 适合对vue和js有一定基础、并且能够熟练使用vue进行快速开发的程序员 主要包括以下文件: 1.index文件=>手写一个简单vue文件 2.vue...
vue3核心技术实战第一版
04-13
- **计算属性和侦听器**：Vue3中对这两者的使用和响应式原理的深入理解。 - **响应式计算和侦听**：深入理解响应式系统的计算属性和侦听器的工作机制。 - **服务端渲染**：Vue3支持SSR（服务器端渲染），提高SEO...
前端学习笔记，JavaScript基础，LeetCode，手写API，Vue源码解析.zip
最新发布
02-04
Vue的核心特性如组件化、指令系统、响应式数据绑定和生命周期钩子，都是其强大功能的体现。通过对Vue源码的分析，开发者可以学习到如何设计可复用、可维护的代码，并提升对前端框架的理解。 在"ahao2"这个文件中，...
手写一个简易vue响应式带你了解响应式原理
CreatorRay的博客
07-31 531
Vue2.x 响应式原理 1.defineProperty的应用 在Vue2.X 响应式中使用到了 defineProperty 进行数据劫持，所以我们对它必须有一定的了解，那么我们先来了解它的使用方法把， 这里我们来使用 defineProperty来模拟 Vue 中的 data。 <body> <div id="app"></div> <script> // 模拟 Vue的data let data = {
【系列 1】手写vue响应式原理
舜岳的博客
10-08 347
手写vue响应式原理 首先我们看看原生 vue 做了什么 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script> <script> const vm = new Vue({ data: { name: '小米', arr:[{a:2}] // 检测深度响应式 } }) con
手写简单版vue，深入理解vue的响应式原理
qq_41402809的博客
03-16 982
一篇文章带你彻底弄懂vue2的响应式原理，再也不用怕面试官问到啦～
手写源码系列：vue响应式实现原理！
大大怪将军的开心星球
09-07 156
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id=".
vue2.x响应式原理实现-代码干货带你手写响应式
m0_45236510的博客
03-13 184
vue作为现在热门的三大框架之一，相信大部分前端开发者都能够熟练的使用vue，但是能够深入了解其原理的可能并不多，很多人都知道vue响应式是通过difineProperty来实现的，相信随便百度一下，相关的面试题及答案一大堆，你知道是通过defineProperty重写get，set方法实现的，可是你有真正的了解过吗？好了，上干货！！！ 实现对象的监听 此时能够监听对象数据的变化，还不能监听数组的变化。为什么？因为它本身就不可以呀，那你可能要问了，明明vue的数组，，通过push、pop、shift等等方法
手写简易vue响应式
weixin_39818813的博客
10-21 265
【代码】手写简易vue响应式。
vue手写响应式_手写实现vue的MVVM响应式原理
weixin_40002238的博客
12-20 74
MVVM响应式实现原理：1.模板编译2.数据劫持3.watcherMVVM------------------视图-----模型----视图模型三者与Vue的对应：view对应template，vm对应newVue({…})，model对应data文中应用到的数据名词：nodeType判断节点是否是元素节点querySelector创建一个元素节点createDocumentFragment文档碎...
带你快速手写一个简易版vue了解vue响应式
qq_45496931的博客
07-31 570
## 起始 在使用vue的时候,数据双向绑定,插值语法...等等,一系列让人眼花缭乱的操作.作为一个使用者搞懂轮子是怎么造,并不是为了自己造一个轮子,而是为了更好的使用轮子. 虽然现在vue3已经开始使用,但是很多公司现在使用的应该还是vue2.X. ## 使用 在我们使用的时候,一般都是在main文件进行初始化,一般都是这样 ```js new Vue({ router, store, ....... render: h => h(App) }).$mount('#app...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值