首页 > 其他分享 >《Vue进阶教程》第十一课:响应式系统介绍

《Vue进阶教程》第十一课:响应式系统介绍

时间:2024-12-19 14:29:34浏览次数:12  
标签:教程 Vue return 进阶 对象 name key target 函数

1 什么是响应式

当数据改变时, 引用数据的函数会自动重新执行

2 手动完成响应过程

首先, 明确一个概念: 响应式是一个过程, 这个过程存在两个参与者: 一方触发, 另一方响应

比如说, 我们家小胖有时候不乖, 我会打他, 他会哭. 这里我就是触发者, 小胖就是响应者

同样, 所谓数据响应式的两个参与者

  • 触发者: 数据
  • 响应者: 引用数据的函数

当数据改变时, 引用数据的函数响应数据的改变, 重新执行

我们先手动完成响应过程

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      // 定义一个全局对象: `触发者`
      const obj = { name: 'hello' }

      // effect函数引用了obj.name, 这个函数就是 `响应者`
      function effect() {
        // 这里可以通过app拿到DOM对象
        app.innerHTML = obj.name
      }

      effect()

      // 当obj.name改变时, 手动执行effect函数, 完成响应过程
      setTimeout(() => {
        obj.name = 'brojie'
        effect()
      }, 1000)
    </script>
  </body>
</html>

为了方便, 我们把引用了数据的函数 叫做 副作用函数

3 副作用函数

如果一个函数引用了外部的资源, 这个函数会受到外部资源改变的影响

我们就说这个函数存在副作用. 因此, 也把该函数叫做副作用函数

这里, 大家不要被这个陌生的名字吓唬住 所谓副作用函数就是引用了数据的函数或者说数据关联的函数

4 自定义设置过程

如果我们能感知数据改变, 拦截到赋值操作. 自定义设置过程 在赋值的同时调用一下数据关联的副作用函数, 就可以实现自动重新执行 理论上可行, 开始动手实践

1) Proxy代理对象

这里我们需要先补充一下Proxy相关的知识. 如果已经知道的小伙伴可以略过 new Proxy: 传入一个源对象, 返回一个新对象(代理对象) 当访问代理对象的属性时, 可以自定义访问过程 当设置代理对象的属性时, 可以自定义设置过程

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 定义一个源对象(目标对象)
      const obj = { name: 'xiaopang' }
      
      // 创建一个代理对象
      const proxy = new Proxy(obj, {
        get(target, key) {
          // 当访问proxy代理对象的属性时, 会执行get函数
          // 将get函数的返回值作为表达式的值
          console.log(target, key)
          return target[key] // obj.name obj[name]
        },
        set(target, key, value) {
          // 当设置proxy代理对象的属性时, 会执行set函数
          console.log('自定义set操作', value)
          target[key] = value
          return true
        },
      })
      // console.log(proxy.name)
      // console.log(proxy.age)
      proxy.name = 'xxp'
      console.log(obj)
    </script>
  </body>
</html>

 这样就确定了思路

  1. 先创建代理对象
  2. 再操作代理对象(给代理对象赋值)

2) 最基本的reactive函数

定义一个函数reactive, 传入一个普通对象, 返回代理对象

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function isObject(value) {
        return typeof value === 'object' && value !== null
      }
      /**
       * 创建响应式数据
       *  @param [object]: 普通对象
       *  @return [Proxy]: 代理对象
       */
      function reactive(data) {
        if (!isObject(data)) return

        return new Proxy(data, {
          get(target, key) {
            return target[key]
          },
          set(target, key, value) {
            target[key] = value
            return true
          },
        })
      }

      const state = { name: 'xiaopang' }
      const p = reactive(state)
      p.name = 'xxp'
      console.log(p.name)
    </script>
  </body>
</html>

5 最基本的响应式

