【前端vue面试】vue2

目录

    • computed和watch
    • v-show和v-if
    • key 的重要性
    • v-for 和 v-if 不能一起使用!
    • @click的event
    • 修饰符
      • 事件修饰符
      • 表单项修饰符
    • 父子组件通讯
    • 生命周期
      • 父子组件生命周期顺序
    • $nextTick
    • slot 插槽
    • 动态组件
    • 异步组件
    • keep-alive
    • mixin

computed和watch

computed 有缓存,基于响应式依赖数据(基于data中声明过或者父组件传递的props中的数据)发生改变,才会重新进行计算
数据变,直接会触发相应的操作
watch监听引用类型,需要添加deep:true深度监听,拿不到oldVal(旧值),因为新值和老值指针相同。

v-show和v-if

  1. v-show 和v-if 都是做条件隐藏和显示用
  2. v-show 是通过css操作dom。在初始化Dom渲染的时候会将显示的内容跟隐藏的内容,同时渲染,只是根据条件设置css为 display: none
  3. v-if在初始化Dom渲染的时候,根据条件显示需要展示的内容,并销毁隐藏的内容。每次条件切换时,都需要销毁隐藏的内容
  4. v-if 频繁切换渲染消耗高,v-show 初始化渲染消耗高。
    优化建议:频繁切换节点 使用v-show

key 的重要性

key不能不写或乱写(如 random、index 或不是唯一索引键)
key涉及到vu的diff算法,在新旧nodes对比识别VNodes。它的作用主要是为高效的更新虚拟DOM。vue会基于key的变化重新排列元素顺序,并且会移除可以不存在的元素。有相同父元素必须有独特的key。重复的key会造成渲染错误。

v-for 和 v-if 不能一起使用!

v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中,不利于性能优化
建议:

  1. 使用computed
  2. 数组情况下: v-for=“(item,index) in Array.filter(v => v.value)”
  3. v-for外层或里层再套一层用v-if

@click的event

  1. 不需要传参数的 可以直接在methods方法的对应事件函数中直接获取获取event
//template
@click="fun1" 
//methods
fun1(event){
}
  1. 需要传参数的,需要把event参数带过去,使用$event
//template
@click="fun2(2,$event)" 
//methods
fun2(val,event){
}

修饰符

事件修饰符

  • stop: 阻止事件冒泡
  • prevent: 阻止默认事件,如超链接标签的重定向
  • capture: 网页是默认按照冒泡方式去触发函数的,但是当我们使用.capture修饰符时,网页就会按照捕获的方式触发函数,也就是从外向内执行,但是这个时候一定要注意,.capture修饰符一定要写在外层才能生效

表单项修饰符

  • trim: 截掉前后空格
  • lazy: 类似防抖,输入结束后才会变化,输入的过程中不会变化
  • number: 转化为数字

父子组件通讯

重要!!面试常问!!
我的另一篇详细介绍:https://blog.csdn.net/qq_37215621/article/details/126881423

生命周期

  • 挂载阶段:
    beforeCreat:执行时,data和methods中的数据都还没有初始化
    created:data和methods都已经初始化好了,此函数可以操作data数据和methods方法
    beforeMount:此函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时,页面还是旧页面
    mounted: 经将编译好的模板,挂载到了页面指定的容器中显示
  • 更新阶段:
    beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
    updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
  • 销毁阶段:
    beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
    destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

父子组件生命周期顺序

口诀:创建从外到内,渲染从内到外


父先created
子created
子mounted
父mounted


父beforeUpdate
子beforeUpdate
子updated
父updated


父beforeDestroy
子beforeDestroy
子destroyed
父destroyed

$nextTick

  1. vue是异步渲染
  2. data改变,dom不会立刻渲染
  3. $nextTick会在Dom渲染完成之后触发,以获取最新DOM节点
this.$nextTick(()=>{
})

当多次修改data数据时,Vue会做一个data整合进行一次渲染(也就只会调用$nextTick一次)

slot 插槽

  1. 默认插槽
