vue复习

1.试述前端开发技术发展变化历程，理解推动技术发展动力以及对软件开发职业的启发。

2.当前前端开发技术主要特征有哪些？

前后端分离开发：

前端专注页面展示效果与用户使用体验,后端专注为前端提供数据和服务。

工程化特征：模块化、组件化、规范化、自动化

模块化：采用分治思想，将大文件拆分成小文件，每个小文件只负责一个功能，降低复杂度，提高复用率。针对js部分。

组件化：组件化是对交互界面的拆分，是包含html、css、js的功能相对完备的结构单元，提现分治、封装、复用的思想，（分治：将大页面分为小组件，降低复杂度，提高可维护性；封装：组件内部实现逻辑不用关心，组件内变化也不会影响到全局；复用：避免大量重复代码）

规范化：提升效率，降低沟通成本。

自动化：自动化的工具，提升效率，有包管理工具（npm 和yarn）、自动化构建工具（webpack、grunt,gulp）、规范化工具（eslint和stylelint）

MVVM模式：

响应式布局：

布局响应式和数据响应式

3.常用的技术框架和ui框架都有哪些？这些框架在前端开发框架的作用。

4.块级元素和行内元素的特点有哪些？分别列出在html中不少于5个行元素和行内元素。

5. 在css中常用选择器有哪些？

标签选择器、id选择器（＃para１{textＧalign:center;color:red;}）、class选择器（．center{textＧalign:center;}）、后代选择器（.container .p-font{color:red}）、伪类选择器

6. 在css中常用计量单位都有哪些？响应式界面布局编程中如何使用？

响应式不要用px就可以了 

7. 试描述less的主要特征及使用less能带来什么好处？ 

less是预处理语言和扩充了css，通过编译器将其转换成css文件，再交给浏览器使用，增加了变量、嵌套、混入、函数、继承等功能。

好处：提高效率、代码复用、易于维护、动态样式生成。

8.举例说明什么是JavaScript变量的作用域。

变量的作用域就是变量在代码中可使用的范围，全局、局部、块级作用域。

9.什么是原型链以及原型链的作用？

                                                        

function Person(name, age) {this.name = name;this.age = age;this.sayHello = function() {console.log(`hello my name is ${this.name}`);}
}function Teacher() {this.giveLessons = function() {console.log("授课");}
}Teacher.prototype = new Person("winkle", 40);function MusicTeacher() {this.musicPlay = function() {console.log("弹钢琴");}
}MusicTeacher.prototype = new Teacher();// 创建MusicTeacher实例
var obj = new MusicTeacher();// 调用方法并观察控制台输出
obj.giveLessons(); // 输出: 授课
obj.sayHello();    // 输出: hello my name is winkle
obj.musicPlay();   // 输出: 弹钢琴

Teacher.prototype = new Person("winkle", 40); //创建了一个新的Person实例，name为"winkle"，age为40 //将这个实例赋值给Teacher的prototype属性。这意味着所有通过Teacher构造函数创建的对象都会继承这个Person实例的属性和方法（包括sayHello）

  MusicTeacher.prototype = new Teacher(); 这行代码创建了一个新的Teacher实例，并将其赋值给MusicTeacher的prototype属性。由于Teacher的原型已经被设置为一个Person实例，因此通过MusicTeacher创建的对象将继承Teacher和Person的属性和方法。

var obj = new MusicTeacher(); 这行代码创建了一个新的MusicTeacher实例。

• console.log(obj) 打印出obj对象，可以看到它包含了MusicTeacher、Teacher和Person的属性和方法。
• obj.giveLessons() 调用giveLessons方法，打印出"授课"。
• obj.sayHello() 调用sayHello方法，打印出"hello my name is winkle"，因为Teacher的原型是设置为具有"winkle"名字的Person实例。

10.什么是异步编程，异步编程实现方式是什么？

