2月27日面试总结

太过爱你忘了你带给我的痛 2022-01-20 04:55 229阅读 0赞

# 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里面的方法’)
 *  getters：依赖state里面你的属性得到新的属性 例子：const getters = \{ evenordd:state=>state.count%2==1?‘even’：‘two’ \} 其他组件通过 this.$store.getters.evebordd

## 怎样创建、封装 全局组件 ##

*  先正常创建一个组件和一个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的链式编程风格