//父组件
<Child><div><h2>hello, child</h2></div>
</Child>//子组件
<template>    <div>            <slot></slot>   </div>
</template>
  1. 作用域插槽
    子组件向父组件传递数据
//子组件
<slot :slotData="val"></slot>
//父组件
<Index><template v-slot="receivedSlot"><h4>从slot那边接收来的数据:{{receivedSlot.slotData}}</h4>       </template>
</index>
//receivedSlot.slotData,命名对应父组件receivedSlot和子组件slotData// Demo
<slot :str="xxx" :obj="{name: 'zs'}"><slot>
/ 使用// 组件只有默认插槽,v-slot可以写在组件上,但不能用缩写形式
<Demo v-solt="data">{{data.str}} / {{data.obj.name}}
</Demo>// 组件有多个插槽,v-slot写在template上,可以用缩写形式
<Demo><template #default="data">{{data.str}} / {{data.obj.name}}</template>
</Demo>// 插槽Prop解构
<template #default="{str, obj}">{{str}} / {{obj.name}}
</template>// 插槽Prop重命名
<template #default="{str: text, obj: data}">{{text}} / {{data.name}}
</template>// 插槽Prop默认值
<template #default="{str = 'zzz', obj = {name: 'ls'}">{{text}} / {{data.name}}
</template>
  1. 具名插槽
    在这里插入图片描述
    v-slot只能写在 template 上,当只有默认插槽时组件标签才能当插槽模板使用,v-slot 缩写 #
<template #default> defalut </template>
<template #footer> footer </template>

动态组件

  • 通过 <component :is="component - name"> 来切换不同的组件
  • 切换的组件不会被缓存,通常配合 <keep-alive>来使用
