当前位置：首页 > news >正文

vue复习

news 2024/12/19 21:05:03

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

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

前后端分离开发：

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

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

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

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

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

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

MVVM模式：

照分层思想 , 将前端页面纵向分成模型 model、视图view 和视图模型viewModel三部分

响应式布局：

布局响应式和数据响应式

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文件，再交给浏览器使用，增加了变量、嵌套、混入、函数、继承等功能。

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

在 html 文件中使用 link 引入外部样式文件时 , 引入的 less 文件在先 , 引入的less．js 文件在后 , 文件的顺序不能颠倒 . 使用外部 less 文件时 , 直接使用html文件浏览页面时会报跨域错误 , 通过 web 服务器浏览则不会报错 .

使用 less 编程时 , 将 style 的 type 属性设置为 text/less

在 vue 项目中使用 less, 只需使用包安装工具 , 如 :npm 安装 less 包即可 , style标签中增加 lang＝＂less＂即可

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.什么是异步编程，异步编程实现方式是什么？

异步编程是进入任务队列的任务,当任务队列通知主线程可以执行时 , 才会进入主线程排队执行. 通常将比较耗时的 I/O 操作定义为异步任务 , 如 : 将获取服务器端数据操作安排为异步任务。

异步任务是通过回调函数实现的，回调函数就是当某个程序执行完成后,根据完成结果执行的函数.如:后台服务器返回查询的结果数据,对结果数据处理函数就是一个回调函数。

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

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对象,通过链式编程解决回调地狱问题.

Promise 状态 : 共有三种执行状态 , 分别为 :pending( 表示执行中 )、fulfilled/resolved(执行成功状态 )、rejected( 失败状态 ).Promise 状态一旦更改, 不可以再次改变 .

Promise函数 :promise 提供了 resolve 和 reject 两个函数 , 用于改变promise状态.执行resolved 函数,将 promise 状态更改为成功状态,执行reject函数,将promise状态改为失败状态

Promise 实例对象．then([ 状态成功时执行的函数 ],[状态失败时执行的函数])，在异步任务代码中使用resolve和reject两个函数变更promise状态,其目的就是为了控制then中的两个函数

Then 链 :then 是原型链上一个构造函数 , 其生成是一个 promise 实例对象, 如下示例代码查看 then 的返回结果 .

在 then 方法返回的 promise 对象结果上 , 可以继续封装下一个异步操作 , 下一个异步操作结果的then 方法又可以继续封装 , 形成一个链条叫 then 链. 示例代码如下所示.使用 then 的链式编程 , 成功解决了回调地狱问题 .

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的位置可以出现在模块的任何位置

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

通常将 export 关键字放在 JavaScript 文件的尾部 , 一次可以导出多项内容;

export 关键字不能使用在块作用域中 , 否则报错 ;

命名式导出可以导出多个成员, 默认导出则仅能导出一个成员 .

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

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

默认导入仅能导入一个成员 , 使用 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模板语法中主要使用形式有哪些？

所谓的模板语法是指使用 vue 提供的插值语法或指令语法 , 将视图模型层中定义的数据、函数与视图层中 dom 元素关联起来 , 当数据变化时 , 视图自动更新 , 视图发生变化时, dom 上绑定的数据也随之发生变化.

内容渲染、属性绑定、列表渲染、条件渲染、双向绑定

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

使用模板语法中提供的v- bind 指令 , 可以将数据绑定到html 元素属性上 , 如 :class 属性 ,style 属性 ,value 属性等

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.绑定表达式

样式绑定

１．对象 / 数组绑定

使用 v-bind 指令中的 class 以对象的形式绑定 , 语法格式为:class＝＂ {key:value}＂;

key 是在样式中定义的选择器 ,value 是实例中的布尔类型的数据或布尔表达式, 当变量为真时样式生效

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.过渡与动画

vue 提供了一个内置过渡组件 transition, 用于设置要实现的过渡效果

<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-leave-active 选择器 , 就是tran-sition 组件提供的一组 transition 钩子函数

１)vＧenter: 定义进入过渡的开始状态 . 在元素被插入之前生效 , 在元素被插入之后的下一帧移除.

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

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

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

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

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

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

事件监听是指将 dom 操作事件和 JavaScript 代码片段进行绑定 , 在事件

发生时执行绑定的代码

<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>

点击任何一个按钮时，都会弹出一个警告框，显示“Hello BUTTON! ”，其中BUTTON是按钮元素的标签名。

传入的参数可以在方法中直接使用, 参数可以是基本数据类型 , 也可以是引用数据类型

<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生命周期中，有哪些钩子函数，其执行时机是什么？

Vue 实例对象与其它对象一样 , 都存在创建、运行、更新、销毁等一系列的过程, 这个过程称为 vue实例的生命周期,在vue生命周期关键结点上,预设了一些函数,这些函数称作生命周期钩子函数.钩子函数会在生命周期中自动执行,无须使用事件监听.利用钩子函数,开发人员可以在合适的时机执行相应的业务逻辑代码.如使用 beforeMount钩子函数,可以在实例挂载前执行开发者自定义的代码.

