vue2必备知识点

news2025/1/12 14:06:15

1、生命周期钩子是如何实现的?

生命周期描述
beforeCreatevue实例初始化后,数据观测(data observer)和事件配置之前。data、computed、watch、methods都无法访问。
createdvue实例创建完成后立即调用 ,可访问 data、computed、watch、methods。未挂载 DOM,不能访问el、ref。
beforeMount在 DOM 挂载开始之前调用。
mountedvue实例被挂载到 DOM。
beforeUpdate数据更新之前调用,发生在虚拟 DOM 打补丁之前。
updated数据更新之后调用。
beforeDestroy实例销毁前调用。
destroyed实例销毁后调用 。

2、Vue 中组件的 data 为什么是一个函数?

一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝

3、nextTick 在哪里使用?原理是?

根据浏览器的不同所所以兼容的API也不一样,兼容顺序

Promise
MutationObserver
setImmediate
setTimeout

4、Vue 组件间通讯方式

prop、emit、eventbus、.sync、 $attrs $isteners、ref、插槽、vuex
在这里插入图片描述

5、Vue动态组件 is

<component:is="componentId"></component>

6、父子组件的生命周期(执行顺序)完整的父子组件生命周期:

7、v-if 和 v-show 的区别

v-if:如果为 false 默认不渲染 切换时会进行创建和销毁 会触发生命周期钩子 v-show:默认渲染 css 切换

8、v-if 与 v-for 的优先级

vue2 v-for 优先级高 vue3 v-if 优先级高

9、Vue常用的修饰符

stop:阻止冒泡 prevent:阻止默认行为 self:仅绑定元素自身触发 once:只触发一次

10、Vue 如何检测数组变化?

● 初始化 instance ->_init->initState->initData->observe->new Observer(value)
● 在构造函数里区分是否是Array
● 给Array重写变异方法
○ push
○ pop
○ shift
○ unshift
○ splice
○ sort
○ reverse

11、vue.set 方法是如何实现的?

set 方法内部实现方式: ob.dep.notify() ob 通过Observe 给__ob__赋值 dep在get里赋值 notice 会调用 watcher的update 方法

12、Vue.mixin 的使用场景和原理

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项

  • 同名数据对象:对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先
  • 同名钩子函数:将混合为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用
    methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对

13、vue-router 两种模式的区别?

  • hash 模式
    背后的原理是 onhashchange 事件,可以在 window 对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; }
  • history 模式
    因为 HTML5 标准发布,多了两个 API,pushState() 和 replaceState()。 通过这两个 API (1)可以改变 url 地址且不会发送请求, (2)不仅可以读取历史记录栈,还可以对浏览器历史记录栈进行修改。 除此之外,还有 popState().当浏览器跳转到新的状态时,将触发 popState 事件. 修改历史状态 包括了 pushState,replaceState 两个方法,这两个方法接收三个参数:stateObj,title,url window.history.pushState(stateObject, title, URL) window.history.replaceState(stateObject, title, URL)

14、Vuex 的 Mutation 和 Action 的区别吗?

定位不同 Mutation:专注于修改 State,理论上是修改 State 的唯一途径。 Action:业务代码、异步请求。 角色不同,二者有不同的限制 Mutation:必须同步执行。 Action:可以异步,但不能直接操作 State

15、为什么 vue 或者 react 要求 key 值唯一

没有 Key 值的问题 老集合中包含节点:A、B、C、D,更新后的新集合中包含节点:B、A、D、C,此时新老集合进行 diff 差异化对比,发现 B != A,则创建并插入 B 至新集合,删除老集合 A;以此类推,创建并插入 A、D 和 C,删除 B、C 和 D。 因为这些都是相同的节点,但由于位置发生变化,导致需要进行繁杂低效的删除、创建操作,其实只要对这些节点进行位置移动即可。 针对这一现象,提出优化策略:允许开发者对同一层级的同组子节点,添加唯一 key 进行区分,虽然只是小小的改动,性能上却发生了翻天覆地的变化!

16、Vue @hook 在父组件监听子组件的生命周期方法

<Child  
@hook:mounted="handleChildMounted" 
@hook:beforeDestroy="handlebeforDestryed" 
@hook:destroyed="handleDestroyed" :data="data" />

17、vue.use和vue.prototype.$xxx的区别

Vue.prototype就是js函数原型对象的特性, 函数原型上的属性/方法, 在函数实例化后, 可以在任意实例上读取
Vue.prototype适合于注册Vue生态外的插件,Vue.use适合于注册Vue生态内的插件
每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法
Vue.use主要是执行install方法,而install主要也是执行Vue.prototype方法

