2021 vue面试题

2021-10-10  本文已影响0人  莫名点

1.组件之间的传值

统一可以用的vuex
1.1 父组件---> 子组件
a)props 获取子组件标签上的属性；
b)用v-bind="$attrs"监听除了（class, style）之外的子组件标签的属性；v-on="$listeners"监听不包含（.native）修饰符的所有事件
c)也可以用this.$parent获取到父类中的数据

1.2 子组件->父组件
a) 用$emit() 配合事件传值
b) 给子组件定义ref,然后用this.$refs.ref获取子组件数据
c) 用this.$children找到对应的子组件
1.3 兄弟组件传值
a) 使用$on来传值，这种方式需要声明一个vue的实例，然后使用这个实例传值

import Vue from 'vue'

export default new Vue; // 新建一个文件声明；

A组件向B组件传值

import bus from './busEvent' // 引入声明
export default {
  name: 'One',
  data() {
    return {
      message: 123123
    }
  },
  methods:{
    dataGo(){
      --this.message
      bus.$emit('goData', this.message) // 通过$emit来发出数据
    }
  }
}

B组件

<script>
import bus from './busEvent'
export default {
  name: 'Two',
  data() {
    return {
      message: 123123
    }
  },
  mounted() {
    bus.$on('goData', (data) => { // 通过$on来接收，注意这里不是this.$on
      console.log(data);
      this.message = data
    })
  }
}
</script>

b) 还有一种就是往父组件传，然后父组件再往另一个组件传值

2.生命周期

加载：父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
更新：父beforeUpdate-子beforeUpdate-子updated-父updated
销毁：父beforeDestrory-子beforeDestroy-子destroyed-父destroyed

3.MVVM的理解和实现

理解：
MVVM （Model-view-viewmodel）是一种软件架构模式；MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑的开发分离开来。

MVVMPattern.png
原理：
Vue将遍历data对象所有的（property ）属性，并使用Object.defineProperty把这些（property ）属性全部转为getter/setter。它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
5d3c038ea4846.jpg
问题：
  1. 组件数据更新watcher执行几次？
    答：一般同一个组件在属性更新时watcher会执行一次，会添加到watcher队列多次，在执行前会先去重。
  2. 什么情况下Vue无法监听到对象或者数组变化？
    答：Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
    解决方式： 使用this.$set()
    Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：
vm.items.length = newLength
解决方式： 使用this.$set()

4.节点，树及虚拟DOM

节点，树

当浏览器读取html代码，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。

dom-tree.png
元素， 每段文字， 注释 都是一个节点

虚拟DOM

Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

5.如何创建一个在body内的组件

 mounted () {
    this.$nextTick(() => {
      const body = document.querySelector('body')
      if (body.append) {
        body.append(this.$el)
      } else {
        body.appendChild(this.$el)
      }
    })
  }

6.slot 插槽

插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
注: 2.6.0+ 跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

7 指令的封装

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

钩子函数的参数

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

使用情景

8.diff算法的理解

9.为什么key,不能用下标

10.watch和computed的区别

11.vuex

12.如何实现v-model

13.vue的修饰符

14.v-on 可以绑定多个事件

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

15. Vue.nextTick( [callback, context] )

上一篇 下一篇

猜你喜欢

热点阅读