Vue3前端开发期末复习

.ccl

已于 2024-12-25 15:26:20 修改

阅读量1.3k

点赞数 17

文章标签： vue.js 前端 javascript

于 2024-12-17 23:47:50 首次发布

本文链接：https://blog.youkuaiyun.com/2301_76876837/article/details/144539020

版权

一.什么是块元素、什么是行内元素？行内元素和块元素的区别有哪些？如何使用？

二、前端开发常用的计量单位都有哪些？哪些是服务于响应式布局？

三、javaScript里边作用域以及作用域链？

1.什么是作用域

变量的作用域是变量在代码中可使用的范围 , 包括全局作用域 、 局部作用域和块级作用域。

2.作用域：

全局作用域：任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问

// 全局变量
var greeting = 'Hello World!';
function greet() {
  console.log(greeting);
}
// 打印 'Hello World!'
greet();

函数作用域：果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问，不能在函数以外去访问

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}
// 打印 'Hello World!'
greet();
// 报错： Uncaught ReferenceError: greeting is not defined
console.log(greeting);

块级作用域：ES6引入了let和const关键字,和var关键字不同，在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量

{
  // 块级作用域中的变量
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}
// 变量 'English'
console.log(lang);
// 报错：Uncaught ReferenceError: greeting is not defined
console.log(greeting);

3.作用域链

变量取值时, 首先到创建这个变量的函数作用域中取值 , 如果在当前作用域中没有查到值, 就向上级作用域去查 , 直到查到全局作用域 ,查找过程形成的链条叫做作用域链。

1.var aa= 1000

2.function test(){

3.         var aa= 100

4.                 function innerFun(){

5.                         var aa = 10

6.                         console.log(aa)

7.                 }

8.         innerFun()

9.}

10.test() //aa= 10

执行 innerFun 函数时 , 先在 innerFun 函数内部查找变量 aa; 如果没有 , 在test函数内部查找变量 aa; 如果仍然没有 , 最后在全局变量查找变量 aa; 如果均不存在, 则会报 undefine 错误 .

四、前端开发的特征里面有模块化，组件化，自动化，标准化，分别解释一下，（es6）模块化里边的模块的导入导出有哪些方式，各有什么特点？

1.模块化

定义：模块化就是将一个大块代码拆分成若干个互相依赖的代码块,使用时通过文件导入的方式进行,每个小模块具有职责单一、封装性好,降低复杂度,提升复用率.

模块导出： export关键字可以导出模块中的函数、变量、常量、对象，

命名式和默认式两种：

命名式导出在函数前加export导出标识符export funcation isEmail（s）{},供外部模块使用,也可以在一个模块中一次导出多个标识符,export{name1, name2, name3, ... ,},还可用as关键字对导出的变量等内容进行重命名.如:export{name as nm,say as sayHello};export关键字不能使用在块作用域中,否则报错。

默认导出也称为定义式导出,每个模块只能有一个默认导出，export default关键字,默认导出无需使用花括号{}，默认导出可以导出一个函数、对象，

命名式导出可以导出多个成员,默认导出则仅能导出一个成员；命名式导出可以出现多次,而默认导出一个模块却仅能使用一次。

模块导入：import用于从已导出的模块中导入函数、对象、变量的原始值，通过指定名称将其他模块导出的成员插入到当作用域中。import{name１,name２, ...}from＂module-name＂。

导入模块可以根据需求将导出模块中导出的所有成员引入 , 也可以引入部分成员
导入时可以使用关键字as 进行重命名 , 使得与导出时标识符脱耦，

1.< script type= "module">

2. import { name as name1, say as sayHello } from './demo13.js'

3. console.log(name1)

4. sayHello()

5.< /script>

以导入导出模块的默认导出, 语法格式为 :import < 导入模块引用名>from ＂< 需要导入模块的文件名相对路径>＂
导入模块引用名是导入模块文件中引用的名称, 此名称可以自定义, 其作用域仅限于引用模块.
1.import sayHello111 from './demo13.js'

2.sayHello111() //sayHello１１１是导入模块引用名和导出模块的标识符无关

命名式导入一次可以导入多个成员 , 引入的成员名称要与导出的成员名称相同，默认导入仅能导入一个成员 , 使用 import 引入时无需了解导出模块的细节。

2.组件化

定义：组件化是将用户界面拆分成独立的、可复用的组件，每个组件包含自己的结构、样式和逻辑。组件可以嵌套、组合，形成复杂的用户界面。

3.自动化

定义：为了提高生产效率,将一些与业务无关的重复工作,通过一些自动化工具交给计算机完成,称为开发自动化

4. 规范化

