Vue面试题整理:

作者: 我家有个王胖胖 | 来源:发表于2022-03-30 13:31 被阅读0次

vue常见面试题
Vue.js 相关问题
2018-07-23
vue常见的面试题
vue.js面试题整理
vue面试题整理
vue面试题整理
Vue面试题整理
vue面试题整理
vue面试题整理

1.vue生命周期
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的，不能直接操作页面的dom和获取dom对象
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的data和 methods、指令、过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed：这个时候上所有的data和methods、指令、过滤器 ……都是处于不可用状态。组件已经被销毁了。
2.css动画
transform:描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix.常常配合transition,animation实现动画效果.
①transition:
四个属性:

img{
    transition-property: height;//执行动画的属性
    transition-duration: 1s;//动画执行时间
    transition-delay: 1s;//动画延迟时间
    transition-timing-function: ease;//动画执行模式
}
//简写形式:
img{
    transition: 1s 1s height ease;
}

transition-timing-function:
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）ease: 逐渐放慢
（5）cubic-bezier函数：自定义速度模式工具网站
局限性:
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性
②Animation:

div:hover {
  animation-name: rainbow;//动画名称
  animation-duration: 1s;//动画指定需要多少秒或毫秒完成
  animation-timing-function: linear;//设置动画将如何完成一个周期
  animation-delay: 1s;//设置动画在启动前的延迟间隔。
  animation-fill-mode:forwards;//规定当动画不播放时
//（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
  animation-direction: normal;//指定是否应该轮流反向播放动画。
  animation-iteration-count: 3;//定义动画的播放次数。
animation-play-state:pause||running
}

animation-timing-function:
1️⃣linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(同transition)
2️⃣steps:steps函数可以实现分步过渡
animation-direction:

animation-direction.png

animation-fill-mode:
（1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）forwards:停留在结束状态。
（4）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
keyframes的写法:
keyframes关键字用来定义动画的各个状态，它的写法相当自由。

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}
//0%可以用from代表，100%可以用to代表，因此上面的代码等同于下面的形式。
@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

示例:

vue过渡状态.png

//在 CSS 过渡和动画中自动应用 class
<transition name="fade">
      <div v-show="show">你好呀</div>
    </transition>
//渐显渐隐效果
.fade-enter, .fade-leave{
  opacity: 0;
}
.fade-enter-active, .fade-leave-active{
  transition: opacity 3s;
}

在过渡钩子函数中使用 JavaScript 直接操作 DOM

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

scoped 和 module的区别:
scoped 和 module的区别详解

一，scoped用法。
1，使用原理。
采用postcss的相似的方式。在scoped规定区域内的样式。渲染后给元素加上属性，并将选择器变成属性选择器。这样就限定了范围。防止形成全局样式。
eg:

.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

渲染后

<style>
.example[data-v-5558831a] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

2，缺点，
无法修改子组件、第三方组件、 v-html 创建的 DOM 、的样式，

3，解决方案。
1),通过穿透scoped，使用深度选择器，例如’>>>’。
2),另外用一个普通不含scoped的style标签。在里面书写样式。
总结：上面不管是那种方式都是违背scoped的原则。都会形成全局样式。所以使用scoped的一般是中小型项目。

1，使用原理
将module的里面的样式都保存在$style对象中，渲染后选择器会加上该组件所在文件的文件名作为前缀；由于是个对象所以也同事能将样式导出供其他页面使用。

2，基本例子：

<template>
  <div :class="$style.content">
    <div :class="$style['title-wrap']">我是红色的</div>
    <green-title></green-title>
  </div>
</template>
 
<style lang="scss" module>
.content {
  .title-wrap {
    font-size: 20px;
    color: red;
  }
}
</style>

渲染后

3，导出使用

<template>
  <div :class="$style.content">
    <div :class="$style['title-wrap']">我是红色的</div>
    <green-title :styleTitle="$style['title-wrap']"></green-title>
  </div>
</template>
<template>
  <div class="content">
    <div :class="styleTitle">我是绿色的</div>
  </div>
</template>
<script>
 
export default {
  props: {
    styleTitle: String,
  },
}
</script>

3，结论
根据渲染前后变化其实也是就形成一个特殊的模块化的命名方式。来形成全局样式，只是由于加上选择器前缀比较显得跟私有化些，一般难以重名而已。