18、$attrs$listeners 的使用

  • attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)
    当父组件传递了很多数据给子组件时,子组件没有声明props来进行接收,那么子组件中的attrs属性就包含了所有父组件传来的数据(除开已经props声明了的),子组件还可以使用v−bind="attrs属性就包含了所有父组件传来的数据(除开已经props声明了的),子组件还可以使用v-bind="attrs属性就包含了所有父组件传来的数据(除开已经props声明了的),子组件还可以使用v−bind="attrs"的形式向它的子组件(孙子组件)传递数据,孙子组件使用$attrs的方式和它的父组件原理类似。
  • listeners属性和attrs属性类似,只是它们传递的东西不一样
    l i s t e n e r s 可以通过 v − o n 的形式再次传递给下层组件,当父组件在子组件上定义了一些自定义的非原生事件时,在子组件内部可以通过 l i s t e n e r s 属性获取 > 父组件的自定义事件,它和 a t t r s 的区别很明显, a t t r s 用来传递属性。使用 l i s t e n e r s 的好处在于:如果存在多层级组件,无需使用 e m i t 的方式逐级向上触发事件,只需要使用 listeners可以通过v-on的形式再次传递给下层组件,当父组件在子组件上定义了一些自定义的非原生事件时,在子组件内部可以通过listeners属性获取>父组件的自定义事件,它和attrs的区别很明显,attrs用来传递属性。 使用listeners的好处在于:如果存在多层级组件,无需使用emit的方式逐级向上触发事件,只需要使用 listeners可以通过von的形式再次传递给下层组件,当父组件在子组件上定义了一些自定义的非原生事件时,在子组件内部可以通过listeners属性获取>父组件的自定义事件,它和attrs的区别很明显,attrs用来传递属性。使用listeners的好处在于:如果存在多层级组件,无需使用emit的方式逐级向上触发事件,只需要使用listerners就可以得到父组件中的自定义事件,相当于偷懒了。
  • inheritAttrs
    父组件传递了很多数据给子组件,子组件的props没有完全接收,那么父组件传递的这些数据就会渲染到HTML上,我们可以给子组件设置inheritAttrs 为false,避免这样渲染。
data() {
  return {
    childStr: 'child String'
  };
},
  inheritAttrs: false,

总结

  • attrs:用来会传递属性,除了class、style之类的,它是一个对象。
  • listeners:用来传递事件,除了原生事件,它也是一个对象。
  • attrs和listeners这两个属性可以解决多层组件之间数据和事件传递的问题。
  • inheritAttrs解决未使用props接收的数据的属性渲染

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

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

相关文章

前端JavaScript中MutationObserver:监测DOM变化的强大工具

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 引言 1. MutationObserver简介 2. MutationObserver的属性 3. MutationObserver的应用场景 3.1 动态内容加载 …

动手学深度学习_个人笔记01_李沐(更新中......)

序言 神经网络——本书中关注的DL模型的前身&#xff0c;被认为是过时的工具。 深度学习在近几年推动了CV、NLP和ASR等领域的快速发展。 关于本书 让DL平易近人&#xff0c;教会概念、背景和代码。 一种结合了代码、数学和HTML的媒介 测试深度学习&#xff08;DL&#xf…

FL Studio21.1.1.3750中文破解百度网盘下载地址含Crack补丁

FL Studio21.1.1.3750中文破解版是最优秀、最繁荣的数字音频工作站 (DAW) 之一&#xff0c;日新月异。它是一款录音机和编辑器&#xff0c;可让您不惜一切代价制作精美的音乐作品并保存精彩的活动画廊。 为方便用户&#xff0c;FL Studio 21提供三种不同的版本——Fruity 版、…

TrOCR——基于transformer模型的OCR手写文字识别

前期我们使用大量的篇幅介绍了手写数字识别与手写文字识别,当然那里主要使用的是CNN卷积神经网络,利用CNN卷积神经网络来训练文字识别的模型。 这里一旦提到OCR相关的技术,肯定第一个想到的便是CNN卷积神经网络,毕竟CNN卷积神经网络在计算机视觉任务上起到了至关重要的作用…

打造“共富果园” 广东乳源推动茶油全产业链高质量发展

新华网广州9月13日电&#xff08;李庆招&#xff09;金秋九月&#xff0c;瓜果飘香&#xff0c;油茶也将迎来采摘期。13日&#xff0c;一场以“中国健康油 茶油新势力”为主题的乳源茶油12221市场体系之产业大会暨供销对接会在广州举行。来自茶油行业的专家、企业家齐聚一堂&am…

Python模块之time中时间戳、时间字符与时间元组之间的相互转换

时间的三种形式 时间戳&#xff0c;根据1970年1月1日00:00:00开始按秒计算的偏移量。 1694868399 时间格式字符串&#xff0c;字符串形式的时间。 2023-09-16 20:46:39 时间元组&#xff08;struct_time&#xff09;&#xff0c;包含9个元素。 time.struct_time(tm_year2023, …

2023 IDC 中国未来企业大奖优秀奖公布,神策数据助力中信建投获“未来运营领军者”优秀奖称号...

今日&#xff0c;全球领先的 IT 市场研究和咨询公司 IDC 正式公布 2023 IDC 中国未来企业大奖优秀奖名单&#xff0c;神策数据的合作客户中信建投证券股份有限公司&#xff08;简称“中信建投”&#xff09;荣获“未来运营领军者”优秀奖称号。 该奖项是 ICT 领域最具权威的奖项…

