面试题vue

目录

vue的响应式原理

路由跳转与拦截

vue2和vue3的生命周期

watch和computed的区别


vue的响应式原理

数据变更,视图自动更新

使用Object.defineProperty()方法来监听属性的变化,实现双向数据绑定。Object.defineProperty()方法可以控制对象的属性访问权限,实现响应式原理,当定义一个响应式属性时,Vue将使用Object.defineProperty()方法绑定该属性的getter和setter方法到一个观察者对象。当有任何对属性的更改时,它将触发setter方法,然后执行相应的更新操作。

当对数组进行操作(如push、pop、shift、unshift、splice、sort、reverse等)时,Vue能够捕获到这些变化,并触发视图的更新

对数组进行以下操作时,Vue无法自动触发更新:

1.通过索引直接修改数组元素的值:this.items[index] = newValue

2.修改数组的长度:this.items.length = newLength

当我们修改对象的属性值时,Vue能够捕获到这个变化并触发更新。这是因为Vue在对象上使用了Object.defineProperty来重写属性的访问器(getter和setter),从而能够追踪对象属性的变化。

如果要在响应式对象上添加新的属性,使用$set让新添加的属性也具有响应性

vue2.x的响应式
对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。
数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
存在问题:
新增属性、删除属性, 界面不会更新。
直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式
实现原理:
通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。
通过Reflect(反射): 对源对象的属性进行操作。

路由跳转与拦截

拦截:判断token是否存在

token的保存:后端存,后端接口让浏览器把token放cookie里,前端调取token判断使用

vue2和vue3的生命周期

setup取代created,beforecreated

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted

watch和computed的区别

监听数据的变化

watch不支持缓存,支持异步,监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值

computed计算属性会缓存数据结果,只有依赖性数据改变才会重新计算,在computed中的,属性都有一个 get 和一个 set 方法,当数据变化时,调用 set 方法,如果 computed 属性值是函数,那么默认会走 get 方法,必须要有一个返回值,用return返回,函数的返回值就是属性的属性值;在 computed 属性对象中定义计算属性的方法,和取data对象里的数据属性一样,以属性访问的形式调用;

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux-进程-007

1进程 1.1进程基本概念 程序:存放在外存中的一段数据组成的文件 进程:是一个程序动态执行的过程,包括进程的创建,进程的调度,进程的消亡1.2进程相关命令 1.2.1打开任务管理器 【top】:动态查看当前系统…

国企招聘考试------笔试资料-校园招聘

国企招聘考试一直备受广大求职者的关注,因为国企招聘通常具有稳定的岗位、优厚的福利待遇和广阔的发展空间,因此备战国企招聘考试成为许多求职者的重要任务。为了帮助求职者更好地准备国企招聘笔试,我将为你介绍这套校招试题资料。 国企招聘…

Win UI3开发笔记(四)设置主题

Win UI3设置主题过程 参考文章网址:https://blog.csdn.net/white_night_SZTU/article/details/132819719 核心代码: rootElement.RequestedTheme ElementTheme.Dark; //这和在前端设置控件的 RequestedTheme"Dark"属性是一样的结果&#xf…

TensorFlow中的分布式深度学习

在处理复杂问题和大规模深度学习问题时,分布式深度学习为我们提供了突破口。它允许我们利用多个设备和计算资源的力量,更好地训练我们的模型。讨论这个话题时,不得不提的是 TensorFlow,它通过 tf.distribute 包为分布式学习提供了…

Apriori 与 FP-growth 算法

关联规则挖掘:Apriori 与 FP-growth 算法 关联规则挖掘概述Apriori 算法基本原理应用实例FP-growth 算法基本原理应用实例其他机器学习算法:机器学习实战工具安装和使用关联规则挖掘是数据挖掘领域中的一个重要任务,旨在发现数据集中不同项之间的关联关系。Apriori 算法和 F…

面试精选-前端

1、防抖 防抖 (Debouncing) 的含义是指在一定时间内,多次触发同一个事件,只执行最后一次操作。例如,当我们在搜索框中输入关键词时,输入框会不断触发oninput事件,如果每次输入都去请求服务器获取数据,会造…

idea集成git(实用篇)

0.Git常用命令 Git常用命令-CSDN博客 1.下载git Git - Downloads 一路傻瓜式安装即可(NEXT) 2.软件测试 在Windows桌面空白处,点击鼠标右键,弹出右键菜单 Git软件安装后,会在右键菜单中增加两个菜单 Git GUI He…

Go编译到linux运行出现 cannot execute binary file

