vueRouter的原理
vueRouter有两种模式：一种是Hash模式，一种是HisTory模式
1.Hash模式是以url中#后面的内容作为路由地址,可以直接通过location.url来切换浏览器的地址如果只改变了#后面的内容，浏览器不会向服务器请求这个地址，但是会把这个地址记录在浏览器的访问记录中，我们可以监听hashchange事件，当hash发生变化时，会触发hashchange事件，在hashchange事件中记录当前路由地址，并找到当前路由对应的组件，重新渲染在浏览器中
2.History模式路径就是普通的url，通过history.pushState()方法来改变地址栏，并把当前地址记录在浏览器的访问历史中，并不会真正的跳到指定的路径，也就是浏览器不会向服务器发送请求。通过监听popstate事件，可以监听到浏览器历史操作的变化，在popstate事件中可以记录浏览器地址栏改变后的地址axios的封装有那些1.引入axios
import axios from 'axios'2.创建实例const http = axios.create({
baseURL: '',
//接口头部
timeout: 10000,
});3.拦截处理
// 添加请求拦截器
http.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
4.请求方式封装
并抛出
const get=(url,data)=>{
return new Promise((res,rej)=>{
http.get(url,{params:data}).then(res).catch(rej)
})
}
const Delete=(url,data)=>{
return new Promise((res,rej)=>{
http.delete(url,{params:data}).then(res).catch(rej)
})
}
const post=(url,data)=>{
return new Promise((res,rej)=>{
http.post(url,data).then(res).catch(rej)
})
}
const put=(url,data)=>{
return new Promise((res,rej)=>{
http.put(url,data).then(res).catch(rej)
})
}
export {get,post,Delete,put}Number和parseInt的区别Number()是一个基本数据类型，而 parseInt 解析输入值的一个函数 Number 可以解析布尔值 parseInt 不可以解析
url输入到地址栏后会发生什么1.DNS解析2.TCP链接3.发送请求4.服务器处理请求并返回数据5.浏览器解析数据并渲染数据6.结束
输入了一个域名,域名要通过DNS解析找到这个域名对应的服务器地址(ip),通过TCP请求链接服务,通过WEB服务器(apache)返回数据,浏览器根据返回数据构建DOM树,再把css形成一个样式表.这两个东西结合,变成了render树.页面上通过重绘和回流的过程,渲染出页面来v-if和v-show的区别v-if和v-show都可以显示和隐藏一个元素v-if适合不频繁的变化
v-show适合值频繁的变化 1.v-if v-if是惰性的 判断只有值为true的时候才会选择将数据加载出来。为false的时候不加载 2.v-show 在数据的第一次渲染的时候
无论为true还是为false都会将数据渲染出来。只不过 值为false的时候vue会用css的
display：none属性给他隐藏起来。为true的时候在变化为 display：block给显示出来vue子父组件传值1，在子组件上绑定某个事件以及事件触发的函数子组件代码
事件在子组件中触发的函数submit(){
this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
},2，在父组件中绑定触发事件
父组件触发函数显示子组件传递的数据testData(data){
console.log("parent");
console.log(data)
},router传参的方式 1.router-link1.不带参数
2.带参数
//路由里面配置path:"/home/:id" 或者 path:"/home:id"
//html取参 $route.params.id
//script 取参 this.$route.params.id
2.this.$router.push()//基于name配置路由
this.$router.push({name:'home',query:{id:1,age:2}})
//路由里面的写法
{
path: '/hhhhhhh', //这里可以任意
name: 'home', //这里必须是home
component: Home
}
//----------------------------------------------------------------------------
//基于path配置路由
this.$router.push({path:'/home',query:{id:1,age:2}})
//路由里面的写法
{
path: '/home', //这里必须是home
name: 'home', //这里任意
component: Home
}
v-for和v-if的区别
v-for是vue的循环遍历方法 v-if是vue的判断方法
当一个盒子上同时出现v-for和v-if的时候
在 vue 2 中，在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。
在 vue 3 中，v-if 总是优先于 v-for 生效实现一个DIV上下左右居中的三种方法 1.弹性盒布局 2.使用scss布局使用逻辑方式
用原宽度-div本身的宽度/2 就是外边距的值div{
width: 50vw ;
height:
50vh;
margin-left: (100vw-50vw)/2;
margin-top: (100vh-50vh)/2;
}3.使用 css的定位先给盒子定位到 top：50% Left：50%
然后在用margin 调整rem和em的区别1.rem是相对于根元素进行计算，而em是相对于当前元素或父元素的字体大小2.rem不仅可以设置字体的大小，还支持元素宽、高等属性。3.em是相对于当前元素或父元素进行换算，层级越深，换算越复杂。而rem是相对于根元素计算，避免层级关系的错乱。HTTP请求方法有那些大概有八种分别是 1.get方法 2.post方法 3.delete方法 4.put方法 5.head方法 6.connect方法 7.options方法 8.trace方法我们平时经常使用的有前四种方法 1.GET方法
GET方法用于使用给定的URI从给定服务器中检索信息，即从指定资源中请求数据。使用GET方法的请求应该只是检索数据，并且不应对数据产生其他影响。
GET请求的不安全性，在处理敏感数据时，绝不可以使用GET请求
2.POST方法
POST方法用于将数据发送到服务器以创建或更新资源，它要求服务器确认请求中包含的内容作为由URI区分
的Web资源的另一个下属。POST请求永远不会被缓存，且对数据长度没有限制；我们无法从浏览器历史记录中查找到POST请求。
3.DELETE方法
DELETE方法用来删除指定的资源，它会删除URI给出的目标资源的所有当前内容。
4.PUT方法
PUT方法用于将数据发送到服务器以创建或更新资源，它可以用上传的内容替换目标资源中的所有当前内容阻止事件冒泡的方式event.stopPropagation();
阻止冒泡事件，不会阻止默认事件==和===的区别==是比较值相等即可console.log(1=='1') //true===不仅比较值是否相等还要比较数据类型是否相同console.log(1==='1') //false
console.log(1===1)//trueJS常见的创建方式//1.实例化创建
new
var obj=new Obj();
obj.name="磊磊"
obj.age=18
obj.say=function(){
console.log(this.name)
}
//2.直接创建
let obj1={
name："磊磊"，
age：18
}
//3.自定义构造函数创建对象
let OBJ=new obj2("磊磊",18)
function obj2(name,age){
this.name=name;
this.age=age;
console.log(this.name);
}
VUE3常用的apicomputed和watch的区别 1.computed 是一个计算属性
支持缓存，当依赖数据发生改变，会重新进行计算 computed中的函数必须用return返回最终的结果
不支持异步，当computed内有异步操作时无效，无法监听数据的变化2.watch
是一个侦听属性
不支持缓存，数据变，直接会触发相应的操作 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作。
watch支持异步let，const，var的区别 变量提升1.var声明的变量存在变量提升.（变量可以在声明之前调用且不会报错。值为 undefined）
2.let和const不存在变量提升。（变量不可以在声明之前调用。否则会报错）
是否允许重复声明变量
1.var允许重复声明变量
2.let和const在同一作用域不允许重复声明变量。
var f = 4;
var f = 5;
console.log(5) //5
let g = 6;
let g = 7;
console.log(g) //报错
const h = 8;
const h = 9;
console.log(h) //报错
块级作用域
1、var不存在块级作用域。
2、let和const存在块级作用域。 （ES6才有块级作用域的概念.因为var不是ES6语法所以没有块级作用域）
//作用域有
全局作用域
局部作用域
ES6块级作用域
//全局作用域是指挂载在Windows下面的数据 可以被全局访问的作用域 缺点:容易导致全局的污染，命名冲突
//局部作用域是指在函数内部的作用域
只有在函数内部才能访问到
//块级作用域 let和const在任意的代码块中定义的变量都认为是块级作用域中的变量
var a=2；
function
fun（）{
console.log（a）//undefined
if（false）{
var a=3
}
}
fun（）//3
变量提升 内层变量覆盖外层变量
是否能修改声明的变量
1.var和let可以修改
2.const 声明的如果是基本数据类型则不可以修改。如果是复杂数据类型可以修改内部的属性。但是不可以
修改变量名。必须保持堆空间地址是不变. const obj = {
name: '磊磊',
age: 18
}
obj.age = 21
console.log(obj) //{ name: '磊磊', age: 21 }cookie，sessionStorage，localStorage的区别这三个都是用来存储数据的不同点在于cookie存储很小 大概只有4kb左右sessionStorage也被称为绘画存储 它的特点是临时性
是一个临时存储。在我们关闭浏览器的时候绘画存储里面存入的数据也会被清空localStorage是被称为本地存储
他的特点是存储的时间长
只要存入的数据要么给他设置一个过期时间要么只能手动清除。关闭浏览器数据不会消失es6新增语法let/const
箭头函数
模板字符串
解构赋值 等
let/const
Const声明一个常量
let声明一个变量不会变量提升
箭头函数
箭头函数没有this
他的this指向上一层 模板字符串let a=18
console.log(`李磊${a}岁了`)//李磊18岁了解构赋值数组解构,函数参数解构 对象解构如何清除浮动标准盒模型和怪异盒模型CSS盒子模型（Boxmodel）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性：1.center(内容)
2.padding(内边距)
3.border(边框)
4.margin(外边距)这就是一个简单的盒子模型标准盒模型是指 一个盒子的宽度=width+(padding×2)+(border×2)+(margin×2)
×2是因为他们都有左右之分需要都算进去怪异盒模型是指 一个盒子的宽度=width+margin×2
因为怪异盒模型中 width中已经包括了padding和border的值http的常见状态码 1xx （临时响应）
100 表示临时响应并需要请求者继续执行操作的状态码 2xx
（请求成功）
200 表示服务器成功返回数据 3xx （重定向）
301（永久移动） 请求的网页已经移动到了新的位置。服务器返回此响应时，会自动将请求者转到新的位置
302 （临时移动） 服务器目前从不同的位置的网页响应请求 但是请求者继续使用原有的位置进行以后的请求
304
（未修改） 自从上次请求之后
请求的网页没有修改过 服务器返回此响应时，不会返回网页内容。 4xx （请求错误）
404 页面不存在
401 没有权限
500 （服务器错误）
500 服务器内部错误
无法完成请求
503 服务器目前无法使用
（服务器维护中或者超载的原因）vue 的生命周期生命周期只要分为四个阶段 分别是 创建
挂载
更新 销毁创建前：beforeCreate
创建后：created挂载前：beforeMount
挂载后：mounted更新前： beforeUpdate 更新后：updated销毁前：beforeDestroy
销毁后：destroyed实例激活
actived
实例失效 deactived平时用的比较多的就是 created和 mountedcreated用于在到新的页面之后请求后台返回的数据进行页面的渲染操作mounted主要用于dom挂载后做一些dom操作。也就是页面上面的交互.浏览器的缓存策略在前端开发中
我们主要追求的是极致的运行速度和极强的用户体验感。而在浏览器中能影响浏览器运行速度的是url请求。而为了更快的运行 我们除了做一些按需加载之外。还可以用到浏览器的缓存策略什么是缓存 对于web缓存。主要是针对一些 （后端返回的数据，图片路径）之类的东西.当我们在请求过这个页面的数据的时候，这时候浏览器会将我们访问过的数据缓存起来。当我们下次在到这个页面的时候。浏览器判断在之前的缓存中有这些数据，那么就可以直接拿来用。而不需要在此向服务器发送请求。也是属于一个性能上面的优化缓存的作用是什么 1.减少浏览器的运行时间 2.减少服务器的压力浏览器缓存机制详解在http协议头中和和他们中的mate标签中定义 分为过期机制和验证机制 从这两方面来判断是否直接使用该缓存 1.过期机制
也就是在浏览器中的有效期
http协议头中存在过期时间等信息 在有效期内并且浏览器已经缓存过这个东西
2.验证机制
服务器响应中
响应头中会有一个etag标签
这个标签来验证是否经过更改数据信息等。如果没有更改则可以直接使用 更改过则需要重新进行一个请求.缓存机制的控制设置过期时间
＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞
设置缓存
＜meta http-equiv="Pragma" content="no-cache"＞
存储方式浏览器cookie，sessionStorage，localStorage常见的跨域方式1.jsonp 跨域 jsonp实现跨域 主要是利用了动态创建script标签请求后端接口地址 传递callback参数后端接收到callback 经过数据处理
返回的callback函数的调用形式。callback中的参数就是json2.代理方式 我们在vue项目中 会用哪个vue.config.js里面配置一个proxy，里面有一个target属性指向跨域链接。修改完成之后重启项目就好了原理是就是启动了一个代理服务器
这个代理服务器绕过了同源策略。请求的时候通过代理服务器获取数据在传给浏览器3.CORSCORS全称是跨域资源共享
主要是后台工程师设置代码来达到前端跨域请求Eventloop机制这个是js的一个底层运行的原理 因为js的单线程的。但是一些耗时的任务会影响到我们的执行效率。这样我们使用异步的时候
会单独开辟出来一个异步线程。将这些耗时的放在异步线程中。等主线程里面执行完毕之后，再从异步队列中取出一个到主线程中执行。执行完之后在在异步线程中取出第二个。这个过程就是eventloop循环机制判断JS的数据类型
1.typeof
typeof主要用来判断基本数据类型 他返回的数据类型是字符串 （注意：typeof来判断null和引用数据类型
返回的结果都是 ‘object’）
2.instanceof
instanceof 后面一定要是对象类型，并且大小写不能错
（专门判断引用数据类型）this的指向箭头函数：定义时this指向外层
普通函数：谁调用这个函数this就指向谁apply，call和bind的区别apply call bind主要都是改变this指向的call 后面传递的参数是以逗号隔开apply 后面传递的参数是以数组的形式bind 传递的参数也是逗号隔开 但是bind如果要执行必须在后面加个（）才行防抖和节流防抖是指我们在连续对一个事件进行操作的时候，这个事件只会按照固定每n秒执行一次的时间执行（就是为了防止用户连续点击多长清除相同的数据
造成浏览器和服务器频繁的接收带来的压力）节流大多用于搜索框等地方
是指我们在连续操作一个事件的时候，这个事件不会执行，只有等我们操作完成之和等n秒后自己执行（也是减少浏览器和服务器的压力）数组去重的方法
1.双重for循环去重//数组去重
function disTinct(arr) {
var ans = []
for (var i = arr.length - 1; i >= 0; i--) {
var nb = 0 //没重复为0.有重复不为0
for (var j = i - 1; j >= 0; j--) {
if (arr[i] == arr[j]) {
nb = 1
break
}
}
if (nb == 0) {
ans.unshift(arr[i])
}
}
return ans
}2.indexof去重//数组去重(indexOf)
function unique(arr) {
var res = []
for (var i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) == -1) {
res.push(arr[i])
}
}
return res
}3.sort排序后循环数组去重function unique(arr){
var arr2 = arr.sort();
for(var i=1;i
@media mediatype and|not|only (media feature) {
CSS-Code;
}
2.media feature：媒体功能，如：width：屏幕可见宽度；max-height：页面最大可见区域高度等
3.and
not
only：逻辑操作符，可以用来构建复杂的媒体查询 //使用and逻辑操作符。横屏和最小宽度为700px时生效。
//使用not逻辑操作符，只有在大于300px时生效
//使用only逻辑操作符，只有在小于等于300px时生效
4.可以针对不同的屏幕尺寸设置不同的样式， 行内元素和块级元素行内元素一般是指内容的容器
a b i strong span img label input 等块级元素一般是盒子容器有宽高
文本流 header
ul li
ol li div
等可以使用display：block；将行内元素变成块级元素
也可以使用 display：inline； 将块级元素变为 行内元素我们一般使用的是 display：inline-block； 变成行内块元素 img的title和alt的区别title 通常当鼠标滑动到元素上的时候显示alt 是![]()
的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。对seo搜索优化的了解利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。隐藏关键字、制造大量的meta字、alt标签等。而通过正规技术和方式，且被搜索引擎所接受的SEO技术，称为白帽。搜索引擎优化的白帽法遵循搜索引擎的接受原则。他们的建议一般是为用户创造内容、让这些内容易于被搜索引擎机器人索引、并且不会对搜寻引擎系统耍花招。一些网站的员工在设计或构建他们的网站时出现失误以致该网站排名靠后时，白帽法可以发现并纠正错误，譬如机器无法读取的选单、无效链接、临时改变导向、效率低下的索引结构等。以下又为大家整理补充了一些内容闭包和它的解决的问题
闭包是什么？闭包通俗点讲就是可以在函数外部访问到函数内部的变量
闭包解决的问题因为正常情况下函数外部是访问不到内部的作用域变量的，而闭包却可以。他可以隔绝作用域，不造成全局污染.但是因为闭包长期驻留在内存中，会导致内存的泄露。我通常是将暴露在外部的闭包变量设置为nullCSS优先级
外部样式<内部样式<行内样式flex的常见属性设置主轴的方向flex-direction：
row行,column列设置主轴上的子元素排列方式justify-content： space-around平分,space-between两边贴中间平分,space-evenly每个间距相同设置子元素是否换行flex-wrap：wrap/nowrap设置侧轴上的子元素排列方式（单行）align-items：stretch 拉伸设置侧轴上的子元素的排列方式（多行）align-content：stretch 子元素高度平分父元素高度flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap子元素常见属性align-self 子元素自己在侧轴的排列方式order 属性定义子项的排列顺序(前后顺序)常见的js数据类型
基本数据类型：number
biginit
Symbol boolearn null string
undefined 等
复杂数据类型：object Array常见获取dom的方法查找：getElementByid
查找ID
getElementsByTagName
查找标签
querySelector() 查找单个
括号中是 . 则是查找类名
#为查找ID 直接名字则是查找标签
querySelectorAll() 查找多个插入
appendChild
insertBefore删除 removeChild 克隆：cloneNode设置和获取属性 setAttribute(“属性名”,”值”),getAttibute(“属性名”) activated和deactivatedactivated
组件激活的时候调用 这个钩子在服务器端嗲用不会被渲染deactivated 组件停用时候调用 这个钩子在服务器端嗲用不会被渲染封装一个模态框vue路由钩子全局的路由钩子函数：beforeEach afferEach单个的路由钩子函数： beforeEnter组件内的路由钩子函数: beforeRouteEnter
beforeRouteLeave
beforeRouteUpdataXMLHttprequest对象的使用XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。function sendAjax() {
//构造表单数据
var formData = new FormData();
formData.append('username', 'johndoe');
formData.append('id', 123456);
//创建xhr对象
var xhr = new XMLHttpRequest();
//设置xhr请求的超时时间
xhr.timeout = 3000;
//设置响应返回的数据格式
xhr.responseType = "text";
//创建一个 post 请求，采用异步
xhr.open('POST', '/server', true);
//注册相关事件回调处理函数
xhr.onload = function(e) {
if(this.status == 200
this.status == 304){
alert(this.responseText);
}
};
xhr.ontimeout = function(e) { ... };
xhr.onerror = function(e) { ... };
xhr.upload.onprogress = function(e) { ... };
//发送数据
xhr.send(formData);
}
什么是协商缓存和强缓存协商缓存是浏览器第一次请求数据的时候，服务器将数据和数据缓存标识一起返回给客户端。客户端将二者备份至缓存数据库中。当再次请求数据的时，客户端将备份的数据缓存标识发给服务器端。服务器根据缓存标识进行判断。成功后返回304状态。通知客户端判断成功。可以使用缓存的数据强缓存就是不向服务器发起请求的缓存，也就是本地强制缓存。浏览器想要特定的数据时。会检查本地的缓存有没有该数据。如果有就直接获取本地数据使用。没有的话在向服务器请求该数据DNS解析的过程客户端提出域名解析请求。并将该请求发送给本地的域名服务器.本地的域名服务器收到请求之后。先查询本地缓存如果有该记录项。则本地域名服务器之间把查询的结果返回。如果没有该记录。则本地域名服务器直接将请求发给根域名服务器、然后根服务器在返回给本地服务器一个所查询域（根的子域）的主域名服务器的地址本地服务器再向上一步返回域名服务器发送请求 然后接收请求的服务器查询自己的缓存。没有该记录，则返回相关的下级域名服务器的地址，一直重复 直到找到为止找到之后先将返回的结果保存缓存，以备用。同时将结果返回给客户端JS的原型链两点:一是_ _proto_ ，二是prototype,比如说我用function创建了一个Person类，然后 new
Person 。创建了一个对象的实例叫p1，在Person 类的原型 prototype中添加了一个play方法。那么对象实例p1查找play这个方法的过程就是原型的原型链了首先在p1对象实例上查找是否有play方法，如果有则调用执行，如果没有则用p1.__proto__，往创建p1的类的原型上查找，也就是说往Person.prototype上查找，如果在Person.prototype找到play方法则执行，否则继续往上查找，则用Person.prototye.__proto__继续往上查找，找到Object.prototype，如果Object.prototype有play方法则执行之，否则用Object.prototype.__proto__继续再往上查找，但Object.prototpye.__proto__上一级是null,也就是原型链的顶级，结束原型链的查找页面性能优化页面的性能优化主要是减少http的请求和减少don操作比如说，防抖，节流，页面懒加载，路由懒加载，图片懒加载，组件封装，gzip压缩等都可以减少页面的加载时间.table布局的弊端显示样式和数据是绑定在一起的布局灵活度不高一个页面有大量的 table标签 代码会繁重搜索引擎不支持不易维护vuex的理解vuex是vue里面的一个状态管理工具。我们可以把请求到的数据放在vuex里面，然后在不同的页面需要操作数据的话，就再vuex中写入方法，通过异步调用方法。对数据进行操作。同时也可以用存储使数据达到一个持久化的效果。vuex适用于中大型项目。因为这些项目数据可能比较多。用vuex操作数据更加的方便bfc的理解是一个布局中的概念，把一个盒子设置成bfc之后,里面无论怎么布局.都不会影响外面的变动.另外如果是一个bfc盒子.浮动的元素也会参数计算.用它可以解决一些布局方面的问题吧.比方说.margin重叠.高度塌陷等. overflow:hidden.float. display:inline-blockv-html是做什么用的 和v-text的区别用于渲染页面
v-html可以识别html标签并渲染到页面中，而v-text不能识别标签，只可以渲染文本。
解析地址栏的参数vue按钮权限控制首先在store/index.js中定义好参数创建一个directive/has.js自定义指令文件在组件中引用，并且传参store/index.jsimport Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
buttonPermission: {
add: true,
edit: true,
delete: false
}
},
mutations: {
},
actions: {
},
modules: {
}
})
directives/has.jsexport default {
inserted(el, bindings, vnode) {
// console.log('进入dom结构了');
// console.log(vnode)
let btnPremissionValue = bindings.value;
let flag = vnode.context.$store.state.buttonPermission[btnPremissionValue]
!flag && el.parentNode.removeChild(el)
}
}组件中引用
vue按钮级别的权限控制
编辑
添加
删除
$nextTick的作用就是设置一个回调,用于异步执行。 就是把你设置的回调放在 setTimeout 中执行,这样就算异步了,等待当时同步代码执行完毕再执行。”我们要知道vue里面有一个虚拟dom，页面上所有的操作都是先改变虚拟dom，最后再把虚拟dom更新到实际的页面dom上，这个时候就会涉及到到一个问题，什么时候才是最后？这个时候就会涉及到JS事件执行机制中的宏任务和微任务个人理解的步骤应该是这样的：1、执行完当前宏任务script，立即执行微任务2、微任务执行完毕后进行页面渲染3、页面渲染完毕，开始执行$nextTick