直线导轨滑块的固定方式

直线导轨滑块是要安装到导轨上的&#xff0c;利用压力使得滑块固定到导轨上&#xff0c;并调整间隙精度&#xff0c;当机械中有振动或冲击力浸染时&#xff0c;滑块和滑轨很有可能发生松动&#xff0c;从而偏离原来的固定地位&#xff0c;影响运行精度与操作寿命&#xff0c;甚…

RADIUS协议基础原理

RADIUS简介 Radius概述Radius架构(c/s模式)Radius特点Radius报文Radius认证报文Radius计费报文Radius授权报文 Radius工作原理 Radius概述 RADIUS&#xff08;Remote Authentication Dial-In User Server&#xff0c;远程认证拨号用户服务&#xff09;是一种分布式的、C/S架构…

Java设计模式-结构性设计模式(外观设计模式)

简介 ⻔⾯模式&#xff0c;隐藏系统的复杂性&#xff0c;并向客户端提供了⼀个客户端可以访问系统的接⼝定义了⼀个⾼层接⼝&#xff0c;这个接⼝使得这系统更加容易使⽤应用场景 xxx是负责消息推送这个⼯作&#xff0c;看起来很轻松&#xff0c;但他们不知道⾥⾯有多复杂&…

Jenkins结合allure生成测试报告

前言&#xff1a; 我们在做自动化测试的过程中最重要的肯定是报告的输出啦&#xff0c;最近几年allure可以说是最最主流报告展示工具啦。 一、服务端安装allure 在安装Jenkins的机器 安装allure&#xff0c;我们在Jenkins上能跑动前提是在对应服务器上代码能正常运行&#xf…

ESP8266使用记录(一)

1、23.7.17从TB买了个8266 2、下载安装Arduino 3、卖家的配套资料&#xff0c;直接覆盖相关文件 4、文件-首选项-设置-编辑器语言-中文(简体) 其他开发板管理器地址 http://arduino.esp8266.com/stable/package_esp8266com_index.json 5、工具-端口-COM6 工具-开发板-esp8266…

直接插入排序(C++实现)

文章目录 1. 基础概念&#x1f351; 内部排序和外部排序 2. 直接插入排序3. 动图演示4. 代码实现5. 性能分析 无论是日常生活还是很多科学领域当中&#xff0c;排序都是会经常面对的问题&#xff0c;比如按成绩对学校的学生排序&#xff0c;按薪水多少对公司员工排序等。 根据…

Vue系列之入门篇

前言&#xff1a; 目录 一&#xff0c;关于Vue的简介 1.什么是Vue&#xff1f; 2.使用Vue框架的好处&#xff1f; 3. 库和框架的区别&#xff1a; 4. MVVM的介绍 5.Vue的入门案例 二&#xff0c;Vue的生命周期 一&#xff0c;关于Vue的简介 1.什么是Vue&#xff1f; Vu…

详解混合类型文件(Polyglot文件)的应用生成与检测

1. 引入 混合类型文件&#xff08;Polyglot文件&#xff09;&#xff0c;是指一个文件&#xff0c;既可以是合法的A类型&#xff0c;也可以是合法的B类型。 比如参考3中的文件&#xff0c;是一个html文件&#xff0c;可以用浏览器正常打开&#xff1b;它也是一个一个.jar文件&…

来看看Javadoc(文档注释)详解

Java 支持 3 种注释&#xff0c;分别是单行注释、多行注释和文档注释。文档注释以/**开头&#xff0c;并以*/结束&#xff0c;可以通过 Javadoc 生成 API 帮助文档&#xff0c;Java 帮助文档主要用来说明类、成员变量和方法的功能。 文档注释只放在类、接口、成员变量、方法之前…

代码随想录算法训练营第53天 | ● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和

文章目录 前言一、1143.最长公共子序列二、1035.不相交的线三、53. 最大子序和总结 前言 动态规划 一、1143.最长公共子序列 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]&#xff1a;长度为[0, i - 1]的字符串text1与长度为[0, j - 1]的字符串text2的…

​云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

​云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

掌握这5种方法,让你的新AirPods充电盒更耐用!

每次AirPods充电盒落地时&#xff0c;你都会呼吸急促吗&#xff1f;无论我使用的是旧一代的AirPods还是最新的AirPod Pro 2&#xff0c;我都关心它们的保存状况&#xff0c;并尽力保护这些脆弱设备的安全。我想我对AirPods Pro 2的新充电盒也会有同样的感受&#xff0c;它在9月…

学校项目培训之Carla仿真平台之安装Carla

官网&#xff1a;http://carla.org/ 写在前面 由于安装都写了很多东西&#xff0c;所以我单独将安装弄出来记录一下。 如果你在安装9.12版本的时候遇到了很多问题&#xff0c;你可以考虑以下几点&#xff1a; - 楼梯可能不太行&#xff0c;需要更换&#xff0c;这是我实践得到的…