. /* 定义一个异步任务 * /

2.function getData(success, error) {

3. var flag= false

4. {/* 此处编写异步任务代码 , 如 : 等待后台读取数据 , 如果获取成功 flag= true * /

5. flag = true

6. }

7. if (flag) {

8. success() // 执行函数 success

9. } else {

10. error() // 执行函数 error

11. }

12.}

13.

14./* 成功后的数据处理 * /

15.function fn1() {

16. console.log(" 执行了成功时的回调函数 ")

17.}

18./* 失败后资源的释放等问题 * /

19.function fn2() {

20. console.log(" 执行了失败时的回调函数 ")

21.}

22./* 执行任务 , 根据结果执行函数 fn1 或 fn2 * /

23.getData(fn1, fn2)

回调函数与普通的函数没有任何区别，主要是回调函数总是作为一个函数的参数出现， 待处理完成后在调用

11.使用JavaScript编写一个发布订阅程序。

12.什么是回调地狱，promise如何解决回调问题的？

回调地狱：如果回调嵌套层次太多, 就会出现回调地狱问题 , 代码可读性变差 ,不易维护，es６封装一个promise对象,通过链式编程解决回调地狱问题.

1.new Promise(resolve = 􀎯> {

2. setTimeout(() = >  {

3. resolve(10) //1000MS 后 第一个 PROMISE 实例状态是成功 VALUE:10

4. }, 1000)

5.}). then(res = >   {

6. console.log(` 成功 : ${res}`)   /* 成功 :10' * /

7. return res * 5     /* 传递数据 * /

8.}, reason = >   {

9. console.log(` 失败 : ${reason}`)

10. return reason * 10

11.}).then(res = >   {

12. console.log(` 成功 : ${res}`)

13. return res * 5

14.}, reason = >   {

15. console.log(` 失败 : ${reason}`)

16. return reason * 10;

17.})

 

13.在es6中模块化导出中export和export default两个关键字有什么区别，使用import导入时有哪些注意事项？

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

模块导出可分为命名式和默认式两种方式 . 命名式导出关键字export的位置可以出现在模块的任何位置

 2.

每个模块只能有一个默认导出 . 默认导出需要使用到exportdefault 关键字 ,默认导出无需使用花括号{},

命名式导入一次可以导入多个成员 , 引入的成员名称要与导出的成员名称相同.

默认导入仅能导入一个成员 , 使用 import 引入时无需了解导出模块的细节;

导入关键字 import 必须放在文件的最开始 , 且前面不允许有其他逻辑代码, 这和其他所有编程语言风格是一致 .

 

14.试述html、css和JavaScript在编码中的常用规范。 

15.简述vue的特点是什么？

Vue 提供的数据绑定和事件监听功能 ,用于简化视图模型层中代码编写,Vue提供了一套完整的vue模板语法,将视图模型层产生的数据与视图层的dom 关联起来,当数据发生变化,视图展示的内容随之发生变化， 提高开发效率。

渐进式框架 

16.什么是vue模板和vue模板语法？

vue３ 是通过一个叫做 createApp 函数创建实例对象的 . 创建 vue 实例对象函数的参数是一个配置对象, 选项式编码模式就是通过该配置对象描述相关的业务逻辑. 配置对象的属性很多 , 如 :data 属性 、methods 属性 、computed 属性、watch属性等.

Data 属性 : 为 vue 实例提供数据 , 这些数据可以来源于后台, 也可以是实例初始化定义的 , 当这些数据值发生变化时 , 视图层将“响应 ” 发生的变化.

实例挂载 : 将 vue 实例对象与视图层某个 dom 元素建立关联过程称为实 例挂载, 这个 dom 元素通常是容器标签div，通过mount函数。

Vue 模板 : 在 vue 实例挂载的 dom 元素内部的代码片段称之为 vue 模板.

在这些代码中可以混入一些特殊 vue 语法 , 如 : 上例代码第 ２ 行中使用了插值 语法, 这些 vue 使用的语法称为 vue 模板语法 .vue 模板代码并不能为浏览器 识别,vue 通过其自身的编译机制 , 将 vue 模板中代码转换为标准的 让浏览器可以识别的html 片段 .

17.什么是vue模板语法，在vue模板语法中主要使用形式有哪些？

18.什么是属性绑定，进行属性绑定时有哪些注意事项？

 1.单个属性绑定

2.多个属性帮绑定v-bind="对象"

1.< div id= "app">

2. < input v Ｇ bind= "inputAtt" />

3.< /div>

4.

5.< script>

6. const {

7.

8. createApp

9. } = Vue

10.

11. let app = createApp({

12.         data() {

13.                 return {

14.                         inputAtt: {

15.                                 type: 'text',

16.                                 name: 'userName',

17.                                 value: '绑定多个属性'

18.                         }

19.                 }

20.         }

21. })

22. app.mount('#app')

23.< /script>

3.绑定表达式

样式绑定

19.条件渲染中v-if指令和v-show指令有什么区别？为什么要设置key？

1.v-if 指令必须作用到一个元素上 , 作为元素一个特殊的属性出现 , 当该指 令绑定数据值为真时, 此 dom 元素才能被创建出来 ; 当绑定数据值为 false 时 , 渲染时不创建该dom 元素或者将已创建的元素销毁 . 语法格式 :v-if＝“布尔值或布尔表达式”.

如果一次需要渲染多个元 素, 则将 v-if 指令绑定在 template 元素上 ,template 标签体内有一组 html 元

素 , 实现分组渲染 , 示例代码如下所示

2.指令v-show 实现dom 元素的显示和隐藏.使用该指令的元素无论真与假,始终会被渲染,当绑定的数据值为真时,该元素显示,当绑定的数据值为假时,该元素隐藏.其底层原理是通过改变元素的样式 display属性实现的,如:

<p v-show＝＂seen＂> 条 件 渲 染 显 示 < /p>,

当 seen＝false 时 , 渲 染 结 果 为:<p style＝＂display:none;＂> 条件渲染显示< /p>

20.常见的表单类型有哪些？使用v-model指令如何绑定？

21.按照第6节综合示例的要求，完成表单数据采集。

22.过渡与动画

<template><div align="center" style="margin-top: 100px;"><button @click="show = !show">测试</button><transition><div v-if="show"><p>这是一段文字</p></div></transition></div>
</template><script>
export default {name: 'transitionTest',data() {return {show: true}}
}
</script><style scoped>
.v-enter-active, .v-leave-active {transition: all 0.5s;
}
.v-enter {transform: translateY(50px);opacity: 0;
}
.v-leave-to { /* 或者使用 .v-leave-active 如果您的意图是定义过渡期间的样式 */transform: translateY(-50px); /* 假设您想要在离开时向上移动文本 */opacity: 0; /* 离开时完全透明 */
}
</style>

