vue/js总结合集

Vue 的生命周期钩子函数 

生命周期主要分成三个阶段，包括：创建、更新以及销毁阶段 

Vue 的生命周期钩子函数：

        

1. beforeCreate(): 在实例初始化之后调用 , data 和 methods 都还没有初始化完成 , 通过 this 不能访问

2. created(): 此时 data 和 methods 都已初始化完成 , 可以通过 this 去操作 , 可以在此发 ajax 请求

3. beforeMount(): 模板已经在内存中编译 , 但还没有挂载到页面上 , 不能通过 ref 找到对应的标签对象

4. mounted(): 页面已经初始显示 , 可以通过 ref 找到对应的标签 , 也可以选择此时发 ajax 请求

5. beforeUpdate(): 在数据更新之后 , 界面更新前调用 , 只能访问到原有的界面

6. updated(): 在界面更新之后调用 , 此时可以访问最新的界面

7. beforeDestroy(): 实例销毁之前调用 , 此时实例仍然可以正常工作

8. destroyed(): Vue 实例销毁后调用 , 实例已经无法正常工作了

9. deactivated(): 组件失活 , 但没有死亡

10. activated(): 组件激活 , 被复用

11. errorCaptured(): 用于捕获子组件的错误 ,return false 可以阻止错误向上冒泡 ( 传递 )

普通函数和箭头函数在 JavaScript 中区别 

普通函数和箭头函数在 JavaScript 中区别：

1. 语法：

   • 普通函数使用 function 关键字声明，例如：function add(a, b) { return a + b; }
   • 箭头函数使用箭头符号 => 来声明，例如：(a, b) => a + b

2. this 的指向：

   • 在普通函数中，this 的指向取决于函数被调用时的上下文；
   • 在箭头函数中，this 的指向是词法上的，它会捕获所在上下文的 this 值。

3. arguments 对象：

   • 在普通函数中，可以使用 arguments 对象获取所有传入的参数；
   • 在箭头函数中，没有自己的 arguments 对象，需要使用 rest 参数 ...args 来获取所有参数。

4. 构造函数：

   • 普通函数可以作为构造函数使用并创建新对象；
   • 箭头函数不能用作构造函数，不能使用 new 关键字调用。

5. 返回值：

   • 如果箭头函数的函数体只有一行，且不需要额外处理，可以省略花括号和 return 关键字；
   • 普通函数则需要显式使用 return 返回值。

总的来说，箭头函数主要用于匿名函数和回调函数的简洁书写，而普通函数则更灵活，适用于更多的场景。

普通函数和箭头函数在内存中的存储方式区别 

在 JavaScript 中，普通函数和箭头函数在内存中的存储方式是有所不同的。

普通函数：

• 普通函数会被存储在堆内存中，并且会在代码执行阶段被解析和存储。
• 普通函数会创建自己的执行上下文，并且会在调用时动态生成 this 和 arguments 对象。

箭头函数：

• 箭头函数则不同，它们的定义是固定的，由于箭头函数没有自己的执行上下文，它们会捕获定义时的上下文。
• 箭头函数并不会创建自己的 this，而是继承外层作用域的 this 值。

因此，由于箭头函数的特性，它们在内存中的存储方式可能更为简单，不需要额外存储执行上下文，而普通函数则需要更多的内存空间来存储函数自身的信息以及执行上下文

常用的数组操作方法 

JavaScript 中有许多用于操作数组的方法，这些方法可以帮助你对数组进行增删改查等操作。常用的数组操作方法：

1. push()：向数组末尾添加一个或多个元素，并返回新的长度。

2. pop()：删除并返回数组的最后一个元素。

3. shift()：删除并返回数组的第一个元素。

4. unshift()：向数组的开头添加一个或多个元素，并返回新的长度。

5. concat()：用于合并两个或多个数组，不会修改原数组，返回一个新数组。

6. slice()：从原数组中返回选定的元素，不会修改原数组。

7. splice()：向/从数组中添加/删除项目，然后返回被删除的项目。

8. forEach()：对数组中的每个元素执行指定操作。

9. map()：对数组中的每个元素执行指定操作，并返回一个新数组。

10. filter()：通过指定函数测试数组中的每个元素，并返回符合条件的元素组成的新数组。

11. find()：返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

12. indexOf()：返回数组中指定元素的第一个索引，如果不存在则返回 -1。

13. includes()：判断数组中是否包含指定元素，返回 true 或 false。

14. some()：测试数组中的某些元素是否通过了指定函数的测试。

15. every()：测试数组的所有元素是否通过了指定函数的测试。

map 和 forEach 区别 

map 和 forEach 都是 JavaScript 中用于遍历数组的方法，它们之间的区别在于返回值和使用方式：

1. 返回值：

   • map 方法会返回一个新数组，新数组的每个元素是对原数组中的相应元素调用函数处理后的结果。
   • forEach 方法不返回任何值（undefined），它只用于遍历数组并对每个元素执行指定操作。

2. 使用方式：

   • map 方法通常用于需要对数组中的每个元素进行处理并生成一个新数组的情况。例如，将数组中的每个元素乘以 2 并返回新的数组。
   • forEach 方法用于遍历数组，并在遍历过程中执行指定的操作，但它不会返回新数组。通常用于对数组元素进行遍历操作，而不需要生成新的数组。

举例来说，如果我们有一个数组 [1, 2, 3]，我们想要将每个元素都加倍并得到一个新的数组，我们可以使用 map 方法：

javascript复制代码

const arr = [1, 2, 3]; 
const doubledArr = arr.map((num) => num * 2); // doubledArr 现在是 [2, 4, 6]

如果我们只是想简单地对数组中的每个元素进行打印操作，那么可以使用 forEach 方法：

javascript复制代码

arr.forEach((num) => { console.log(num); }); // 依次打印出 1, 2, 3

因此，根据需要选择合适的方法来操作数组，如果需要生成新的数组并对每个元素进行处理，则使用 map 方法；如果只是遍历数组并对每个元素执行某些操作，则使用 forEach 方法。

Vue 事件修饰符 

在 Vue.js 中，事件修饰符是用来在处理 DOM 事件时提供额外控制的方式。Vue.js 提供了一些内置的事件修饰符

常用的 Vue 事件修饰符：

1. .stop：阻止事件冒泡。

   <a @click.stop="doSomething">阻止冒泡</a>

2. .prevent：阻止事件默认行为。

   <form @submit.prevent="onSubmit">阻止默认提交行为</form>

3. .capture：事件将在捕获阶段触发。

   <div @click.capture="doSomething">捕获阶段触发</div>

4. .self：只当事件是从事件源（而不是子元素）触发时触发回调。

   <div @click.self="doSomething">只有点击该 div 元素本身时触发</div>

5. .once：事件只触发一次。

   <button @click.once="doSomething">只触发一次</button>

6. .passive：指示浏览器不要调用 preventDefault()。

   <div @touchmove.passive="handleTouchMove">passive 修饰符</div>

7. .native：监听组件根元素的原生事件。

   <my-component @click.native="handleClick">监听组件根元素的 click 事件</my-component>