(适趣AI)Vue笔试题

2024-01-07 20:27:13

📑前言

本文主要是【Vue】——(适趣AI)Vue笔试题的文章,如果有什么需要改进的地方还请大佬指出??

🎬作者简介:大家好,我是听风与他🥇
??博客首页:CSDN主页听风与他
🌄每日一句:狠狠沉淀,顶峰相见

1.请简述Vue.js的生命周期函数及其执行顺序

  • Vue生命周期函数有8个。
  • Vue生命周期函数有四个阶段:
    • 1.实例创建之前/之后
    • 2.组件挂载之前/之后
    • 3.数据改变视图之前/之后
    • 4.实例销毁之前/之后。

顺序:

  • beforeCreate,created
  • beforeMount,mounted
  • beforeUpdate,updated
  • beforeDestory,destoryed

扩展:每个钩子可以做什么:

1.实例创建之前/之后:

  • beforeCreate(实例创建之前):每个页面都是一个Vue实例,这时实例还没创建,所以data还不知道,也不能用watch监听,这时data和methods的钩子函数都不能使用。
  • created(实例创建之后):实例已经创建完,可以得到data,调用watch,但是页面还是空白的,是最早可以使用data和methods的钩子函数。

2.组件挂载之前/之后:

  • beforeMount(组件挂载之前):页面挂载前,这时节点还没渲染完成。
  • mounted(组件挂载之后): 页面挂载完成,页面的内容已经渲染出了,也可以访问到dom,此时模版渲染完成。

created和mounted的区别:

  • created:实例创建完成之后,最早可以使用data和methods的钩子函数
  • mounted: 组件挂载之后,此时模版渲染完成,挂载的节点。
  • created和mounted都可以请求axios

3.数据改变视图更新之前/之后:

  • beforeUpdate(数据改变更新视图之前): 数据改变更新视图之前,就是虚拟DOM打补丁之前,这时访问到的DOM还有原有的DOM。
  • updated(数据改变视图更新之后):数据改变视图更新之后。

4.实例销毁之前/之后:

  • beforeDestory(实例销毁之前):在destory阶段,对data的改变不会再触发周期函数,说明此时Vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在,是最后一次可以使用data和methods的钩子函数。
  • destoryed(实例销毁之后):实例已经被完全销毁。

执行顺序:

2.Vue.js中的v-bind指令和v-model指令有什么区别?

  • v-bind是一个单向数据绑定,映射关系:Model->View,我们不需要额外的DOM操作,只需要进行Model的操作就可以实现视图的联动更新。
  • v-model是一个双向数据绑定,映射关系:View接受的数据传给model,model的数据再传给view。把model绑定到view的同时也将view绑定到model上,这样就既可以通过更新model来实现view的自动更新,也可以通过view来实现model数据的更新。所以,当我们用javascript代码更新model时,view就会自动更新,反之,如果用户更新了view,model的数据也自动被更新了。

3.简述Vue.js的组件通信方式及其优缺点。

3.1 props

  • props通信方式是大家常见的通信类型,也是父子组件通讯的常用方式,用法是直接在子组件标签中绑定属性和方法,用props拿到声明的属性。对于父组件的方法,可以通过this.$emit触发
  • 优点: props传递数据的优点显而易见,可以对props数据进行数据计算、数据监听等处理,十分灵活方便,但这里单单只是父子一层。
  • 缺点:子组件虽然不能直接对父组件prop进行重新赋值,但父组件是引用类型的时候,子组件可以修改父组件的props下面的属性。

3.2 provide inject

  • 此方法是在父组件上通过provide 将方法,属性,或者是自身实例暴露出去,子孙组件、插槽组件,甚至是子孙组件的插槽组件,通过inject把父辈provide引进来。提供给自己使用,很经典的应用的案例就是element-ui中el-form和el-form-item

3.3 Vuex

  • vuex算是vue中处理复杂组件通信的最佳方案,毕竟vue和vuex一个娘胎里出来的。而且vuex底层也是用vue实现的。
  • 优点:1.根本解决复杂组件的通信问题 2.支持异步组件通信
  • 缺点:流程相比较稍微复杂。

4.Vue.js如何实现父子组件之间的数据传递

第一种:父组件->子组件

父组件通过 :area方式,将areaData的数据传递给子组件,子组件通过props接收父组件传递的数据。

第二种: 子组件 ->父组件

子组件通过this.$emit(‘方法名’,‘数据’)将数据传递给父组件,父组件执行@change=‘handleChange’,handleChange方法的参数step,就是子组件传递过来的数据。

5.请简述Vue.js中的响应式原理。

vue3响应式原理

vue3.x为数据响应式,是通过proxy实现的。

  • 相关设计模式
    • 观察者模式(Observer pattern):指的是在对象间定义一个一对多(被观察者与多个观察者)的关联,当一个对象改变了状态,所有其他相关对象都会被通知并且自动刷新。
    • 发布订阅模式(Publish-subscribepattern):可认为是为观察者模式解耦的进阶版本。
    • 在发布者和订阅者之间添加消息中心,所有的消息均通过消息中心管理,而发布者与订阅者不会直接联系,实现了两者的解耦。