<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都可以获取后端提供的数据，二者有什么区别？

发送异步请求获取数据 , 并将数据展示在页面上是前端开发中的常见需求, 开发人员通常使用 created 或 mounted 钩子函数获取数据。

１) 使用 mounted 函数 , 此时视图渲染已经完成 , 会因获取数据过慢会导致页面闪屏现象, 而使用 created 函数时 , 视图尚未渲染 , 不会出现闪屏问题 .

２) 使用 created 函数时 , 根据默认条件查询数据时 , 由于视图尚未渲染 , 获取不到界面上查询条件绑定的数据. 若涉及的查询条件和 dom 操作有关 , 则必须在 mounted 中完成数据的提取 .

３) 使用这两个函数时 , 实例对象中的 data、computed、prop 等初始化工作已完成, 可以利用这些数据完成相应操作 , 如 : 子组件可以利用 prop 传入值做为参数获取后端的数据.

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

当监听的属性为单值时 , 非常简单 , 可以省略 deep 和 immediate 两个属性, 只需在监听属性中配置 handler 方法 .

<!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的值从什么变为了什么

数组监听需要开启深度监听和handler 配置项 , 当数组中的值发生变化时 , 触发 handler 中代码. 数组监听时 , 形参 value 是数组的指针 , 指向数组的变化后的值 , 无法获取变化前的值.

<!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>

对象监听和数组监听语法相同 , 要开启深度监听 , 并使用 handler 配置项完成监听

<!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>

将会看到一个包含输入框的网页。当您在输入框中输入内容时，person.name的值会实时更新，并且每次更新都会触发watch监听器，弹出一个警告框显示person对象的旧值和新值。上例中当对象中任何一个属性发生变化时,都可以被监听到,但是同数组监听相同,是无法获取更改前的值.这种对象监听方式通常在关闭窗口时使用,检测数据是否被修改,如果修改,则提示保存信息.

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

	属性监听（watch）	计算属性（computed）
定义	监视数据属性的变化，并在变化时执行回调函数	基于其他数据属性动态计算并返回一个新的值
触发时机	数据变化时立即触发	依赖的数据变化时触发，但结果会被缓存
执行逻辑	可以执行异步操作或复杂逻辑	通常用于同步计算，结果会被缓存
适用场景	需要对数据变化进行响应并执行副作用时	需要基于其他数据计算新值时
性能	每次数据变化都会触发，可能影响性能	由于缓存机制，性能更优
获取变化前后的值	可以获取数据变化前后的值	只能获取当前的值，不能获取之前的值
多属性监听	可以监听单个或多个属性的变化	一个计算属性可以依赖多个数据源

<!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组件的生命周期可以大致分为以下几个阶段：

创建阶段：在这个阶段，组件实例被创建，并且data和props被初始化。beforeCreate和created这两个钩子函数在这个阶段被调用。
- beforeCreate：在这个阶段，组件实例还没有被完全初始化，data和methods等选项都还没有被设置到实例上，因此在这个阶段无法访问到它们。
- created：在这个阶段，组件实例已经被完全初始化，data和props已经被设置到实例上，并且可以访问到。但是，在这个阶段，组件的模板还没有被渲染，也没有挂载到DOM上。
挂载阶段：在这个阶段，组件的模板被渲染成虚拟DOM，然后虚拟DOM被挂载到真实的DOM上。beforeMount和mounted这两个钩子函数在这个阶段被调用。
- beforeMount：在这个阶段，模板已经被渲染成虚拟DOM，但是还没有挂载到真实的DOM上。
- mounted：在这个阶段，组件已经被挂载到真实的DOM上，可以进行DOM操作。
更新阶段：当组件的data、props或计算属性等发生变化时，组件会重新渲染。beforeUpdate和updated这两个钩子函数在这个阶段被调用。
- beforeUpdate：在这个阶段，组件的虚拟DOM已经更新，但是还没有应用到真实的DOM上。
- updated：在这个阶段，组件的虚拟DOM已经应用到真实的DOM上，DOM已经更新。
销毁阶段：当组件被销毁时，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使用该工具, 开发者可以很方便地下载、安装、上传及管理应用包

webpack其主要职责是将松散的模块按照依赖和规则打包成符合生产环境部署的前端资源, 将浏览器不能直接运行的拓展语言( 如 :sass,less、typescript 等 ) 编写的代码 , 转换为浏览器能够处理的JavaScript格式 , 完成对静态资源的优化等 .

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脚手架创建项目，并分析创建程序的目录结构及文件。

在 src 目录中还包括 app．vue 和 mainj．s 两个文件 . 其中 app．vue 是项目的根组件, 相当于网站的首页 , 该组件的实例将挂载到 index．html 页面中 , 在根组件中使用路由完成页面的展示与跳转,

<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>

Mainj．s 文件是应用入口函数 , 类似 c 语言的 main 函数 , 主要任务是引入全局使用的插件、组件、模块库、样式等 , 将根组件挂载到页面的某一个 dom 结点上. 在项目启动时 , 首先加载此文件 , 创建根组件实例

// 引入 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');