面试总结

七月与安生
443 阅读5分钟

Vue知识汇总

周期函数

  • beforecreated 实例创建阶段，可以在这里做一个loading加载事件
  • created 实例创建完毕触发，可以在这里进行异步操作，初始化页面的数据
  • beforemouted DOM渲染阶段
  • mouted DOM已经渲染完毕 ，可以在这里通过 ref获取DOM元素
  • beforeupdata:数据更新阶段，模型中的数据发生改变，但是还没有同步到视图中来，可以做一些数据集中更新，在这里写上相应的函数
  • updata：数据更新完毕，模型和视图的数据都已经同步更新完毕
  • beforedistory:实例销毁阶段，实例上定义的数据和方法都能用 但是 指令不能使用
  • distory:实例销毁完毕 可以做一个确认停止事件的确认框，还可以清除定时器之类的操作,在做页面底部点击按钮回到顶部时候，离开该页面需要移除监听鼠标的滚动事件，不然会报错。

父子组件通讯

父向子传值

在父组件使用子组件的时候，用v-bind绑定一个属性对应要传过去的值，例如：:id = 123 ,然后在子组件里面使用 props:['id'],拿到传过来的值：this.props

子向父传值

在子组件中使用 this.$emit('方法名'，msg)，在父组件中使用@方法名=函数名，在methods里面定义这个函数名，函数名的参数就是要传过来的值

计算属性 computed

用处：通过data里面定义已有的属性来计算得到一个新的属性，并且这个属性就是定义的这个函数
格式：computed{ fullName(){ return this.name1 + this.name2 } } 差值表达式使用计算得到的新属性：

{{this.fullName}}

监听器 watch

用处:用户监听data里面定义的属性的变化，数据一发生变化，就会执行相应的函数，它是一个对象，有两个参数，一个是新值newVal一个是旧值oldVal.
格式：watch{ name(newVal,oldVal){ this.fullName = newVal + 111 } }
如果监听的data里面定义的数组或者对象，我们就要用到深度监听,固定写法 hadler() deep：true
深度监听：watch{ name:{ handler(newVal,oldVal){ this.fullName = newVal + 111 }, deep:true } }

计算属性 computed和监听器 watch的区别

  • 计算属性computed:只有在相关数据发生改变时，才会计算相关的属性，如果没有发生改变会去读取已有的缓存，这样不会每次使用都会去执行函数，computed适合处理比较复杂的逻辑运算，性能也比watch好一些
  • 监听器watch：因为数据一发生变化就会触发watch监听器，同时也去执行相应的操作，性能稍微比computed要差，这里适合执行一些异步操作和异步请求

Vuex使用 资源管理器

  • state： 类似vue实例里面的 data ，存放公共数据， 其他组件可直接通过 this.$store.state.list.name使用数据
  • mutations：是一个对象，里面定义其他组件传过来的事件函数，并且其他组件只能通过这个函数直接改变state的数据 通过 this.$store.commit('传过去的函数名'，传过去的数据)
  • action：不能直接异步改变state里面的数据，他提交的是mutation里面的方法，而不是直接变更状态，通过this.$store.dispatch(‘mutations里面的方法’)，接收context参数，将context.commit(方法，context.state.num)
  • getters：依赖state里面你的属性得到新的属性 例子：const getters = { evenordd:state=>state.count%2==1?‘even’：‘two’ } 其他组件通过 this.$store.getters.evebordd
  • modules通过组件化分割store
const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } })
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }

怎样创建、封装 全局组件

  • 先正常创建一个组件和一个js文件，在js文件里面引入这个组件，然后在main.js里面引入这个组件，并且使用vue.component("标签名"，引入组件的文件名)，然后注册全局组件 Vue.use(List)

JQuery链式调用的原理

  • jquery所有对象方法都挂载在prototype上，然后每个对象的方法都返回实例对象本身，用对象调用方法就形成了链式调用

Js数组字符串的方法

  • push:向数组的最后面添加内容，返回值是添加后数组的长度
  • pop:删除数组中的最后一项，返回值是删除的那一项
  • shift：删除数组中的第一项，返回值是删除的那一项
  • unshift:向数组中的最前面添加内容，返回值是添加后数组的长度
  • concat:连接两个数组组成一个新的数组，返回一个新的数组
  • join:让数组中按照指定的字符连接起来，返回新的字符串
  • slice：如果参数只有一个，那么将数组从第一个参数的索引值截取到最后，如果参数有两个，那么将数组从第一个参数的索引截取第二个参数所在的个数，并且不包括第二个参数，如果两个参数为负数，那么将数组的长度加上参数的和大于0就按照相加后的和开始截取，小于零就让参数变为零来截取
  • indexOf:查找一个元素在数组中所在的索引，arry.lastOf(2)
  • splice：和slice特性一样 但是截取到第二个参数的个数包括第二个参数，并且会改变原数组，大于两个参数，其他的参数将会替代被截取的元素放到原数组
  • forEach():遍历数组的每一项，第一个参数是数组的每一项，第二个参数是每一项所在数组中的索引值
  • every():遍历数组判断数组中的每一项是否符合指定的方法，如果符合就返回 true 反而就会返回false
  • some():遍历数组，判断数组的每一项是否符合指定的方法，如果有一项符合就返回true，如果都不符合就返回false
  • map():遍历数组让数组中的每一项按照指定的方法执行并且返回新的数组
  • filter():遍历数组中的每一项，起到过滤作用，让每一项符合指定条件的元素放到新的数组中返回