定义：规范化就是以一种普遍认可的、统一的方式一起做事,提升协作效率,降低沟通成本.

五、我们通过面向对象的分治思想和封装性的思想谈一下模块化、组件化必要性，以及模块化、组件化的意图是什么？做模块化和组件化的时候主要要遵循哪些原则？

分治是将一个大的页面拆分为若干个小组件,并按照面向对象设计原则进行封装 , 根本目的是降低代码复杂度, 提升代码可维护性 ;

封装性体现在高层模块调用时, 组件模块内部是一个黑箱状态, 调用者只需要知道组件将要传入什么数据、组件会有哪些功能、组件会输出哪些数据即可 , 组件内部的实现逻辑则完全不必关心 ,组件内部的变化也不会污染到全局 ;

2.

六、vue渲染常用的指令，每个指令如何用？v-if,v-show的区别与联系

Vue常用指令速览：从数据绑定到动态渲染

Vue指令v-show和v-if的区别_vue show if-优快云博客

v-show始终会为渲染到页面上，通过设置display属性来决定是否显示或隐藏，是响应式的

v-if满足条件时会渲染到页面上不满足条件则不会渲染到页面，通过操作dom元素来进行显示的

七、html的冒泡事件，冒泡事件解决的办法

1.事件冒泡的概念

事件冒泡是指当一个元素触发了某个事件（例如点击事件），该事件将从最内层的元素开始，逐级向外传播到父元素，直到传播到文档根节点。这种事件传播的过程就是事件冒泡。

2.事件冒泡的处理方式：

为了防止冒泡现象 vue 提供了事件修饰符 stop， 使用语法格式为:v-on:click．stop＝“ 方法名 ”

九、自动化工具里边的npm的安装和卸载的指令

安装：npm install 模块名＠<version> －－参数

卸载：npm uninstall gulp＠3.9.1 -g

管理命令：完成项目的编译、运行发布

十、vue里边组件之间的通信方式有哪些？

父组件向子组件传值props

单值传递：

<template>
  <span>{{ weInfo }}</span> <!-- 显示父组件传递的值 -->
</template>

<script>
export default {
  props: ['weInfo'] // 定义一个名为 weInfo 的 prop，用于接收父组件传递的数据
}
</script>

<template>
  <input type="text" v-model="info" /> <!-- 双向绑定 input 的值到 info -->
  <app-child :we-info="info"></app-child> <!-- 通过 v-bind 将 info 传递给子组件的 weInfo prop -->
</template>

<script>
import ComChild from './CommPropsChild' // 导入子组件

export default {
  data() {
    return {
      info: "我是父组件的值" // 定义一个数据属性 info
    }
  },
  components: {
    appChild: ComChild // 注册子组件，并给它一个别名 appChild
  }
}
</script>

子组件向父组件传值

嵌套组件通信

事件总线

十一、编程题，父子组件的通信，先写父组件、再写子组件，体现标准化、规范化（根据阿里在组件使用上的规范）

十二、路由守卫

十三、store

十四、状态管理xuex常用的几个对象属性

十五、axios的封装

十六、生命周期函数

1)BeforeCreate 函数:执行时机是创建实例后,在数据加载和 dom 创建之前。调用 beforeCreate 函数时,vue 实例只是一个空壳,此时访问组件的数据属性和方法属性中的方法,其结果都是undefined。该函数常用于完成组件数据初始化操作。
2)Created 函数:执行时机是数据和方法定义之后。此时 vue 实例已经有数据,可以对组件内部定义的数据进行修改。该函数常用于模板数据的初始化,如:通过异步请求获取后端数据。
3)BeforeMount函数:执行时机是 dom 创建之后,渲染之前。利用该函数可以完成 dom 结构初始化、监听事件绑定等操作。
4)Mounted 函数:执行时机是组件、dom都已全部加载,并完成了页面渲染。利用该函数可以完成异步数据的提取、页面数据初始化等工作。
5)BeforeUpdate 兩数:执行时机是数据修改之后,重新渲染之前执行,可以访问更新之前的元素和数据。利用该函数处理数据变更之前的一些逻辑。特别注意在 beforeUpdate 函数中包含不能修改数据代码,否则会陷人死循环。
6)Updated 函数:执行时机是数据更新完成且渲染完毕之后。该函数用于监听页面数据的变化,完成相应的操作。此时同样不能修改数据,否则会陷人死循环。

7)BeforeUnmount 函数:执行时机是实例对象销毁之前。该函数用于完成组件销毁时相应的清理操作,如:取消定时器、解除事件监听等操作。
8)Unmounted函数:执行时机是组件数据绑定、监听销毁之后。利用该函数完成内存的释放等操作。