面试题

1,谈谈你对单项数据的理解?

  当父组件给子组件传递数据的时候,子组件只允许进行接收,不能够进行修改,因为数据是单项流动的。

  如果子组件修改了父组件的信息后,可能会导致其他组件也会发生一些莫名的错误,导致你的错误无法捕获

2,为什么组件中的data是一个函数而不是一个对象?

  因为每个组件执行的时候都会返回一个对象,如果data是一个对象的情况下,那么这个对象就可能会进行复用(对象是引用数据类型)

  但是如果是一个函数的情况下,那么就是以每次返回一个新的对象,保证每个组件都有一份独立的对象(状态)

3,动态组件

  解释:多个组件通过同一个挂载点进行切换展示,通过is属性动态来改变组件

  通过一个内置组件<component></component>以及这个组件的属性is来进行切换的

  keep-alive:用来去包裹动态切换的页面或者组件(内置组件)

  作用:凡是keep-alive包裹的组件,不会被二次创建和销毁,而是进行一个缓存

  keep-alive组件身上会有以下这几个常用的属性

include:

  值:字符串 正则表达式

  作用:指定哪些组件被缓存

exclude:

  值:字符串 正则表达式

  作用:指定哪些组件被缓存

max:数字

  作用:最大可以缓存多少个组件

  凡是使用了keep-alive包裹的组件都会多2个生命周期函数

deactivated:
  当组件被切换隐藏的时候会进行缓存状态的生命周期
activated:
  当组件被切换显示的时候会进行进入活跃状态的生命周期

4.如何使每一个组件都拥有自己独立的css作用域

  在style标签上添加一个属性scoped

slot插槽

  正常情况下组件当作标签使用的时候,组件标签

基本使用(匿名插槽):

  1,在组件内部书写一个template标签,添加一个指令,v-slot

  2,将需要做嵌套的内部放在template标签内部

  3,在组件内部通过<slot></slot>进行接收

具名插槽:

  有名字的插槽

  1,在组件标签内部书写一个template标签添加一个指令v-slot:插槽的名称

  2,将需要做嵌套的内部放在template标签内部

  3,在组件内部通过<slot name="插槽的名称"></slot>进行接收

作用域插槽

  带参数的插槽

  数据的子传父

  1,在组件内部通过<slot name="插槽名称":自定义属性=“需要传递的值”></slot>绑定一个自定义属性   值为需要传递的数据

  2,在组件标签内部书写一个template标签  标签添加一个指令v-slot:插槽的名称=“需要接收的这个对象”

  3,在template内部的标签上进行数据的渲染{{需要接收的这个对象.自定义属性}}

Vue动画

  1,如果需要使用Vue的动画,那么需要变动的元素外层必须加一个内置组件<transition></transition>

  2,需要进行动画的元素必须经历隐藏和显示 v-if  v-show

 动画的类名

  name就是动画的名称 template会有一个属性name name的值就是动画的名称

  进入的类名
  <name>-enter
  <name>-enter-active
  <name>-enter-to

  离开的类名
  <name>-leave
  <name>-leave-active
  <name>-leave-to
  当多个元素需要相同的动画的时候  需要将transition  换成transition-group另外需要给每一个元素添加一个不同的key值
animate.css
  当你使用了第三方的css动画库的时候,可以直接将动画的,名称通过以下方式赋值给transition
<transition
enter-class=""
enter-active-class=""
enter-to-class=""
leave-class=""
leave-active-class=""
leave-to-class=""
>
<div class="box" v-if="show" ></div>
</transition>
原文地址:https://www.cnblogs.com/wwwxxjsyy/p/10914064.html