2023前端面试

VIP文章华而有识

已于 2023-03-03 15:32:48 修改

阅读量1.5k

点赞数

文章标签：前端 javascript css3 vue.js Powered by 金山文档

于 2023-02-08 16:01:47 首次发布

本文链接：https://blog.csdn.net/FrontEndEngineer/article/details/128937370

版权

VUE

vue3.0性能提升主要是通过哪几个方面体现的

响应式实现优化，vue2使用数据劫持需要递归去做响应式处理，vue3使用proxy代理一步到位

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 中的组件，此时会多出两个生命周期的钩子: activated 与 deactivated：

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函数会在数据变化时被触发，但却不能准确的判断是那个属性值被改变，所以在实际情况中用 computed或watch函数来监听属性的变化，并做一些其他的操作

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路由

基本使用

安装vue-router,命令: npm i vue-router

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

编写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
                }
            ]
        },
        
    ]

动态路由

实现方式

最低0.47元/天解锁文章

华而有识

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2023前端面试

obj对象想要获取name或者say，首先判断自己的属性当中有没有，如果没有找到，那么就在__proto__属性中去找，而这个时候__proto__与Person的prototype是相等的，也就是__proto__指向Person，那么便可以找到name和say。为了处理异步，当触发事件的时候，会通过dispatch来访问action中的方法，actions中的commit会触发mutation中的方法从而修改state里的值，通过getter把数据更新到视图中。这些都是计算属性无法做到的。
复制链接

扫一扫