首页 > 其他分享 >vue2面试题

vue2面试题

时间:2024-10-09 17:48:43浏览次数:8  
标签:面试题 传值 vue2 组件 data 路由 页面

vue2生命周期

系统自带:
    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    beforeDestroy
    destroyed
2.一旦进入到页面或者组件,会执行哪些生命周期,顺序。
beforeCreate
created
beforeMount
mounted
3.在哪个阶段有$el,在哪个阶段有$data
    beforeCreate啥也没有
    created有data没有el
    beforeMount有data没有el
    mounted都有
4.如果加入了keep-alive会多俩个生命周期
activated、deactivated
5.如果加入了keep-alive,第一次进入组件会执行哪些生命?
beforeCreate
created
beforeMount
mounted
activated
6.如果加入了keep-alive,第二次或者第n次进入组件会执行哪些生命周期?
只执行一个生命周期:activated

谈谈你对keep-alive的了解

1.是什么
vue系统自带的一个组件,功能:是来缓存组件的。===》提升性能
2.使用场景
就是来缓存组件,提升项目的性能。具体实现比如:首页进入到详情页,如果用户在首页每次点击都是相同的,那么详情页就没必要请求N次了,直接缓
存起来就可以了,当然如果点击的不是同一个,那么就直接请求。

v-if 和 v-show的区别

1.展示形式不同
v-if是创建一个dom节点
v-show 是display:none、block
2.使用场景不同
初次加载v-if要比v-show好,页面不会做加载盒子
频繁切换v-show要比v-if好,创建和删除的开销太大了,显示和隐藏开销较小

v-if和v-for优先级

v-for的优先级要比v-if高
***是在源码中体现的:function genElement

ref是什么

来获取dom的
<template>
    <div class="home">
    <img
    ref='imgs'src="../assets/logo.png" id='img'/>
    </div>
