首页 前端知识 2023前端面试

2023前端面试

2024-03-01 12:03:26 前端知识 前端哥 42 375 我要收藏
VUE
vue3.0性能提升主要是通过哪几个方面体现的
  1. 响应式实现优化,vue2使用数据劫持需要递归去做响应式处理,vue3使用proxy代理一步到位

  1. diff算法优化,vue2全量对比,vue3使用了静态标记、静态提升、函数缓存等去优化

mvvm

Model-View-ViewModel,

MVVM采用双向数据绑定,ViewModel把Model和View关联起来。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。

vue单向数据流的理解

指数据一般从父组件传到子组件,子组件没有权利直接修改

父组件传来的数据,即子组件从props中直接获取的数据,只能请求父组件修改数据再传给子组件,父组件属性值的更新会下行流动到子组件中。

可以用data承接props中数据

vue的两种路由模式及区别

vue有两种路由模式:hash、history,vue默认是hash模式

1.hash路由地址上由#号,history模式么有

2.在做回车刷新的时候,hash模式会加载对应页面,history会报错

比如这个 URL:http://www.abc.com/#/hello, hash 的值为 #/hello,如果改变hash值,做回车刷新会加载到对应的页面

它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

3.hash模式支持低版本浏览器,history不支持

4.hash不会重新加载页面,单页面应用必备

5.history有历史记录,h5新增pushState和replaceState去修改历史记录,不会立刻发送请求

6.history需要后台配置

hash: url中有“#”号;

hash值(“#”后的值)不会被包含在http请求中,改变hash值不会引起页面的重新加载.

hash改变会触发hashChange事件,会被浏览器记录下来,可以使用浏览器的前进和后退

hash兼容到IE8以上

会创建hashHistory对象,在访问不同的路由的时候,会发⽣两件事:

  • HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶

  • HasHistory.replace()替换到当前栈

history: url不带参数;

history 兼容 IE10 以上

history 模式需要后端配合将所有访问都指向 index.html,否则用户刷新页面,会导致 404

在HTML4中常用的方法:

history.forward():在历史记录中前进一步

history.back():在历史记录中后退一步

history.go(n):在历史记录中跳转n步骤,n=0为刷新本页,n=-1为后退一页。

HTML5中新增了

history.pushState(data[,title][,url]):向历史记录中追加一条记录

history.replaceState(data[,title][,url]):替换当前页在历史记录中的信息

history.state:是一个属性,可以得到当前页的state信息。

window.onpopstate:是一个事件,在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象,event.state即为通过pushState()或replaceState()方法传入的data参数

keep-alive的使用

在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验。

基础知识

<keep-alive>包含动态组件,可以使被包含的组件保留状态,避免重新渲染,实现组件缓存。

<!-- 非活跃的组件将会被缓存! -->
<KeepAlive>
  <component/>
</KeepAlive>

被 keep-alive 包含的组件不会被再次初始化,也就意味着不会重走生命周期函数.

当希望缓存的组件能够再次进行渲染, Vue 为我们解决了这个问题,被包含在 keep-alive 中的组件, 此时会多出两个生命周期的钩子: activateddeactivated

  • activated 在首次挂载,以及每次从缓存中被重新插入的时候调用

  • deactivated 在从 DOM 上移除、进入缓存 以及组件卸载时调用

// 在index组件页面的activated钩子
activated() {
    // isUseCache为false时才重新刷新获取数据
    // 因为对index使用keep-alive来缓存组件,所以默认是会使用缓存数据的         
    if(!this.$route.meta.isUseCache){            
        this.list = []; // 清空原有数据
        this.onLoad(); // 获取数据的函数
    } 
}

第一次进入:beforeRouterEnter ->created->mounted->activated->deactivated

后续进入时:beforeRouterEnter ->activated->deactivated

// 只缓存组件name为a或者b的组件
<keep-alive include="a,b"> 
  <component />
</keep-alive>

// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>

// 如果同时使用include,exclude,那么exclude优先于include, 下面的例子只缓存a组件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>

// 如果缓存的组件超过了max设定的值5,那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component  />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component />
</KeepAlive>

配合route使用

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件,比如 Home! -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不会被缓存的视图组件,比如 Profile! -->
</router-view>

应用场景

1.tabs切换时保留切换前的操作;

2.前进刷新、后退缓存用户浏览数据和浏览位置;

生命周期

beforeCreate : 数据和方法都不可以被使用

created:可以请求使用和修改数据,但不会更新视图 ,

在created钩子中可以对data数据进行操作,可以进行数据请求将返回的数据赋给data

beforeMount:完成模板的编译,虚拟dom创建完成,即将渲染

mounted:把编译的模板挂载到页面,可以异步请求,也可以访问dom,在这里请求数据会出现闪屏的问题

(模板挂载之前请求未完成)在create请求能够解决问题,

在mounted钩子对挂载的dom进行操作

beforeUpdate:组件即将更新,准备渲染,可以改数据

updated:组件 DOM 已经更新

虽然updated函数会在数据变化时被触发,但却不能准确的判断是那个属性值被改变,所以在实际情况中用 computedwatch函数来监听属性的变化,并做一些其他的操作

activated:keep-alive 组件激活时调用。

deactivated:keep-alive 组件停用时调用。

beforeDestroy:实例销毁之前调用

destroyed:Vue 实例销毁后调用

加载渲染过程:

父beforeCreate->父created-.>父beforeMount->子beforeCreate->子created-.>子beforeMount->子mounted->父mounted

子组件更新过程:

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

v-if 和 v-show 触发的生命周期

https://blog.csdn.net/SpringRolls/article/details/117187075

$nextTick

vue中的nextTick主要用于处理数据动态变化后,DOM还未及时更新的问题

适用场景

第一种:有时需要根据数据动态的为页面某些dom元素添加事件.

这就要求在dom元素渲染完毕时去设置,但是created与mounted函数执行时一般dom并没有渲染完毕,所以就会出现获取不到,添加不了事件的问题,这回就要用到nextTick处理

第二种:在使用某个第三方插件时 ,希望在vue生成的某些dom动态发生变化时重新应用该插件.

这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法,例如:应用滚动插件better-scroll时

第三种:数据改变后获取焦点

<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        showDiv : false
    },
    methods:{
        getText:function(){
            this.showDiv = true;
            this.$nextTick(function(){
                  var text = document.getElementById('div').innnerHTML;
                 console.log(text);  
            });
        }
    }
})
</script>
computed与watch区别

