【vue.js】文档解读【day 2】 | 响应式基础

在这里插入图片描述

如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!

文章目录

  • 响应式基础
    • 声明响应式状态(属性)
    • 响应式代理 vs 原始值
    • 声明方法
      • 深层响应性
      • DOM 更新时机
      • 有状态方法

响应式基础

在认识vue之前,就可能许多人听说vue的响应式系统的诱人之处。

声明响应式状态(属性)

在vue中,可以通过data选项声明一些带有响应式的数据。data选项中需要return出一个对象,包含你所要在该页面添加的所有响应式数据。Vue会在创建当前实例时对你返回的对象使用响应式系统包装。并且,这些数据可以在当前实例中使用this找到,并进行修改。例如:

<template>
  <img :[orderSrc]="imgSrc" />
</template>

<script>
export default {
  data() {
    var imgSrc = "/src/components/icons/newImg.gif";
    var orderSrc = "src";
    return {
      imgSrc,
      orderSrc,
    };
  },
  mounted(){
    console.log(this.imgSrc) //控制台输出‘/src/components/icons/newImg.gif’
  }
};
</script>

在vue响应式系统中,vue会在首次创建实例时对data数据进行响应式包装,所以如果你要响应式的数据,那么需要确保已经在data中声明。至于里面的值可以是null或undefined这些占位符。

data中命名规范:vue中,由于内置API使用了$作为前缀,并且也为内部属性保留了_前缀,所以我们在data中声明数据时,要避免使用这些前缀,防止与内置属性冲突

响应式代理 vs 原始值

在vue3中,vue使用的是JavaScript中的Proxy代理来实现响应式的。我们先来看一段vue2中的代码:

<script>
	export default{
        data(){
    		var obj = {
      			id:1
   			 }
    		return {
      			obj
    		}
  		},
  		mounted(){
     		 const newObj = {}
     		 this.obj = newObj;
     		 console.log(this.obj) //{__ob__: Observer}
     		 console.log(newObj)   //{__ob__: Observer}
    		 console.log(this.obj === newObj) //true
  		}
    }
</script>

接下来再看一下vue3中的效果:

<script>
	export default{
        data(){
    		var obj = {
      			id:1
   			 }
    		return {
      			obj
    		}
  		},
  		mounted(){
     		 const newObj = {}
     		 this.obj = newObj;
     		 console.log(this.obj) //Proxy {}
     		 console.log(newObj)   //{}
    		 console.log(this.obj === newObj) //false
  		}
    }
</script>

vue3中与vue2不同的是:在vue2中,newObj是响应式数据。而在vue3中,该数据在mouted中定义的newObj就不再是响应式数据所以,请确保在其他地方使用this访问响应式状态

声明方法

在vue中,所有的方法都应该生声明在methods对象中,因为只有在methods对象中的this才会指向当前组件实例。所以,为了我们的this可以正常指向,所有的方法都应该声明在methods对象中。而且不应该在methods对象中使用ES6中的箭头函数!关于this的更多信息可以点击该链接查询。请注意,这里methods与data和mounted不同的是,methods是一个对象,而不是一个方法!

我们先来看一下正常的this里面包括什么:

<script>
export default {
  data() {
    var objAttr = {
      id: 123,
      class: "a",
    };
    return {
      objAttr
    };
  },
  methods:{
      init(){
        console.log(this)  //Proxy {init: ƒ, …}
    	console.log(this.objAttr) //Proxy {id: 123, class: 'a'}
    	console.log(this.objAttr.id)  //123
      }
  },
  mounted(){
    this.init();
  }
};
</script>

接下来试一下在箭头函数中的this指向是什么:

<script>
export default {
  data() {
    var objAttr = {
      id: 123,
      class: "a",
    };
    return {
      objAttr
    };
  },
  methods:{
      init:()=>{
        console.log(this)  //undefined
      }
  },
  mounted(){
    this.init();
  }
};
</script>

所以尽量不要在methods中使用箭头函数!

深层响应性

vue中的响应式是进行深度处理过的,所以不管某个属性位于哪个对象,只要在data中进行声明,都可以被响应式处理。

DOM 更新时机

在学习这一节时,我们需要知道JavaScript中的异步处理机制以及ES7中的async语法之后,再来深入的理解。这里简单的说一下,JavaScript中异步有事件循环和任务队列,事件循环通常称为宏任务,任务队列通常称为微任务。我们使用setTimeout来解释这两个名词。来看下面这个代码:

setTimeout1(
	setTimeout2();    
,1000)

setTimeout3(
	setTimeout4();    
,1000)

这里setTimeout1和setTimeout3位于事件循环中,而setTimeout2是和1处在同一个任务队列中,3和4处在同一个任务队列中。

如果可以理解上面这个概念的话,就可以继续学习vue中的DOM更新时机了!

vue中会把每次更新时机设置为一个事件循环,所以我们在需要等待DOM更新之后再进行操作的时候,可以使用vue中的nextTick函数,它会等待当前事件循环结束之后再执行接下来的任务。例如vue官方文档这串代码:

import { nextTick } from 'vue'

export default {
  methods: {
    async increment() {
      this.count++
      await nextTick() // await中文指等待,也就是在上面事件循环结束之后再执行nextTick
      // 现在 DOM 已经更新了
    }
  }
}

有状态方法

有时候我们想要创建一个动态的方法多次复用,但是同时我们vue组件也需要被重用。这个时候就会引起一些问题:我们创建的这个方法内部是有一个自己的状态,比如自己的属性自己的方法名。如果这些被重用,那么在执行代码的时候会产生不同结果

比如这个方法中有一个名为timer的定时器,那么我们在进行复用的时候这个timer可能会有多个,之后我们再想销毁timer时,我们不知道哪一个需要被销毁。

vue官方文档中也为我们提供了一种解决方法:在created函数,也就是实例创建的时候将有状态的方法复制在自己的实例中,并且在实例销毁时(unmounted)删除该方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/446648.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

电脑数据安全新防线:文件备份的终极指南

一、数据守护者的使命&#xff1a;文件备份的重要性 在数字化日益普及的今天&#xff0c;电脑已成为我们日常生活和工作的必备工具&#xff0c;文件作为我们储存、交流和处理信息的主要载体&#xff0c;其重要性不言而喻。然而&#xff0c;无论是由于硬件故障、软件崩溃&#…

Autosar教程-Mcal教程-GPT配置教程

3.3GPT配置、生成 3.3.1 GPT配置所需要的元素 GPT实际上就是硬件定时器,需要配置的元素有: 1)定时器时钟:定时器要工作需要使能它的时钟源 2)定时器分步:时钟源进到定时器后可以通过分频后再给到定时器 定时器模块选择:MCU有多个定时器模块,需要决定使用哪个定时器模块作…

【动态规划】代码随想录算法训练营第三十九天 |62.不同路径,63.不同路径II(待补充)

62.不同路径 1、题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2、文章讲解&#xff1a;代码随想录 3、题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右…

JavaScript高级Ⅱ(全面版)

接上文 JavaScript高级Ⅰ JavaScript高级Ⅰ(自认为很全面版)-CSDN博客 目录 第2章 DOM编程 2.1 DOM编程概述 2.1.4 案例演示(商品全选) 2.1.5 dom操作内容 代码演示&#xff1a; 运行效果&#xff1a; 2.1.6 dom操作属性 代码演示&#xff1a; 运行效果&#xff1a; 2…

H264/265编码参数2: Profile Level Tier

profile和level profile和level是视频编码中两个很重要的概率&#xff0c;中文一般叫做档次和级别。 在MPEG2标准里边&#xff0c;按不同的压缩比分成五个档次&#xff0c;按视频清晰度分为四个级别&#xff0c;如下图所示&#xff1a; 档次和级别共有 20 种组合&#xff0c;…

2024年【化工自动化控制仪表】考试总结及化工自动化控制仪表作业考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【化工自动化控制仪表】考试总结及化工自动化控制仪表作业考试题库&#xff0c;包含化工自动化控制仪表考试总结答案和解析及化工自动化控制仪表作业考试题库练习。安全生产模拟考试一点通结合国家化工自动化控…

day-18 长度最小的子数组

运用队列的思维&#xff0c;求出每种满足题意的子数组长度&#xff0c;最小的即为答案&#xff0c;否则返回0 code class Solution {public int minSubArrayLen(int target, int[] nums) {int l0,r0;int ansInteger.MAX_VALUE;int total0;while(r<nums.length){totalnums[r…