</template>
<script>
export default
    name: "Home",
    mounted(){
    console.log( document.getElementById('img'));
    console.log(·this.$refs.imgs·)
</script>

nextTick是什么?

获取更新后的dom内容

scoped原理

1.作用:让样式在本组件中生效,不影响其他组件。
2.原理:给节点新增自定义属性,然后css根据属性选择器添加样式。
   一 、让css只在当前组件生效
    <style scoped>
   二、 scss、 stylus
scss:
    1.下载
    npm install
    sass-loader node-sass
    --save
    2.
    <style lang='scss' scoped>
    3.scss 样式穿透
    父元素/deep/子元素
stylus:
    下载
    npm install stylus
    s stylus-loader
    --save
    2
    <style lang='stylus' scoped>
    3. stulus 
    样式穿透
    父元素>>>子元素

父子组件传值、兄弟组件传值

    子组件
1.父组件传值
    父组件:
    <Header :msg='msg'></Header>
    子组件:
    props:['msg']
    props:{
    msg:数据类型
    }
2.子组件 传值
    父组件
    子组件:
    this.$emit("自定义事件名称",要传的数据);
    父组件:
    <Header @childInput='getVal'></Header>
    methods:{
    getVal(msg) {
    / /msg就是,子组件传递的数据
    }
3.兄弟组件之间的传值
    (bus)
通过一个中转
A兄弟传值:
    import bus from '@/common/bus
    bus.$emit("toFooter",this.msg) ;
B兄弟接收:
    import bus from '@/common/bus'
    bus.$on('toFooter',(data)=>{
    this.str=data;
    })

面试题:computed、methods、watch有什么区别?

1. computed vs methods区别
    computed是有缓存的
    methods没有缓存
2.computedvswatch区别
    watch是监听,数据或者路由发生了改变才可以响应(执行)
    computed计算某一个属性的改变,如果某一个值改变了,计算属性会监听到进行返回
    watch是当前监听到数据改变了,才会执行内部代码

面试题:props和data优先级谁高?

在这里插入图片描述

   props ===> methods ===> data ===> computed ===>watch

面试题:Vuex有哪些属性?

state、getters、mutations、actions、modules
state类似于组件中data,存放数据
getters类型于组件中computed
mutations类似于组件中methods
actions提交mutations的
modules把以上4个属性再细分,让项目更好管理

面试题:Vuex中的mutaitons和actions区别

    
mutaitons 都是同步事物
actions  可以包含任意异步操作
   
***在调试中就看出来

面试题:Vuex是单向数据流还是双向数据流?

Vuex是单向数据流

面试题:Vuex如何做持久化存储

Vuex本身不是持久化存储
1.使用localstorage自己写
2. 使用vuex-persist插件

vue 设置代理

module.exports = {
    devServer:·{
        proxy:·'http://localhost:3000
    }
}

打包路径和路由模式

路由模式 :history
前端如果自己测试项目,hash
项目上线要求是 history 模式, 该怎么办?重定向
module.exports = {
    publicPath:'./
}

代理和环境变量

vue-cli

面试题:Vue路由模式

路由模式有俩种:history、hash
区别:
1.表现形态不同
    history:http://localhost:8080/about
    hash:http://1oca1host:8080/#/about
2.跳转请求
    history : http://localhost:8080/id  ===>发送请求
    hash不会发送请求
3。打包后前端自测要使用hash,如果使用history会出现空白页

面试题:介绍一下SPA以及SPA有什么缺点

SPA是什么?单页面应用
缺点:
    1.SEO优化不好
    2.性能不是特别好

面试题:Vue路径传值

1.显式
    http://localhost:8080/about?a=1
    1.1 传:
     this.$router.push({
        path:'/about',
        query:{
            a:1
        }
     })
    1.2 接:this.$route.query.a
2.隐式
    http://1oca1host:8080/about
    2.1 传:
     this.$router.push({
        name:'About'
        params:{
           a:1
        }
     })
    2.2 接: this.$route.params.a

面试题:双向绑定原理

通过Object.defineProperty劫持数据发生的改变,如果数据发生改变了(在set中进行赋值的),触发update方法
进行更新节点内容(str}),从而实现了数据双向绑定的原理。

路由导航守卫有哪些

全局、路由独享、组件
1.全局
    beforeEach、beforeResolve、afterEach
2.路由独享
    beforeEnterl
3。 组件内
    beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

面试题:Vue动态路由

场景:详情页(文章、商品)

在这里插入图片描述

谈一下MVVM框架

web1.0时代
    文件全在一起,也就是前端和后端的代码全在一起
    问题:
    1、前端和后端都是一个人开发。(技术没有侧重点或者责任不够细分)
    2、项目不好维护。
    3、html、CSS、js页面的静态内容没有,后端是没办法工作的(没办法套数据)。
    mVc..都是后端先出的
web2.0时代
    ajax出现了,就可以:前端和后端数据分离了。
    解决问题:后端不用等前端页面弄完没,后端做后端的事情(写接口)、前端布局、特效、发送请求。
    问题:
    1、html、cSS、js都在一个页面中,单个页面可能内容也是比较多的(也会出现不好维护的情况)。
出现前端的框架了MVC、MVVM
    解决问题:可以把一个"特别大"页面,进行拆分(组件化),单个组件进行维护
什么是MVVM
    Model-View-ViewModel的简写

在这里插入图片描述

view:视图【dom==》在页面中展示的内容】
model:模型【数据层:vue中的data数据】
viewModel:视图模型层【就是vue源码】

标签:面试题,传值,vue2,组件,data,路由,页面
From: https://blog.csdn.net/Aa12364567/article/details/142639397

相关文章

  • vue2 setting配置
    {  "workbench.iconTheme":"vscode-icons",  "vsicons.dontShowNewVersionMessage":true,  "terminal.integrated.profiles.windows":{    "cmd":{      "path":"C:\\Windows......
  • 代码随想录算法训练营第四天|24. 两两交换链表中的节点、19.删除链表的倒数第N个节点
    24.两两交换链表中的节点力扣题目链接(opensnewwindow)给定一个链表,两两交换其中相邻的节点,并返回交换后的链表。你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换。输入:head=[1,2,3,4]输出:[2,1,4,3]示例2:输入:head=[]输出:[]示例3:输入:head=[1]......
  • 为什么张雪峰推荐普通人家的孩子考研考计算机?从阿里一面面试题说起:剑指 offer - 159:库
    张雪峰推荐普通人考研考计算机相关专业,主要是因为计算机技术在现代社会中薪资水平相对较高。另一方面,也是计算机专业在平时就学习了数据结构等课程,在招聘前冲刺复习的时候比像我这样的非科班选手要省下不少精力。拿我经历过的阿里巴巴C++后端一面来说,面试官考察了最基本的......
  • 2024年Java最新面试题总结(五年经验)
    第一章、基础技术栈1.1)集合,string等基础问题1、arraylist,linkedlist的区别,为啥集合有的快有的慢①ArrayList它的底层是数组,有下标的概念,可以通过index下标直接定位元素,所以查询快;在增删时,会进行扩容判断和拷贝,所以增删慢。②LinkedList的底层是双向链表。每次查询都要循环......
  • JAV面试题答案——红黑树怎么保持平衡的
    红黑树根据规则通过旋转和节点染色这两种方式来保持平衡,这些操作是红黑树维持平衡的关键部分。1.旋转操作旋转操作是红黑树维持平衡的主要手段之一,它包括左旋和右旋两种基本操作。旋转操作通常在插入和删除操作中使用,以确保树的性质得以维护左旋将一个节点的右子树提升为其......
  • Java八股文面试题之Java基础篇(一)
     1.JDK、JRE、JVM有什么区别?JDK(JavaDevelopmentKit):是Java开发工具包,它提供了Java开发所需的开发工具、编译器和运行环境等多种组件。JJRE,还有一些开发者所需的额外组件(如编译器、调试器、文档生成工具等),可以用来开发和编译Java应用程序。JDK对于开发者来说是必备的......
  • 牛客网1000 大厂Java 面试题大全(2024 最新版)
    很多Java工程师的技术不错,但是一面试就头疼,10次面试9次都是被刷,过的那次还是去了家不知名的小公司。问题就在于:面试有技巧,而你不会把自己的能力表达给面试官。应届生:你该如何准备简历,面试项目和面试说辞?Spring底层逻辑是什么?1-3年经验的程序员:面试中你该讲哪些值钱......
  • 面试字节跳动精选20道产品经理面试题分析回答
    分享20道字节跳动产品经理的面试题,产品经理的面试很多会跟项目强关联,比如面试电商产品经理,就要多聊电商的业务,所以我们选了一些比较通用的,面试题及我们的分析回答。0120道面试题(前10道)1)自我介绍。2)为什么做产品经理?3)这么多年的工作经验,你对产品经理有什么新的认知?4)你......
  • Java大厂面试题合集!
    1、为什么要使用线程池  难度系数:⭐使用线程池的主要原因包括:降低资源开销:线程池预先创建一定数量的线程,当需要处理任务时,直接从线程池中获取已经创建好的线程,避免了频繁地创建和销毁线程所带来的开销。这样可以显著提高系统的性能。控制并发线程数量:线程池可以限制同......
  • 【Kubernetes】常见面试题汇总(五十七)
    目录125.K8S创建服务status为ErrlmagePull?126.不能进入指定容器内部?特别说明:题目  1-68  属于【Kubernetes】的常规概念题,即“汇总(一)~(二十二)”。题目 69-113 属于【Kubernetes】的生产应用题,其中104-113为“情景类”。题目114-132属于【Kube......