随机数取整知识

  • Math.ceil() 向上取整
  • Math.floor() 向下取整
  • Math.round() 四舍五入
  • Math.random() 0-1之间的随机数
  • Math.ceil() 1-10之间的随机整数
  • Math.round(Math.random()) 0-1之间的随机整数
  • Math.round(Math.random()*10) 0-10之间的随机整数

CSS3动画

  • transition：all 3s;过渡
  • transform：scale(x,y)=>scale(1.5,0.5) 放大缩小
  • transform：translate(x,y)=>translate(-50%,-50%) 平移
  • transform：rotate(角度)=>rotate(90deg) 旋转默认以正中心旋转
  • transform-origin：center bottom；以底部中间旋转
  • JQuery animate:自定义动画
  • 参数1：要执行动画的属性，参数2：动画执行的时长，参数3：动画执行完后立即调用的函数
$("div").animate({
    "opacity":0.4,
    "color":'red'
},2000,function(){
    alert('执行完毕的方法定义')  
})
  • animation动画,需要两步
1.第一步：用关键帧申明动画
@keyframes fly {  /* fly 类似于js 的声明函数 function */
	0% {
	  bottom: 10%;
	}
	50% {
	  bottom: 20%;
	}
	100% {
		bottom: 10%;
	}
 }
 2.第二步：再用animation调用动画
 .div{
    animation:fly 3s linear infinite
 }
 完成动画

什么是深拷贝，什么是浅拷贝

  • 浅拷贝：就是将一个变量赋值给另一个变量，并且改变了被拷贝对象或者数组的属性值，那么原对象的相应属性也会跟着改变。不好的是会造成不容易发现的bug
  • 深拷贝：就是将对象中的数组，子对象进行深度递归遍历，直到其不是引用类型位置再进行复制，这样即使改变了其中一个值，也不会影响到另一个

vue-router路由模式哪几种

  • hash模式：地址栏上有#号的，且url地址可以放在任意标签中打开，hash模式只要是监听hashchange事件，调用window.location.hash获取苗点值和路由规则进行匹配然后将定义的组件渲染到页面中
  • history模式：地址栏上没有#号，且url地址只能在一个标签页中打开，它是利用H5的history.pushStateAPI来完成URL跳转而且无需重新加载页面

谈谈对Promise的理解

  • Promise对象是一个构造函数，用来生成Promise实例
  • 为解决异步处理回调金字塔问题而产生的
  • Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可逆，一旦创建就会立即执行
  • 可以让代码类似jquery的链式编程风格

Ajax请求流程

  • 1.创建异步对象 let xml = new XMLHTTPRequest()
  • 2.设置请求方式，请求URL地址
  • 3.设置请求头的类型
  • 4.设置请求的Sed函数 带参数，get直接拼接，POST直接可以传对象
  • 5.让异步对象接手请求的数据

跨域的产生原因以及解决办法

  • 原因：请求地址的 域名 协议 端口不一致而导致的
  • 解决办法
  1. 使用代理，在config.js里面设置 changeOrgin：true,主要利用proxyTable,这个参数主要是一个地址映射表，将复杂的URL简化，将target地址映射成 pathRewrite:api=>"/" 2.JSONP方式，只支持get请求，不支持post请求 3.反向代理 nginx

语义化标签的理解

通过标签就能判断内容的语义，使代码更简洁通俗易懂，比如 表里就用h 标题用title 段落用 p

适配的理解

语义：就是同一套代码可以在不同大小屏幕和分别率能正常使用，达到了这样，就完成了适配

  1. 媒体查询，使用@media 屏幕对应的大小设置对应的css样式
  2. 动态rem 通过设置 body的字体大小来绝对rem的大小比例

路由懒加载的方式

  • 1.在引入路由的时候 resolve=>require["./App.vue",resolve]
  • 2.用import const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')

vue2和vue3的区别（主讲vue3）

  1. template根组件可以用多个标签进行包裹，并且所有的方法 包括周期函数都需要按需引入
  2. 通过compositionApi将原有的data和周期函数包裹的东西全部用setup函数括起来
  3. 使用 reactive来做一个统一的反应数据对象，所有的数据都通过它来返回得到，所有的方法或者变量都得在后面return返回，不然在页面上拿不到
  4. computed可以直接在 reactive反应对象里面直接写 计算属性函数
  5. props接收子组件的传参，$emit向父组件推送的方法都需要在setup函数里面用参数接收并进行使用
avatar
文章
阅读
粉丝