<div v-for="(item, index) of arr" :key="index"><component :is="item" />
</div>...
import text from 'xxx/text'
import image from 'xxx/image'
...
data() {return {arr: ['text', 'image'] // 根据数据的值进行不同组件不同顺序渲染}
}
...

异步组件

说明:

  • 当某些组件体积过大,如:代码编辑器、echarts图表,直接全部同步打包会导致体积特别大

  • 通过 import() 函数引入

  • 按需加载,异步加载大组件,使用才加载,不用永远不加载

<Child v-model="name" v-if="showComponent" />
<button @click="show">点击显示组件</button>components: {Child: ()=>import('./Child.vue')}
// 全局注册// 在工厂函数中定义
Vue.component('async-component', function(resolve, reject) {resolve({// 组件内容template: '<div>async-component<div>'})
})// 配合 webpack 的 code-splitting 功能使用,将构建代码分割成多个包,这些包通过 Ajax 加载
Vue.component('async-component', funcrion(resolve) {require(['xxx/yyy.vue'], resolve)
})// 在工厂函数中直接返回一个 Promise
Vue.component('async-component', () => import('xxx/yyy.vue'))// 局部注册// 返回一个 Promise
...
components: {'async-component': () => import('xxx/yyy.vue')
}
...// 返回一个 对象
...
components: {'async-component': () => ({component: () => import('xxx/yyy.vue'), // 加载组件loading: LoadingComponent, // 加载展示组件error: errorComponent, // 失败展示组件delay: 200, // 延迟展示时间timeout: 3000 // 加载超时时间})
}
...

keep-alive

  • keep-alive 会缓存组件

  • keep-alive 从 vue 即框架层面控制,v-show 从 css 层面来控制

  • keep-alive 再次使用组件不会重新创建和渲染,v-if 每次都会销毁和创建,并创建VNode,执行diff算法
    keep-alive将组件生成的dom缓存起来,下次再重建时直接拿来使用,不执行destroy和mounted

mixin

多个组件有相同的逻辑,抽离出来

//mix.js:
export default {data(){return {time: new Date()}},methods: {getDowtime(){console.log('现在时间是:', this.time);}}
}//引入:
import mix from './mix'
export default {mixins: [mix], //可以添加多个,会自动合并起来
}

问题:

  • 变量来源不明确,不利于阅读。

  • 多mixin可能会造成命名冲突(可能有覆盖的情况)。

  • 多mixin和组件可能会出现多对多的关系,复杂度较高。

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

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

相关文章

飞书-多维文档-计算时间差

1. 选择字段类型 如图所示&#xff0c;字段类型选择 公式 2. 编辑公式 单击 公式编辑器 在弹出的公式编辑框中输入公式 TEXT([终结时间]-[开始时间],"HH:MM") [终结时间] 和 [开始时间] 请替换成你的表格中对应的字段名称HH:MM 表示输出的时间格式为 时:分其中 “…

SpringAMQP

SpringAMQT RabbitMQ安装与部署RabbitMQ结构简单队列模型 SpringAMQP依赖引入配置RabbitMQ连接信息基本模型简单队列模型WorkQueue模型 发布订阅模型FanoutExchangeDirectExchangeTopicExchange 消息转换器 消息队列是实现异步通讯的一种方式&#xff0c;我们将从RabbitMQ为例开…

Python实现一个简单的http服务,Url传参输出html页面

摘要 要实现一个可以接收参数的HTTP服务器&#xff0c;您可以使用Python标准库中的http.server模块。该模块提供了一个简单的HTTP服务器&#xff0c;可以用于开发和测试Web应用程序。 下面是一个示例代码&#xff0c;它实现了一个可以接收参数的HTTP服务器&#xff1a; 代码…

递福巴士是不是骗局呢?

递福巴士的背景介绍 递福巴士是社区服务机构软件。递福巴士是一家提供公益服务的平台&#xff0c;为社区居民提供各种服务和支持的软件。多年来&#xff0c;递福巴士一直致力于社区服务和社会公益&#xff0c;积极推动社区的发展&#xff0c;改善社区居民的生活质量。 递福巴士…

ChessGPT:免费好用的国际象棋对弈AI机器人

对于国际象棋初学者&#xff0c;需要找一个对手来练棋。ChessGPT&#xff0c;就是一个免费好用的AI对弈机器人&#xff0c;非常适合新手来提升&#xff0c;是一个很好的练习伙伴。网站地址是&#xff1a;https://www.chess.com/play/computer&#xff0c;也有手机版app&#xf…

4.9 多协议标记交换MPLS

思维导图&#xff1a; 前言&#xff1a; **4.9 多协议标记交换MPLS笔记** 1. **定义与背景**&#xff1a; - MPLS (多协议标记交换) 是一种由 IETF 开发的新协议。 - “多协议”意味着 MPLS 的上层可以使用多种协议。 - 该协议综合了多家公司的技术&#xff0c;如 C…

GitHub和Gitee的区别以及具体使用

文章目录 GitHub和GiteeGitHub和Gitee区别GitHub的使用Gitee的使用 GitHub和Gitee GitHub和Gitee区别 速度不同&#xff1a;GitHub位于美国&#xff0c;而Gitee位于中国。这意味着在中国使用Gitee可能会有更快的访问速度和更好的稳定性。如果我们希望体验Git飞一般的速度&…

配置公网和私网用户通过非公网口的IP地址访问内部服务器和Internet示例

组网需求 如配置公网和私网用户通过非公网口的IP地址访问内部服务器和Internet示例所示&#xff0c;某小型企业内网部署了一台路由器、一台FTP服务器和一台Web服务器。路由器作为接入网关&#xff0c;为下挂的内网用户提供上网服务&#xff0c;主要包括浏览网页、使用即时通信…

【扩散模型】【文本到音频论文系列翻译二】使用指令微调LLM和潜在扩散模型的文本到音频生成

&#x1f525; &#x1f525;&#x1f525; github: https://github.com/declare-lab/tango 效果&#xff1a;https://tango-web.github.io/ 论文地址&#xff1a;https://arxiv.org/pdf/2304.13731.pdf 数据集audiocaps下载&#xff1a; https://blog.csdn.net/weixin_4350969…

C++笔记之遍历vector的所有方式

C笔记之遍历vector的所有方式 —— 2023年4月15日 上海 code review 文章目录 C笔记之遍历vector的所有方式1.普通for循环2.迭代器版3.const迭代器4.C11引入的范围for循环5.使用auto关键字和迭代器6.使用std::for_each算法7.使用std::for_each和lambda表达式8.普通版vector::at…

Python+playwright 实现Web UI自动化

实现Web UI自动化 技术&#xff1a;Pythonplaywright 目标&#xff1a;自动打开百度浏览器&#xff0c;并搜索“亚运会 金牌榜” 需安装&#xff1a;Playwright &#xff08;不用安装浏览器驱动&#xff09; # 使用浏览器&#xff0c;并可视化打开 browser playwright.ch…

原型链继承

方式一&#xff1a;原型链继承 1.套路&#xff1a; &#xff08;1&#xff09;定义父类型构造函数 &#xff08;2&#xff09;给父类型的原型添加方法 &#xff08;3&#xff09;定义子类型的构造函数 &#xff08;4&#xff09;创建父类型的对象赋值给子类型的原型 &…

分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于BiGRU-AdaBoos…

音乐制作软件 Ableton Live 11 Suite mac中文版功能介绍

Ableton Live 11 Suite mac是一款专业级别的音乐制作软件&#xff0c;它提供了多种音乐制作和编辑功能&#xff0c;可以帮助用户创建各种音乐作品。界面简单直观&#xff0c;可以方便地进行各种音乐制作操作。它提供了丰富的音乐制作工具和功能&#xff0c;如录音、采样、编曲、…

【数据结构】【C语言】【环形链表约瑟夫问题】

1.问题描述及背景&#xff1a; 著名的Josephus问题 据说著名犹太 历史学家 Josephus有过以下的故事&#xff1a;在罗⻢⼈占领乔塔帕特后&#xff0c;39 个犹太⼈与 Josephus及他的朋友躲到⼀个洞中&#xff0c;39个犹太⼈决定宁愿死也不要被⼈抓到&#xff0c;于是决定了⼀个⾃…

spacy.load(“en_core_web_trf“)报错TypeError: issubclass() arg 1 must be a class

使用spacy时遇到的问题 写在最前面&#xff1a; 安装spacy和en_core_web_trf时需要保证二者版本一致 安装及查看对应spacy版本 安装 pip install spacy查看版本 import spacy spacy.__version__安装en_core_web_trf 直接安装&#xff08;如果可以的话&#xff09; pytho…

Django实现音乐网站 (21)

使用Python Django框架做一个音乐网站&#xff0c; 本篇音乐播放器功能完善及原有功能修改。 目录 播放列表修改 视图修改 删除、清空播放器 设置路由 视图处理 修改加载播放器脚本 模板修改 脚本设置 清空功能实现 删除列表音乐 播放列表无数据处理 视图修改 播放…

Linux环境部署应用必知必会

修改环境变量 Linux环境变量配置的6种方法&#xff0c;建议收藏&#xff01; - 知乎 修改java环境变量 软件安装 安装redis redis是一个非关系型数据库&#xff0c;是一个存储键值对的数据库&#xff0c;通常被称为数据结构服务器。 值&#xff08;value&#xff09;可以是…

《红蓝攻防对抗实战》二.内网探测协议出网之TCP/UDP协议探测出网

目录 一.TCP/UDP协议探测出网 1.NC工具探测TCP协议出网 2.Telnet命令探测TCP协议出网 3.UDP协议探测出网 当红队人员在进行内网渗透时&#xff0c;经常会遇到目标主机不出网的场景&#xff0c;而主机不出网的原因有很多&#xff0c;常见的原因例如目标主机未设置网关&#…

Zoho Creator推出全新的Canvas布局设计器功能

自2021年Zoho CRM的UI设计工具——Canvas画布功能发布以来&#xff0c;受到了广泛好评&#xff0c;它的出现为CRM的页面布局形式提供了更多选择和可能&#xff0c;让CRM用户彻底告别了“单调、死板、机械”的交互页面。 8月1日&#xff0c;Zoho Creator也推出了全新的Canvas画…