２)vＧenterＧactive: 定义进入过渡生效时的状态 . 在整个进入过渡的阶段中 应用, 在元素被插入之前生效 , 在过渡 / 动画完成之后移除 . 这个类可以定义进入过渡的过程时间、 延迟和曲线函数.

３)vＧenterＧto: 定义进入过渡的结束状态 . 在元素被插入之后下一帧生效 (同时 vＧenter 被移除 ), 在过渡 / 动画完成之后移除 .

４)vＧleave: 定义离开过渡的开始状态 . 在离开过渡被触发时立刻生效 , 下 一帧被移除.

５)vＧleaveＧactive: 定义离开过渡生效时的状态 . 在整个离开过渡的阶段中 应用, 在离开过渡被触发时立刻生效 , 在过渡 / 动画完成之后移除 . 这个类可以 定义离开过渡的过程时间、 延迟和曲线函数 .

６)vＧleaveＧto: 定义离开过渡的结束状态 . 在离开过渡被触发之后下一帧生效( 同时 vＧleave 被删除 ), 在过渡 /动画完成之后移除.

23.为什么要限制使用v-on指令绑定代码片段？

<div id="app"><input type="button" value="事件监听" v-on:click="calcValue2($event)" /><input type="button" value="简写" @click="calcValue2($event)" />
</div><script src="../utils/vuejs.js"></script>
<script>const { createApp } = Vue;let app = createApp({methods: {calcValue2(event) {alert('Hello ' + event.target.tagName + '! ');}}});app.mount('#app');
</script>

