珠海门户网站建设多少钱,个人网页设计版面,wordpress 文章转义,怎么查百度收录网站吗目录 一、js的数据类型有哪些#xff1f;
二、什么是symbol#xff1f;
三、什么是浅拷贝什么是深拷贝#xff1f;
四、vue2的生命周期#xff1f;
五、vue2中父子组件的生命周期调用顺序
六、vue3的生命周期
七、vue3对比vue2的变化
八、组合式API中的ref和reactiv…目录 一、js的数据类型有哪些
二、什么是symbol
三、什么是浅拷贝什么是深拷贝
四、vue2的生命周期
五、vue2中父子组件的生命周期调用顺序
六、vue3的生命周期
七、vue3对比vue2的变化
八、组合式API中的ref和reactive是什么 一、js的数据类型有哪些
1、基本数据类型
string字符串、number数字、boolean布尔值、undefined未定义、null空值、bigint大数、symbol不变值。
2、复杂数据类型
object对象、array数组、function函数、date日期、regexp正则、map键值对集合、set唯一值集合。
二、什么是symbol
symbol表示第一无二唯一的值它有几个特性
1、唯一性
每次调用symbol函数都会创建一个唯一的独一无二的值。
let sym1 Symbol(description);
let sym2 Symbol(description);
console.log(sym1 sym2); // 输出: false2、不可修改性
symbol类型的值是不可变的一旦创建就不能修改。
3、隐式属性
symbol 类型的值可以用作对象的属性名这些属性不会出现在对象的枚举属性中也不会被 for...in 循环或 Object.keys 方法枚举。
let sym Symbol(description);
let obj {};
obj[sym] value;for (let key in obj) {console.log(key); // 不会输出 sym
}console.log(Object.keys(obj)); // 输出: []三、什么是浅拷贝什么是深拷贝
1、浅拷贝
浅拷贝是指对基本数据类型的拷贝和对复杂数据类型的地址的拷贝比如Object.assign()和拓展运算符...进行的对象拷贝都是对象的浅拷贝基本数据类型是存储在内存的栈中复杂数据类型则是存储在堆中而栈只是存储了这个数据的地址所以浅拷贝复杂数据类型只是拷贝了它的地址一处修改多处同步。
2、深拷贝
深拷贝是指对复杂数据类型的值进行拷贝主要的深拷贝方法有
Ⅰ、JSON.parse(JSON.stringify(对象));
原理是将对象转化成json字符串再将json解析成新的对象因为 JSON 字符串是对象的完整表示包括其所有嵌套属性。
这个方式有几个缺陷
①、不支持函数
JSON.stringify 不会处理函数函数在转换为 JSON 字符串时会被忽略。
let original {name: Alice,sayHello: function() {console.log(Hello!);}
};
let deepCopy JSON.parse(JSON.stringify(original));
console.log(deepCopy.sayHello); // 输出: undefined②、不支持undefined
JSON.stringify 不会处理 undefined 值undefined 在转换为 JSON 字符串时会被忽略。
let original {name: Alice,age: undefined
};
let deepCopy JSON.parse(JSON.stringify(original));
console.log(deepCopy.age); // 输出: undefined③、不支持symbol
JSON.stringify 不会处理 symbol 类型的值symbol 在转换为 JSON 字符串时会被忽略。
let original {name: Alice,[Symbol(id)]: 123
};
let deepCopy JSON.parse(JSON.stringify(original));
console.log(deepCopy[Symbol(id)]); // 输出: undefined④、不支持循环引用
JSON.stringify 不会处理循环引用的对象循环引用的对象在转换为 JSON 字符串时会抛出错误。
let original {};
original.self original;
try {let deepCopy JSON.parse(JSON.stringify(original));
} catch (error) {console.error(循环引用错误:, error);
}Ⅱ、递归函数
自己写递归函数。
function deepCopy(obj, visited new WeakMap()) {if (obj null || typeof obj ! object) {return obj;}if (visited.has(obj)) {return visited.get(obj);}let copy;if (Array.isArray(obj)) {copy [];visited.set(obj, copy);obj.forEach((item, index) {copy[index] deepCopy(item, visited);});} else {copy {};visited.set(obj, copy);Object.keys(obj).forEach(key {copy[key] deepCopy(obj[key], visited);});}return copy;
}Ⅲ、第三方库
使用第三方库如 lodash 的 _.cloneDeep 方法进行深拷贝。
const _ require(lodash);
let deepCopy _.cloneDeep(original);四、vue2的生命周期
1、beforeCreate
在实例初始化之后数据观测data observer和事件/侦听器event/watcher尚未设置之前被调用。
2、ceated
在实例已经完成数据观测data observer、属性和方法的运算、事件/侦听器的设置之后被调用但挂载mounting还没开始$el 属性目前不可用。
3、beforeMount
在挂载开始之前被调用相关的 render 函数首次被调用。
4、mounted
el 被新创建的 vm.$el 替换并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素当 mounted 被调用时 vm.$el 也在文档内。
5、beforeUpdate
数据更新时调用发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM比如手动移除已添加的事件监听器。
6、updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁在这之后会调用该钩子。当这个钩子被调用时组件 DOM 已经更新所以你可以执行依赖于 DOM 的操作。然而在大多数情况下你应该避免在此期间更改状态。如果要相应状态改变通常最好使用计算属性或侦听器 (watcher) 而不是此钩子。
7、beforeDestroy
实例销毁之前调用。在这一步实例仍然完全可用。
8、destroyed
实例销毁之后调用。调用后Vue 实例指示的所有绑定都会解除所有的子实例也会被销毁。
9、activated
keep-alive 组件激活时调用。
10、deActivated
keep-alive 组件停用时调用。
五、vue2中父子组件的生命周期调用顺序
遵循341法则即父组件beforeCreate、父组件created、父组件beforeMount、子组件beforeCreate、子组件created、子组件beforeMount、子组件mounted、父组件mounted顺序。
六、vue3的生命周期
对比vue2的生命周期vue3把befroeCreate和created变成了setup其余的生命周期在前面加on就行。
七、vue3对比vue2的变化
1、Options选项式API和Composition组合式API
vue3依然兼容vue2的选项式API写法data、methods、computed、watch分类来写数据多了会频繁滚动而组合式API把一个数据的声明和相关方法都集中到一块便于管理。
2、响应式
vue2
使用 Object.defineProperty 来实现响应式系统。只能对基本数据类型和对象的直接属性进行响应式监听。
vue3
使用 ES6 的 Proxy 来实现响应式系统。可以对对象的深层次属性和数组进行响应式监听。提供了 ref 和 reactive 两种方式来定义响应式状态。
3、对于typeScript的支持
vue3对于typeScript的支持更加强大不需要vue2使用ts的额外配置。
4、根元素的支持
vue2不允许多个根元素的出现必须用一个div去包裹同级的多个div而vue3允许template下面多个同级div。
5、新增指令
引入了新的 API 和工具如 Teleport 组件用于将组件的内容渲染到 DOM 树的其他位置。提供了 Suspense 组件用于处理异步组件的加载状态。引入了 Fragment允许组件的模板返回多个根元素。
!-- Teleport --
templateteleport tobodydivThis is a teleported content/div/teleport
/template!-- Suspense --
templatesuspensetemplate #defaultasync-component //templatetemplate #fallbackdivLoading.../div/template/suspense
/template!-- Fragment --
templatepFirst element/ppSecond element/p/
/template八、组合式API中的ref和reactive是什么
ref用于创建单个响应式值适用于简单的响应式状态管理。可以存储任何类型的值并在模板中自动解包。 templatedivp{{ message }}/pbutton clickupdateMessage更新消息/button/div
/templatescript
import { ref } from vue;export default {setup() {// 使用 ref 创建一个响应式变量const message ref(Hello, Vue 3!);// 定义一个方法来更新消息const updateMessage () {message.value 消息已更新!;};// 返回需要在模板中使用的变量和方法return {message,updateMessage};}
};
/scriptreactive用于创建包含多个响应式属性的对象适用于复杂的响应式状态管理。所有嵌套属性都是响应式的但只能用于对象。 templatedivp{{ user.name }}/pp{{ user.age }}/pbutton clickupdateUser更新用户信息/button/div
/templatescript
import { reactive } from vue;export default {setup() {// 使用 reactive 创建一个响应式对象const user reactive({name: Alice,age: 25});// 定义一个方法来更新用户信息const updateUser () {user.name Bob;user.age 30;};// 返回需要在模板中使用的变量和方法return {user,updateUser};}
};
/script九、什么是闭包
简单来说闭包是一个函数内嵌套并返回一个函数这个嵌套的函数使用了外部函数的变量就形成了闭包。
优点 不会对全局变量造成污染因为它用的是函数内声明的私有变量 让数据私有化并可以返回出去外部操作但这其实是函数的特性在函数中声明变量就是在私有化变量return就是在输出一个返回值 可以让这个私有变量长时间存在于内存中避免了这个私有变量被垃圾回收机制自动销毁
缺点 由于私有变量不会被垃圾回收机制自动销毁可能会造成内存泄漏 需要手动销毁闭包
function fn() {let a 10;return function() {a;console.log(a)}
}let f fn();
f();
f();
f();
f null;
// 这里的fn()就是一个外部函数声明了一个私有变量a并赋值为10并且返回了一个内部函数这个内部函数操作变量a自增这就是闭包
// 由于函数fn()是有返回值的所以声明一个f来接收fn()的返回值此时这个f就是fn()的内部函数再调用3次f()输出结果是111213
// 这表明了a变量没有被自动销毁依然留存在内存中下次调用不会使a恢复到初始值所以记得要手动销毁闭包来释放变量a的内存占用即fnull
值得一提的是闭包可以用在创建工厂函数上来生成具有特定行为的函数
function createMultiplier(multiplier) {return function(num) {return num * multiplier;};
}const double createMultiplier(2);
const triple createMultiplier(3);console.log(double(5)); // 输出: 10
console.log(triple(5)); // 输出: 15
十、什么是垃圾回收机制
垃圾回收机制是 JavaScript 引擎用来自动管理内存的一种机制。它的主要任务是找到不再使用的对象并释放其占用的内存以避免内存泄漏。
两种常见的垃圾回收算法
1、标记-清除算法
标记阶段从根对象如全局对象开始递归地标记所有可达的对象。清除阶段清除所有未标记的对象释放其占用的内存。
2、引用计数算法 这种算法通过计数每个对象的引用数来管理内存。当引用计数为零时对象将被回收。
垃圾回收机制不会对闭包用到的变量内存进行回收。
十一、