1.初学Go就在windows上写了个"Hello,World!",在windown上编译了一下,生成了可执行文件。运行无问题 go build text.go .\text.exe Hello,World!2.但是按照网上的教程进行生成linux的可执行文件时出现报错 set CGO_ENABLED0 set GOOSlinux set GOARCHam…

程序媛的mac修炼手册-- 2024如何彻底卸载Python

啊,前段时间因为想尝试chatgpt的API,需要先创建一个python虚拟环境来安装OpenAI Python library. 结果,不出意外的出意外了,安装好OpenAI Python library后,因为身份认证问题,根本就没有获取API key的权限…

Git命令操作

什么是Git? Git是⼀个免费的,开源的分布式版本控制软件系统 git区域 存储区域:Git软件⽤于存储资源得区域。⼀般指得就是.git⽂件夹 ⼯作区域:Git软件对外提供资源得区域,此区域可⼈⼯对资源进⾏处理。 暂存区&am…

Escalate_Linux(3)--通过读取密码文件shadow来破解root用户的口令实现提权

通过读取密码文件shadow来破解root用户的口令实现提权 通过读取密码文件/etc/shadow来破解root用户的口令 ls -l /etc/shadow 普通用户无查看shadow权限 echo "cat /etc/shadow" >/tmp/ls ​ chmod 755 /tmp/ls ​ export PATH/tmp:$PATH ​ /home/user5/script…

Ubuntu中Python包的寻找路径

文章目录 一、Pyhon包的查找位置二、某个Python特定包的查找位置参考 一、Pyhon包的查找位置 ▶ [~]$ python -m site sys.path [/home/wangji,/usr/lib/python310.zip,/usr/lib/python3.10,/usr/lib/python3.10/lib-dynload,/home/wangji/.local/lib/python3.10/site-packag…

[C++]c++冒泡排序示例

冒泡排序是一种计算机科学领域的较简单的排序算法,这篇文章主要介绍了c冒泡排序示例,需要的朋友可以参考下 冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的数列,一次比较两个…

019 Spring Boot+Vue 电影院会员管理系统(源代码+数据库+文档)

部分代码地址: https://github.com/XinChennn/xc019-cinema 一、系统介绍 cinema项目是一套电影院会员管理系统,使用前后端分离架构开发包含管理员、会员管理、会员卡管理、电影票、消费记录、数据统计等模块 二、所用技术 后端技术栈: …

RabbitMQ-消息队列:优先级队列、惰性队列

20、优先级队列 在我们系统中有一个订单催付的场景,我们的客户在天猫下的订单,淘宝会及时将订单推送给我们,如果在用户设定的时间内未付款那么就会给用户推送一条短信提醒,很简单的一个功能对吧。 但是,天猫商家对我…

Apache Flume:分布式日志收集系统

什么是Apache Flume? Apache Flume 是一个分布式、可靠、高可用的服务,用于高效收集、聚合和移动大量日志数据。它的主要目标是将日志数据从源头传输到中央数据存储,如Hadoop的HDFS。Flume 是为了可靠地处理日志数据而设计的,它有…

【数据结构】周末作业

1.new(struct list_head*)malloc(sizeof(struct list_head*)); if(newNULL) { printf("失败\n"); return; } new->nextprev->next; prev->nextnew; return; 2.struct list_head* pprev->next; prev->nextp->next; p->next->prevpr…

【Java程序员面试专栏 算法思维】一 高频面试算法题:排序算法

一轮的算法训练完成后,对相关的题目有了一个初步理解了,接下来进行专题训练,以下这些题目就是汇总的高频题目,本篇主要聊聊排序算法,包括手撕排序算法,经典的TOPK问题以及区间合并,所以放到一篇Blog中集中练习 题目关键字解题思路时间空间快速排序双指针+递归+基准值分…

一种基于道路分类特性的超快速车道检测算法

摘要: 本文介绍了一种新颖、简单但有效的车道检测公式。 车道检测是自动驾驶和高级驾驶员辅助系统 (ADAS) 的基本组成部分,在实际高阶驾驶辅助应用中,考虑车道保持、转向、限速等相关的控制问题,这种方式通常是通过受限的车辆计算…

MATLAB环境下基于图像处理的视网膜图像血管分割

预防糖尿病对每个人的健康至关重要,而糖尿病的早期症状在眼底视网膜血管会有所体现,如静脉血管扩张、轻度弯曲等。高血压作为常见疾病,在中国有多达2.45亿的患者。高血压的病情也会在眼底视网膜血管上有所体现,如交叉压迫征等反映…