C++:类和对象(三)——拷贝构造函数和运算符重载

目录 一、拷贝构造函数 1.概念 2.特性 二、赋值运算符重载 1.运算符重载 2.赋值运算符重载 &#xff08;1&#xff09;注意的点&#xff1a; &#xff08;2&#xff09;赋值运算符不允许被重载为全局函数&#xff0c;只能重载为类的成员函数 &#xff08;3&#xff09;…

STM32单片机示例:ETH_LAN8742_DHCP_NonOS_Poll_H743

文章目录 目的基础说明关键配置关键代码示例链接总结 目的 以太网是比较常用到的功能&#xff0c;STM32系列单片机使用CubeMX配置使用以太网功能比非常方便。不过对于H7系列来说需要使能 DCache 才能启用LwIP&#xff0c;启用Cache后又会带来一些需要特别注意的事情。这篇文章…

HarBor私有镜像仓库安装部署

环境准备 #>>> redis $ yum -y install redis $ systemctl enable --now redis $ vim /etc/redis.conf modify: bind <ipaddress> $ systemctl restart redis#>>> nfs $ yum -y install nfs-utils $ mkdir -p /data/harbor $ vi /etc/exports /data/h…

简介:CMMI软件能力成熟度集成模型

前言 CMMI是英文Capability Maturity Model Integration的缩写。 CMMI认证简称软件能力成熟度集成模型&#xff0c;是鉴定企业在开发流程化和质量管理上的国际通行标准&#xff0c;全球软件生产标准大都以此为基点&#xff0c;并都努力争取成为CMMI认证队伍中的一分子。 对一个…

动静态库

inode inode用于管理文件属性和内容 一个文件只能有一个inode&#xff0c;一个inode可以对应多个文件名 Linux进程中&#xff0c;打开的每一个文件都有对应的文件inode属性和文件页缓冲区&#xff08;内存和磁盘的缓冲区&#xff09; 软硬链接 硬链接 多个文件指向同一个i…

Gradle模块化最佳实践

一&#xff0c;模块化的原因及意义 模块化是一种将大型的软件系统拆分成相互独立的模块的方法。具有以下优势&#xff1a; 代码复用&#xff1a;不同的模块可以共享相同的代码。这样可以避免重复编写相同的代码&#xff0c;提高开发效率。模块独立性&#xff1a;每个模块都可…

【安装教程】windows下安装Faiss-GPU

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 【安装教程】windows下安装Faiss-GPU 查看安装指令 查看安装指令 登录网站&#xff1a;https://anaconda.org/ &#xff0c; 然后搜索faiss-gpu会进入如下界面&#xff0c;或…

Vue 3中的reactive:响应式状态的全面管理

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

讲解Python3内置模块之json编码解码方法

简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式&#xff0c;这些特性使JSON成为理想的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成&#…

web前端框架

目前比较火热的几门框架: React React是由Facebook(脸书)开发和创建的开源框架。React 用于开发丰富的用户界面&#xff0c;特别是当您需要构建单页应用程序时。它是最强大的前端框架。 弊端: 您不具备 JavaScript 的实践知识&#xff0c;则建议不要使用 React。同样&#x…

MIT6.828LAB4 (3)

LAB3_Part B: Copy-on-Write Fork 文章目录 LAB3_Part B: Copy-on-Write Fork前言练习8练习9练习10练习11练习12总结 前言 记录一下自己的学习过程 实验内容翻译&#xff1a; https://gitee.com/cherrydance/mit6.828 该翻译仅供参考 练习8 实现sys_env_set_pgfault_upcall系统…

内存映射mmap拓展

第一个是上一篇博客中用mmap实现任意两个进程间相互通信&#xff0c;前几篇博客也用管道实现了进程间通信 这里有个问题&#xff0c;管道是基于缓冲区环形队列的&#xff0c;实验也表明读过的数据不能在读利用命名管道实现任意进程间的通信 那么mmap多个读写操作时会是什么情况…

关于GPU显卡的介绍

一.关于英伟达历代产品架构 显卡是一种计算机硬件设备,也被称为显示适配器或图形处理器。目前的硬件部分主要由主板、芯片、存储器、散热器&#xff08;散热片、风扇&#xff09;等部分。显卡的主要芯片是显卡的主要处理单元。显卡上也有和计算机存储器相似的存储器&#xff0…