1.$nextTick()
- dom更新是异步的，$nextTick()中的代码会在dom更新后执行保证执行顺序
- 原理:支持 Promise 的环境中,Promise.then,否则就用setTimeOut 或 setImmediate
2.keep-alive
- 组件缓存,把组件放入内存中避免销毁和重建
3.混入(重点)mixin
- 是一个拥有vue组件所有选项的对象 , 这个对象上的所有选项可以加入到.vue的文件中
- 在组件本身和mixin发生冲突,以组件本身为准
- 想在项目中每个组件上都某些事情的时候就用到混入mixin
- 实际应用: 计算项目中所有组件的数量
每个组件都有mothen钩子函数,渲染时都会执行
声明一个变量为0,将
在main.js中调用vue实例的mixin方法传入一个对象,对象中可以声明mothen钩子函数,让变量++,在打印这个变量
4.v-modle原理(重点)
<input :vaule="msg" @input="msg=$event.terget.value"/>- 将input标签的value属性动态绑定一个变量,通过input事件拿到输入的内容赋值给变量
5.开发中遇到的困难(重点)
6.数组方法
- arr.map((item,index)=>{ })映射数组
- arr.forEach((item,index)=>{ })遍历数组
- arr.filter((item,index)=>{ })
- arr.sort() 将数组里的项从小到大排序
- arr.reverse() 反转数组项的顺序。
- arr.concat()，合并数组,括号里面写内容 ("字符串要加引号"),
- arr.slice( 1 , 3 )截取数组参数1是开始下标,参数2是结束下标,包括开始不包括结束
- arr.splice( 2,0,4,6 )动态删除添加
- arr.every(item=>{return item>3}) 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
- arr.some(item=>{return item>3}) 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
7.computend()
- 一个变量是由另一个变量计算处理后得来就用到计算属性
- 计算属性相比普通函数的优势:计算属性会把计算结果存入内存,依赖项不变直接从内存中取结果,不会重新计算
8.宏任务,微任务
- JSv8引擎是单线程的,所以耗时任务(异步任务)会交给宿主环境去执行,执行结束后会把回调放到任务队列中排队
- 此时就有了微任务和宏任务,异步任务的两种分类
9.this.$set()
- vue2中给data中声明的响应式对象数据添加属性,
语法: this.$set('对象名','key','value')
10.注册指令
- 在install方法中参数可以获取vue实例.vue实例上有directive方法用来注册自定义指令,
- 第一个参数是指令名,第二个参数是对象对象中有逻辑函数,函数有两个形参el,binding,
- el是绑定的标签,binding是自定义属性值
12.vue3和vue2区别
- 1.vue3中抛出了两个函数 createVNode()创建虚拟Dom 和 render()挂载到真实Dom上
- 2.vue2中响应式依赖ES5 Object.defineproperty() 缺陷不能侦听属性的增加 vue3中依赖ES6 Proxy 14种对象操作方法都可以拦截
- 3.vue2选项式api,vue3组合式api,并且可以混用
- 4.移除了this关键字,新增setup函数,形参props,{emit}
- 5.响应式数据在ref函数中声明
...
13.虚拟DOM
- 就是对象,保存了标签名,属性,子节点信息
- vue3中抛出了两个函数 createVNode()创建虚拟Dom 和 render()挂载到真实Dom上
- 语法: 引入 improt {createVNode,render} from 'vue'
创建虚拟Dom const obj = createVNode('标签或者组件',{属性},[子节点])
渲染真实Dom render(VNode,真实Dom节点)
14.http状态码
- 200 - 请求成功^^^^
- 201 - 已创建。成功请求并创建了新的资源
- 202 - 已经接受请求，但未处理完成
- 301 - 资源（网页等）被永久转移到其它URL^^^^
- 303 - 请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。
今后任何新的请求都应使用新的URI代替 - 306 - 已经被废弃的HTTP状态码
- 401 - token过期,请求过期^^^^^
- 404 - 请求的资源（网页等）不存在,请求失败^^^^
- 500 - 内部服务器错误
- 501 - 服务器不支持请求的功能，无法完成请求
15.请求响应拦截器
- axios.interceptors.response.use(因特撒喷特斯)
- 请求拦截器:在请求头上添加token
- 响应拦截器:服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。token过期,token续签
16.路由前置守卫
- router.beforeEach((to, from, next) => {})
- 作用:判断用户是否有权限跳转某些路由,to()到哪里去,from()从哪里来,next()放行,next(false)不放行
- 例如:用户没有登录 而是直接通过修改浏览器 url 来访问网页，这种操作无疑是不安全的。
- 路由导航守卫可以让我们对用户要跳转的路由做一次检查，符合条件后放行，不符合条件则强制用户跳转登录页面。
17.原生js实现轮播图
- 维护一个索引值
- 遍历所有图片 , 把所有图片透明度设置为0 , 在把当前图片根据索引透明度设置为1
- 使用定时器让索引值++,如果大于图片索引长度就设置为0
- 注册鼠标移入事件清除定时器 , 鼠标移入事件重新调用定时器
- 上一张按钮下一页按钮就是注册点击事件让索引++或--
18.输入url地址按下回车发生了什么？
- 1.输入url地址后，首先进行DNS解析，将相应的域名解析为IP地址；
- 2.客户端根据IP地址去寻找相应的服务器；本地缓存,远程服务器
- 3.与服务器进行TCP的三次握手；
- 4.客户端找到相应的资源库；
- 5.根据资源库返回页面信息；
- 6.浏览器根据自身的执行机制解析页面；渲染页面
- 7.最后服务器将解析信息返回给客户端，进行TCP的四次挥手。
- Object.defineProperty 响应式原理?
- Object.defineProperty() 可以拦截对于对象属性的访问
- 这个方法中第一个参数是拦截对象名,第二个是对象中的key,第三个是对象
- 对象中有get和set两个函数,访问对象的属性值时,获取到的就是get函数的返回值
- 设置对象的属性值时,set函数的参数newvalue就是设置的新值
- 可以再set函数中将新值赋值给input的value值就实现了数据影响视图
- 还可通过监听input事件拿到视图中的值赋值给get函数中return的变量实现视图影响数据
