1.闭包
什么是闭包,严格来说要满足四个条件
1.有函数嵌套
2.内部函数引用外部作用域的变量参数
3.返回值是函数
4.创建一个对象函数,让其长期驻留
闭包的应用:可以实现数据的私有
let count = 0;
function add(){
count++
console.log(count)
}
add()
//但是整个count是全局变量,很容易被修改
function fn(){
let count = 0;
function fb(){
count++
console.log(count)
}
return fb
}
let result = fn() //完成这一句才算是闭包
result() //1
result() //2
//实现了数据私有,无法直接修改count
2.事件循环
1.js是单线程,防止代码阻塞,我们把代码(任务):同步和异步
2.同步代码给js引擎执行,异步代码交给宿主环境
3.同步代码放入执行栈中,异步代码等待时机成熟送入任务队列排队
4.执行栈执行完毕,回去任务队列看是否有异步任务,有就送到执行栈执行,反复循环查看执行,这个过程是事件循环。
3. 宏任务和微任务
js把异步任务分为宏任务和微任务
1.同步代码(js执行栈/回调栈)
2.微任务的异步代码(js引擎)
process.nextTick
Promise.then catch() Promise本身同步,then/catch的回调函数是异步中的微任务
Async/Await
Object.observe等等
3.宏任务的异步代码(宿主环境)
script(代码块)
setTimeout / setInterval 定时器
setImmediate 定时器
3.原型和原型链
原型:每个函数都有prototype属性称之为原型
因为这个属性的值是个对象,也称为原型对象
作用:
1.存放一些属性和方法
2.在javasscipt中实现继承
const arr = new Array(1,2,3)
arr.reverse()
console.log(arr.__protp__ === Array.prototype) //true
Array.prototype 原型 中有reverse 方法
构造函数Array
实例arr
原型链:对象都有__proto__属性,这个属性指向它的原型对象,原型对象也是对象,也有__proto__属性,指向原型对象的原型对象,这样一层一层形成的链式结构称为原型链,最顶层找不到则返回null
4.如何判断两个对象相等
2.Object.keys()
function areObjectsEqual(obj1, obj2) {
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (obj1[key] !== obj2[key]) {
return false;
}
}
return true;
}
const obj1 = { name: 'Alice', age: 25 };
const obj2 = { name: 'Alice', age: 25 };
const obj3 = { age: 25, name: 'Alice' };
console.log(areObjectsEqual(obj1, obj2)); // true
console.log(areObjectsEqual(obj1, obj3)); // false
3.ES6 Object.entries(obj).toString()
const obj = { name: 'xiaoming', age: 'seven',sex: 'man', grade: 'four' };
const obj2 = { name: 'xiaoming', age: 'seven',sex: 'man', grade: 'four' };
console.log(Object.entries(obj).toString() == Object.entries(obj2).toString())
5.nextTick的原理
nextTick 是 Vue 提供的一个异步方法,用于在 DOM 更新之后执行回调函数。它的原理是利用 JavaScript 的事件循环机制来实现异步执行
6.vue的优缺点
优点:
- 简单:官方文档很清晰,比 Angular 简单易学。
- 快速:异步批处理方式更新 DOM。
- 组合:用解耦的、可复用的组件组合你的应用程序。
- 紧凑:~18kb min+gzip,且无依赖。
- 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
- 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。
缺点:
不支持IE8。
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
vue是单页面页面,对于搜索引擎不友好,影响seo.因此不适合做公司官网。比如两个vue路由(页面),它的路径是这样的:index.html#aaa 和 index.html#bbb,但对于搜索引擎来说,都是同一个页面,就是index.html。这样搜索引擎就无法收录你的页面。
7.生命周期
1.又名:生命周期回调函数、生命周期函数、生命周期钩子
2.是什么:vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm或组件实例对象
beforeCreate 此时:无法通过vm访问到data中的数据、methods中的方法
created 此时:可以通过vm访问到data中的数据、methods中配置的方法
beforeMount 此时:1.页面呈现的是未经Vue编译的DOM结构 2.所有对DOM的操作,最终都不奏效
mounted 此时:1.页面中呈现的是经过Vue编译的DOM 2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束,一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
beforeUpdate 此时:数据是新的,但页面是旧的,即:页面尚未和数据保持同步
updated 此时:数据是新的,页面也是新的,即:页面和数据保持同步
beforeDestroy 此时:vm中所有的:data、methods、指令等待,都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
destroyed
activated 路由组件被激活时触发
deactivated 路由组件失活时触发
nextTick
vue3中 beforeUnmount和unmounted代替beforeDestroy 和destroyed
常用的生命周期钩子:
1.mounted/发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
8.vue组件之间通信
在Vue中,组件间通信主要有以下几种方式:
1.父子组件通信:props / emit / v-on
3.兄弟组件通信:EventBus / Vuex
4.跨多层组件通信:EventBus / Vuex / provide / inject
5.Vuex:状态管理,适合大型应用
vuex:vuex相关 - 简书 (jianshu.com)
6.EventBus:创建一个事件中心,用on监听事件
7.provide / inject:父组件提供数据,子组件注入数据,无需props和事件
9.less 在vue项目中如何全局引入
vue3.0配置less并使用全局变量_less全局变量如何引用-CSDN博客