根据对面试的回忆撰写的 、标准答案在网上查的,记录和学习使用,侵删
公司业务:游戏
公司技术栈:vue2、vue3、将来要新增react
1、vue的页面跳转方法
-
使用
vue-router
提供的router-link
组件:
<router-link to="/about">About</router-link>
2.在JavaScript中使用this.$router.push
:
this.$router.push('/about');
3.使用router-link
的replace
属性来避免向history栈添加新记录:
<router-link to="/about" replace>About</router-link>
4.使用编程式导航结合replace
方法:
this.$router.replace('/about');
5.使用window.location.href
或window.location.replace
进行重定向:
window.location.href = 'http://www.example.com/about';
// 或者
window.location.replace('http://www.example.com/about');
-
使用Vue Router的
router-view
组件动态加载不同的组件:
// 在路由配置中
const routes = [
{ path: '/about', component: AboutComponent }
];
2、vue2和vue3的区别
一、变化
1.速度更快
Vue3相比Vue2
重写了虚拟Dom实现
编译模板的优化
更高效的组件初始化
undate性能提高1.3~2倍
SSR速度提高了2~3倍
2.体积更小
通过webpack的tree-shaking功能,可以将无用模块“剪辑”,仅打包需要的
能够tree-shaking,有两大好处:
对开发人员,能够对vue实现更多其他的功能,而不必担忧整体体积过大
对使用者,打包出来的包体积变小了
vue可以开发出更多其他的功能,而不必担忧vue打包出来的整体体积过多
3.更易维护
compositon Api
可与现有的Options API一起使用
灵活的逻辑组合与复用
Vue3模块可以和其他框架搭配使用
更好的Typescript支持
Vue3是基于typescipt编写的,可以享受到自动的类型定义提示
编译器重写
4.更接近原生
可以自定义渲染 API
5.更易使用
响应式 API 暴露出来
轻松识别组件重新渲染原因
二、Vue3新增特性
Vue3 中需要关注的一些新功能包括:
framents
Teleport
createRenderer
composition Api
1.framents
在 Vue3.x 中,组件现在支持有多个根节点
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
2.Teleport
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,就有点像哆啦A梦的“任意门”
在Vue2中,像 modals,toast 等这样的元素,如果我们嵌套在 Vue 的某个组件内部,那么处理嵌套组件的定位、z-index 和样式就会变得很困难
通过Teleport,我们可以在组件的逻辑位置写模板代码,然后在 Vue 应用范围之外渲染它
<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
<div v-if="visible" class="toast-wrap">
<div class="toast-msg">我是一个 Toast 文案</div>
</div>
</teleport>
3.createRenderer
通过createRenderer,我们能够构建自定义渲染器,我们能够将 vue 的开发模型扩展到其他平台
我们可以将其生成在canvas画布上
关于createRenderer,我们了解下基本使用,就不展开讲述了
import { createRenderer } from '@vue/runtime-core'
const { render, createApp } = createRenderer({
patchProp,
insert,
remove,
createElement,
// ...
})
export { render, createApp }
export * from '@vue/runtime-core'
4.composition Api
Composition API,也就是组合式api,通过这种形式,我们能够更加容易维护我们的代码,将相同功能的变量进行一个集中式的管理
关于compositon api的使用,这里以下图展开
简单使用:
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
onMounted(() => console.log('component mounted!'))
return {
count,
double,
increment
}
}
}
三、非兼容变更
1.Global API
全局 Vue API 已更改为使用应用程序实例
全局和内部 API 已经被重构为可 tree-shakable
2.模板指令
组件上 v-model 用法已更改
<template v-for> 和 非 v-for 节点上 key 用法已更改
在同一元素上使用的 v-if 和 v-for 优先级已更改
v-bind="object" 现在排序敏感
v-for 中的 ref 不再注册 ref 数组
3.组件
只能使用普通函数创建功能组件
functional 属性在单文件组件 (SFC)
异步组件现在需要 defineAsyncComponent 方法来创建
4.渲染函数
渲染函数API改变
$scopedSlots property 已删除,所有插槽都通过 $slots 作为函数暴露
自定义指令 API 已更改为与组件生命周期一致
一些转换 class 被重命名了:
1.v-enter -> v-enter-from
2.v-leave -> v-leave-from
组件 watch 选项和实例方法 $watch 不再支持点分隔字符串路径,请改用计算函数作为参数
在 Vue 2.x 中,应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。Vue3.x 现在使用应用程序容器的 innerHTML。
5.其他小改变
destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
prop default工厂函数不再有权访问 this 是上下文
自定义指令 API 已更改为与组件生命周期一致
data 应始终声明为函数
来自 mixin 的 data 选项现在可简单地合并
attribute 强制策略已更改
一些过渡 class 被重命名
组建 watch 选项和实例方法 $watch 不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
<template> 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 现在被视为普通元素,并将生成原生的 <template> 元素,而不是渲染其内部内容。
在Vue 2.x 中,应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML,这意味着容器本身不再被视为模板的一部分。
5.移除 API
keyCode 支持作为 v-on 的修饰符
$on , $off 和 $once 实例方法
过滤 filter
内联模板 attribute
$destroy 实例方法。用户不应再手动管理单个Vue 组件的生命周期。
3、页面中元素水平居中的方法
- 使用
margin: auto
:这是最常用的方法之一,适用于块级元素的水平居中。通过给元素设置左右外边距为auto
,浏览器会自动计算并设置左右外边距以使元素在其父容器中居中。这种方法要求元素具有指定的宽度。例如,如果一个元素的宽度被设置为300px,并且左右外边距设置为auto,那么该元素将在其父容器中水平居中1。 - 使用
text-align: center
:这种方法适用于文本或内联元素的水平居中。通过将父容器的text-align
属性设置为center
,可以使容器内的内联元素或文本水平居中。这种方法对于文本或行内元素特别有效2。 - 使用Flexbox布局:Flexbox是CSS3引入的一种新的布局模式,它提供了在容器内对齐和分布元素的一种灵活方式。通过设置容器的
display
属性为flex
,并使用justify-content: center
属性,可以使容器内的元素水平居中1。 - 使用绝对定位和
transform: translateX(-50%)
:这种方法适用于任何元素,包括块级元素。通过将元素的定位设置为绝对定位,并将其左边缘设置为父容器的50%,然后使用transform: translateX(-50%)
,可以将元素水平居中。这种方法不需要知道元素的宽度,因为它会自动调整以适应父容器的宽度3。 - 使用
calc()
函数:通过结合使用绝对定位和calc()
函数,可以根据需要计算元素的左边缘位置,从而实现水平居中。这种方法需要知道父容器的宽度和元素的宽度,以便进行正确的计算4。 - 使用网格布局:对于更复杂的布局,可以使用CSS Grid布局来实现元素的水平居中。通过设置网格容器的
justify-items: center
属性,可以使网格内的项目水平居中1。
这些方法提供了灵活的选项来实现页面中元素的水平居中,选择哪种方法取决于具体的需求和布局的复杂性。