6.如何在Vue.js中实现路由跳转?

1.router-link (实现跳转最简单的方法)

<router-link to='需要跳转到的页面的路径'>

2.this.$router.push(‘vue路由’)

3.this.router.replace(‘vue路由’)

7.Vue.js中的computed和watch有什么区别?

在vue.js中,computed和watch是两个常用的属性,用于处理数据的监听和响应。

  • 1.computed属性: computed属性用于定义一个计算属性,它根据其他属性的值计算出一个新的值。计算属性是基于他们的依赖进行缓存的,只有当依赖发生变化时,计算属性才会重新计算。
new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

  • 2.watch属性:watch属性用于监听一个属性的变化,并在变化发生时执行响应的操作。与computed不同,watch属性是一个对象,需要为需要监听的属性提供一个处理函数。

    new Vue({
      data: {
        firstName: 'John',
        lastName: 'Doe',
        fullName: ''
      },
      watch: {
        firstName: function(newVal, oldVal) {
          this.fullName = newVal + ' ' + this.lastName;
        },
        lastName: function(newVal, oldVal) {
          this.fullName = this.firstName + ' ' + newVal;
        }
      }
    });
    
    

    computed和watch都可以用于监听属性的变化并执行相应的操作

    computed和watch的区别

    • computed是基于它们的依赖进行缓存的,只有当依赖发生变化时,计算属性才会重新计算;而watch则是在属性变化时立即执行相应的操作。
    • computed适用于那些需要根据其他属性计算出一个新值的场景;而watch适用于那些需要在属性变化时执行异步或开销较大的操作的场景。
    • computed可以像属性一样直接访问,而不需要调用函数;而watch则需要定义处理函数,并在函数中执行相应的操作。

8.Vue.js中的v-for指令和v-if指令有什么区别

  • v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。
  • v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中items是源数据数组或者对象,而item则是被迭代的数组元素的别名。
  • 在v-for的时候,建议设置key值,并且保证每个key值都是独一无二的,这方便diff算法进行优化。

9.请简述Vue.js中的mixins和extends的作用及其区别。

mixins

  • mixins选项接受一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项。这些选项将会被合并到最终的选项中,使用的是和Vue.extend()一样的选项合并逻辑。

    mixins的几个规则:

    • 一、触发生命周期钩子函数时,先触发mixins组件中的钩子,再调用组件自身的函数。
    • 二、当mixins数组中有watch,混入的组件中也存在watch,而且watch中的key相同时,混入组件中的watch会先触发,而后再是组件中的watch触发
    • 三、虽然也能在建立mixin时添加data、template属性,但当组件自身也拥有此属性时以本身为准,从这一点也能看出制做者的用心(扩充)。
    • 四、data、methods内函数、components和directives等键值对格式的对象均以组件自身或实例为准,组件自身没有定义才会去mixins混入的组件中去找。
    • 五、watch,mixins数组中的组件和组件自身的watch会合并在一个数据中,mixins中的组件中的watch会先运行,而后再是组件自己的watch
    • 六、mixins选项合并:当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并,在有同名的keys时以组件数据优先。

    extends

    • 允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用Vue.extend,这主要是为了便于扩展单文件组件。
    • extends与mixins相似;合并规则和mixins一致,extends容许声明扩展另外一个组件(能够是一个简单的选项对象或构造函数),而无需使用Vue.extend。这主要是为了便于扩展单文件组件。
    • mixins和extends是为了扩展组件,均可以理解为继承。

区别

  • 1.mixins接收对象数组(可理解为多继承),extends接收的是对象(可理解成单继承)
  • 优先级>extends>mixins,继承钩子函数的时候,是不进行覆盖的,extends的钩子函数先触发,而后再是mixins的钩子函数触发,最后就是组件自身的钩子函数触发。
  • mixins类似于面向切面的编程(AOP),extends类似于面向对象的编程。

10.Vue.js中的keep-alive组件有什么作用? 如何使用

  • keep-alive是vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们,和transition相似,keep-alive是一个抽象组件:它自身不会渲染成一个DOM元素,也不会出现在父组件链中。

作用

  • 在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。

使用

1.Props

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

2.生命周期函数

1.activated

  • 在keep-alive组件激活时调用
  • 该钩子函数在服务器端渲染期间不被调用

2.deactivated

  • 在keep-alive组件停用时调用
  • 该钩子在服务器渲染期间不被调用

3.缓存所有页面

  • 1.在App.vue里面

4.根据条件缓存页面

  • 1.在App.vue里面

5.结合Router,缓存部分页面

  • 1.在router目录下的index.js文件里
  • 在App.vue里面

📑文章末尾

在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_61494821/article/details/135406702
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。