1.computed是一个计算属性,watch是监听data中的数据变化

2.computed支持缓存,依赖的属性值发生变化时,计算属性才会重新计算,watch不支持

3.computed不支持异步,watch可以异步

4.computed是第一次加载就监听,watch不是

5.computed需要return,watch不用

6.computed适用于一个数据被好几个数据影响的场景,wacth适用于一个数据影响好几个

computed:计算属性;computed 的值有缓存;依赖其它属性值,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;

watch: 监听数据的变化;更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;

运用场景:

1)当我们需要依赖于其它数据时进行数值计算,应该使用 computed。

因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;

2)当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch。

使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得 到最终结果前,设置中间状态。这些都是计算属性无法做到的。

性能优化

1.代码优化 不要把所有数据都放data中

尽可能拆分组件,提高复用性、维护性 keep-alive缓存组件 key值要保证唯一性 合理使用路由懒加载,异步组件

关于异步组件:https://www.cnblogs.com/LIXI-/p/16672518.html

2.加载优化 第三方ui框架按需引入 内容懒加载 图片懒加载

3.用户体验 骨架屏

4.打包优化 cdn形式加载第三方文件

抽离公共文件

5.缓存和压缩

常见的SPA首屏优化方式有哪些

1.路由懒加载

2.异步组件

3.静态资源放在cdn上(图片、文件等)

4.尽量较少dom数量和层级

5.图片不放在本地,用服务器存储,后端返回网址方式访问

6.骨架屏|loading

7.减少请求次数,加快服务器请求响应速度

8.第三方ui框架按需引入

vue路由
基本使用
  1. 安装vue-router,命令: npm i vue-router

  1. 引入vue-router之后应用插件: Vue.use(VueRouter)

  1. 编写router配置项

//该文件专门创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

多级路由

 routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'message',
                    component:Message
                },
                {
                    path:'news',
                    component:News
                }
            ]
        },
        
    ]
动态路由

实现方式

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2999.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!