<div id="app"><input type="button" value="方法传参" @click="hello('winkle')" />
</div><script src="../utils/vuejs.js"></script>
<script>const { createApp } = Vue;let app = createApp({methods: {hello(name) {  // 修正了方法定义的大括号alert(`${name} say hello`);}}});app.mount('#app');
</script>

24.什么是事件冒泡现象，vue为了处理冒泡现象提供了哪些修饰符？

响应 dom 事件时 , 事件会由内向外传播 , 传播过程中会引起不同 dom 的连 锁响应,这种连锁响应称为冒泡现象,

<div class="outter" @click="outterClick"><div class="inner" @click.self="divClick"><input type="button" value="self 按钮" @click="btnClick" /></div>
</div><div class="outter" @click="outterClick"><div class="inner" @click="divClick"> <!-- 移除了.self修饰符，因为您可能想要正常触发div的点击事件 --><input type="button" value="stop 按钮" @click.stop="btnClick" /></div>
</div><script>
const { createApp } = Vue;
let app = createApp({methods: {outterClick() {alert('Outer div clicked!');},divClick() {alert('Inner div clicked!');},btnClick() {alert('Button clicked!');}}
});
app.mount(document.body); 
</script>

 当点击self按钮时,执行按钮的单击事件,再执行外部dom绑定的事件;点击stop按钮时,仅执行了按钮的单击事件.

25.在vue生命周期中，有哪些钩子函数，其执行时机是什么？

<div id="app"></div><script>
// 假设Vue已经通过CDN或NPM等方式被正确引入
const { createApp } = Vue;let app = createApp({data() {return {message: '' // 用于存储从服务器获取的数据};},created() {alert('created ==== 2'); // 当实例被创建后调用// 通常不会在这里进行异步数据获取，因为DOM还未挂载},beforeMount() {alert('beforeMount ==== 3'); // 在挂载开始之前被调用// 这里的DOM元素还未被替换},mounted() {alert('mounted ==== 4'); // 在挂载完成后被调用// 此时可以进行异步数据获取，因为DOM已经可用this.fetchData();},beforeUpdate() {alert('beforeUpdate ==== 5'); // 在数据更新之前调用},updated() {alert('updated ==== 6'); // 在由于数据变化导致的虚拟DOM重新渲染和打补丁之后调用},beforeUnmount() { // Vue 3中，beforeDestroy已更名为beforeUnmountalert('beforeUnmount ==== 7'); // 在卸载组件实例之前调用},unmounted() { // Vue 3中，destroyed已更名为unmountedalert('unmounted ==== 8'); // 在卸载组件实例后调用},methods: {fetchData() {// 模拟异步数据获取，例如通过API调用setTimeout(() => {this.message = '数据已成功加载!';// 这里可以添加其他逻辑，比如更新DOM或触发其他事件}, 2000); // 模拟2秒的延迟}}
});app.mount('#app');
</script>

26.钩子函数mounted和created都可以获取后端提供的数据，二者有什么区别？

27.什么是深度监听？为什么要设置深度监听？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Example</title><!-- 引入Vue库 --><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app"><input type="number" v-model="n"></div><script>// 使用Vue的createApp方法创建一个新的Vue应用const { createApp } = Vue;let app = createApp({data() {return {n: 0 // 初始化数据n为0};},watch: {// 监听n的变化n(newValue, oldValue) {let msg = `n的值由${oldValue}变为${newValue}`;alert(msg); // 当n变化时，弹出警告框显示变化信息}}});// 将Vue应用挂载到id为app的DOM元素上app.mount('#app');</script>
</body>
</html>

 在输入框中输入数字时，每次输入值变化，都会弹出一个警告框，显示n的值从什么变为了什么

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Example</title><!-- 引入Vue库 --><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app"><!-- 使用v-for指令循环渲染城市列表 --><p v-for="item in citys">{{ item }}</p><!-- 点击按钮调用changeCitys方法改变数组中的值 --><button @click="changeCitys">改变数组中的值</button></div><script>const { createApp } = Vue;let app = createApp({data() {return {citys: ['西安', '北京', '上海'] // 初始化城市列表};},watch: {// 监听citys数组的变化citys: {deep: true, // 深度监听数组内部的变化handler: function(newValue, oldValue) {// 注意这里应该使用citys而不是nlet msg = `citys的值由${JSON.stringify(oldValue)}变为${JSON.stringify(newValue)}`;alert(msg); // 当citys变化时，弹出警告框显示变化信息}}},methods: {changeCitys: function() {// 改变数组中的第一个元素this.citys[0] = '郑州';}}});// 将Vue应用挂载到id为app的DOM元素上app.mount('#app');</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Example</title><!-- 引入Vue库 --><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app"><!-- 使用v-model指令绑定输入框的值到person.name --><input v-model="person.name" /></div><script>const { createApp } = Vue;let app = createApp({data() {return {person: { name: '张三', age: 18, sex: '女' } // 初始化person对象};},watch: {// 监听person对象的变化，需要深度监听person: {deep: true, // 深度监听对象内部属性的变化handler: function(newValue, oldValue) {// 注意这里应该使用person而不是nlet msg = `person的值由${JSON.stringify(oldValue)}变为${JSON.stringify(newValue)}`;alert(msg); // 当person变化时，弹出警告框显示变化信息}}}});// 将Vue应用挂载到id为app的DOM元素上app.mount('#app');</script>
</body>
</html>

28.属性监听和计算属性区别是什么？ 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 Example</title>
</head>
<body><div id="app"><p>{{ msg }}</p><p>{{ reversedMessage }}</p></div><script>const { createApp } = Vue;let app = createApp({data() {return {msg: 'hello',};},computed: {reversedMessage() {return this.msg.split('').reverse().join('');}}}).mount('#app');</script>
</body>
</html>

29.在哪些场景使用计算属性，哪些场景使用属性监听？ 

解释1：Vue.js组件的生命周期可以大致分为以下几个阶段：

1. 创建阶段：在这个阶段，组件实例被创建，并且data和props被初始化。beforeCreate和created这两个钩子函数在这个阶段被调用。
   • beforeCreate：在这个阶段，组件实例还没有被完全初始化，data和methods等选项都还没有被设置到实例上，因此在这个阶段无法访问到它们。
   • created：在这个阶段，组件实例已经被完全初始化，data和props已经被设置到实例上，并且可以访问到。但是，在这个阶段，组件的模板还没有被渲染，也没有挂载到DOM上。
2. 挂载阶段：在这个阶段，组件的模板被渲染成虚拟DOM，然后虚拟DOM被挂载到真实的DOM上。beforeMount和mounted这两个钩子函数在这个阶段被调用。
   • beforeMount：在这个阶段，模板已经被渲染成虚拟DOM，但是还没有挂载到真实的DOM上。
   • mounted：在这个阶段，组件已经被挂载到真实的DOM上，可以进行DOM操作。
3. 更新阶段：当组件的data、props或计算属性等发生变化时，组件会重新渲染。beforeUpdate和updated这两个钩子函数在这个阶段被调用。
   • beforeUpdate：在这个阶段，组件的虚拟DOM已经更新，但是还没有应用到真实的DOM上。
   • updated：在这个阶段，组件的虚拟DOM已经应用到真实的DOM上，DOM已经更新。
4. 销毁阶段：当组件被销毁时，beforeDestroy和destroyed这两个钩子函数被调用。
   • beforeDestroy：在这个阶段，组件实例仍然完全可用，但是在这个阶段之后，组件将被卸载。
   • destroyed：在这个阶段，组件已经被完全销毁，所有的事件监听器和子实例也都被移除。

因此，在created钩子函数中，您可以安全地访问和使用data和props中定义的数据，因为它们已经在这个阶段之前被初始化和设置了。

 解释2：您提到的内容是关于Vue.js中watch选项的immediate属性的正确描述。在Vue.js中，当你使用watch来监听一个数据属性的变化时，默认情况下，这个监听器会在该属性第一次变化时触发，而不是在组件实例创建和数据初始化时立即触发。虽然immediate属性可以让监听器在数据初始化时立即执行，但它并不会改变监听器的基本行为——它仍然只会在监听的数据属性发生变化时执行（除非设置了immediate: true，这样它会在初始化时也执行一次）。此外，如果监听的是一个计算属性或者是一个深度监听（使用了deep: true），immediate属性的行为也是类似的。

30.试述前端开发中常用自动化工具的作用。

 单页面应用开发过程中,需要使用的自动化工具包括:包管理工具(npm)、自动化构建工具(webpack)、代码格式化工具(eslint）等。

 npm使用该工具, 开发者可以很方便地下载、安装、上传及管理应用包

npminstallwebpack-s-dev 

Bable 插件:由于不同版本浏览器在解析JavaScript 时遵循的标准规范不同 , 开发人员需要面对JavaScript 代码兼容性问题,bable插件是帮助开发人员解决这些问 题的有力工具.

31.执行npm工具常用命令，观察并分析package.json中文件的变化。

完成node安装,即可完成npm 的安装.

由于 npm 服务器位于国外 , 安装第三方依赖包时 , 可能会出现速度过慢现象, 此时可以使用 cnpm 代替npm.在安装好 npm 的基础上,执行安装命令 npm install-g cnpm －－registry＝https://registry.npmmirror.com,即可完成cnpm 的安装.

{"name": "项目名称","version": "1.0.0","description": "项目简介","author": "作者","private": true,"scripts": {/* scripts作用是将长命令转换成短命令, 使用key代替value */"dev": "webpack-dev-server","start": "npm run dev"},"dependencies": {/* 运行依赖项 */"babel-polyfill": "^6.26.0"},"devDependencies": {/* 开发依赖项 */"axios": "^0.18.1"},"engines": {"node": ">=6.0.0","npm": ">=3.0.0"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"]
}

const path = require('path');module.exports = {// 模式，'development' 或 'production'，用于启用Webpack的内置优化mode: 'development', // 注意这里修正了拼写错误，从 'delelopment' 改为 'development'// 入口文件entry: path.join(__dirname, 'src', 'index.js'),// 输出文件output: {// 文件路径，使用path.join可以确保在不同操作系统上路径的正确性path: path.join(__dirname, 'dist'),// 文件名filename: 'bundle.js'}
};

1.const Webpack = require('Webpack')

2.module.exports = {

3. // 入口文件 、 出口文件 、 插件配置

4. devServer: {

5. port : 8081, // 端口号

6. static:path.join(__dirname,'src'), // 资源目录

7. hot:true

8. }

9.}

 

32.使用vue-cli脚手架创建项目，并分析创建程序的目录结构及文件。

<template><div id="app"><img src="./assets/logo.png" alt="Logo"><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script><!-- 如果有样式，可以在这里添加 -->
<style scoped>
/* 您的样式代码 */
</style>

// 引入 createApp 函数，用于创建 vue 实例
import { createApp } from 'vue';// 引入根组件 App
import App from './App.vue';// 引入路由配置
import router from './router';// 引入 Pinia 状态管理
import { createPinia } from 'pinia';// 创建 Vue 实例
const app = createApp(App);// 使用路由
app.use(router);// 创建 Pinia 实例并使用
const pinia = createPinia();
app.use(pinia);// 挂载 Vue 应用到 DOM 中的 #app 元素
app.mount('#app');

33.使用vite创建项目，并分析创建程序的目录结构及文件。

34.简述vue程序需要遵循的规范和标准。 

35.由软件开发的分治思想和面向对象封装性的特征，分析前端组件式开发的必要性。

36.按照下图要求编写租房列表组件，并以此为例说明组件常用的通信方式有哪些？              

37.使用插槽设计一个网站的footer，然后说明什么是匿名插槽和具名插槽。

38. 试描述vue组件开发中应该遵循哪些命名规范？