既然可以自定义set操作, 只需要在自定义set操作时, 重新执行属性关联的副作用函数

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">hello</div>
    <script>
      /**
       * 定义响应式
       *  @param [object] : 普通对象
       *  @return [Proxy] : 代理对象
       */
      function reactive(data) {
        // 如果传入的data不是一个普通对象, 不处理
        if (typeof data !== 'object' || data == null) return

        return new Proxy(data, {
          get(target, key) {
            console.log(`自定义访问${key}`)
            return target[key]
          },
          set(target, key, value) {
            console.log(`自定义设置${key}=${value}`)
            target[key] = value // 先更新值
            effect() // 再调用effect, 调用effect时会重新获取新的数据
            return true
          },
        })
      }

      const pState = reactive({ name: 'hello' })

      function effect() {
        app.innerHTML = pState.name
      }

      setTimeout(() => {
        pState.name = 'brojie'
      }, 1000)
    </script>
  </body>
</html>

看到这里, 恭喜你, 已经掌握了最核心的原理

标签:教程,Vue,return,进阶,对象,name,key,target,函数
From: https://blog.csdn.net/2401_84715637/article/details/144501624

相关文章

  • 给我2分钟,保证教会你在Vue3中实现一个定高的虚拟列表
    前言虚拟列表对于大部分一线开发同学来说是一点都不陌生的东西了,有的同学是直接使用第三方组件。但是面试时如果你简历上面写了虚拟列表,却给面试官说是通过三方组件实现的,此时空气可能都凝固了。所以这篇文章欧阳将会教你2分钟内实现一个定高的虚拟列表,至于不定高的虚拟列表下一......
  • vue3 wspt 插件的使用 wsplayer无插件开发包封装
    基于大华插件:H5播放器开发套件(wsplayer无插件开发包)V1.2.9使用方法npmiwsptwspt使用说明1.找到node_modules目录中wspt文件夹,将static文件夹、jquery.min.js、palyer.css、PlayerControl.js、WSPlayer.js文件复制到项目public目录下。public|--jquery.min.js......
  • 基于SpringBoot+Vue实现的个人备忘录系统
    ......
  • 软件测试工程师进阶之路:从基础夯实到前沿创新与团队引领
    一、基础阶段编程语言学习选择一种编程语言深入学习,如JAVA或Python。学习其基础语法、数据类型、控制结构、函数与模块等。例如通过在线教程、相关书籍进行系统学习,同时进行大量的代码练习,如编写简单的数学计算程序、数据处理程序等,以巩固所学知识,培养良好的编程习惯。......
  • vue-实现loading页面
    效果实现步骤第一步先编写一个加载页面在APP.vue中引入将控制加载的变量添加到状态管理库中例如pinia或VueX中在loading页面中导入常量并控制主体是否显示在请求拦截器和响应拦截器里配置......
  • vue-axios响应请求拦截器
    importaxiosfrom"axios";//import{ElMessage}from'element-plus'import{BASE_URL,TIMEOUT}from"../config";constAxios=axios.create({ //后端url地址baseURL:BASE_URL,//设置超时时间timeout:TIMEOUT,//请求头类型/......
  • 软考中级 网络工程师教程(第六版)& 信息系统项目管理师教程(第四版)扫描PDF
    封面网络工程师教程(第六版) 信息系统项目管理师教程(第四版)下载链接网络工程师教程(第六版)信息系统项目管理师教程(第四版) ......
  • 基于 SSM 与 Vue 构建的电脑测评系统:提升评估精准度
    3系统分析3.1可行性分析通过对本基于SSM框架的电脑测评系统实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。3.1.1技术可行性本基于SSM框架的电脑测评系统采用JAVA作为开发语言,SSM框架,......
  • 探索基于 SSM 框架 Vue 电脑测评系统:解读电脑核心价值
    3系统分析3.1可行性分析通过对本基于SSM框架的电脑测评系统实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。3.1.1技术可行性本基于SSM框架的电脑测评系统采用JAVA作为开发语言,SSM框架,......
  • 【comfyui教程】如何快速为室内设计线稿图上色:轻松实现创意!
    前言**设计师们,你是否还在为线稿上色的繁琐工作发愁?**别担心,现在有了一键解放双手的神奇工具!在室内设计领域,色彩斑斓的室内效果图不仅能大幅提升设计的表现力,还能一秒抓住客户的眼球。传统的手工上色不仅耗时耗力,还容易陷入“调色地狱”。但有了ComfyUI的“室内设计线稿......