vue综合测试

watch、computed、methods的区别

watch事件监听 computed计算属性 methods方法

computed和methods相比，最大的却别就是coputed有缓存：如果computed属性依赖的属性没有发生变化，computed属性就不会重新计算，反之属性发生变化时才会重新计算，并进行缓存。因此提高性能。而methods则是会运行一次计算一次。

watch和comput相比

双向绑定原理？vue2、3的区别

vue2：双向绑定即MVVM，采用数据劫持和发布订阅者模式，通过object.defineProperty（）来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

vue3：Proxy，代理，是一个对象，它包装了另一个对象（类似浅拷贝），并允许你拦截对该对象的任何交互。

父子组件通信的方法有那些

父组件传给子组件：子组件通过props方法接受数据

子组件传给父组件：$emit方法传递数据

扩展：非父子组件间的数据传递，兄弟组件传值

项目较小：evevntBus，创建一个事件中心，相当于中转站。可以用它来传递和接受事件

项目较大：使用vueX或者pina状态管理库来进行传值

vue2、3中的生命周期有那些

vue2:

beforeCreate

created

beforemount

mounted

beforeupdate

updated

beforedestroy

destroyed

vue3:最后两个有所变化

beforeunmount

unmounted

vue的hash和history路由模式实现的原理是什么？

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取

hash模式下，仅hash符号之前的内容都会被包裹。对后端而言没有做到对路由全覆盖都会返回404错误

history模式：histroy采用了HTML的新特性；且提供了两个新的方法：pushState（）、replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听状态变更。

导航守卫在项目中是如何使用的，都用来做了什么业务？

导航守卫即守卫导航（beforeEach），用来验证用户是否登陆

vuex有哪几种属性、如何实现数据模块化，在模块化中如何调用mutation方法？

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步！

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

vuex异步更新数据的方法？

mutation的功能大致相同，不同之处在于 ==》

1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

v-model指令如何在组件上使用

首先v-model是一个语法糖，

对slot的理解，v-slot指令的作用？

slot是插槽的意思，让用户可以拓展组件，去更好地复用组件和对其做定制化处理。

原型链是什么？如何实现原型链继承？

原型:函数都有一个prototype属性,而prototype会自动初始化一个空对象，这个对象就是原型对象

原型对象中会有一个constructor属性，这个属性将指向函数本身

实例化对象都有一个__peoto__属性，__peoto__属性指向原型对象

原型链：从实例对象往上找构造这个实例对象的相关对象，然后这个关联的对象在往上找，找到创造它的上一级的原型对象，以此类推，一直找到object.prototype原型对象终止，原型链结束。

原型链继承：原型链继承（将父类的实例作为子类的原型）

构造继承（使用父类的构造函数来增强子类实例，等于是赋值父类的实例属性给子类）

实例继承、拷贝继承、组合继承、寄生组合继承

如何改变this指向？他们的异同点？

call：使用this的时候，传一个或者多个参数来调用同一个函数

aplly：应用于某个对象的一个方法，用另一个对象来替代当前对象

call和aplly的区别：aplly只能接受数组，而call可以接收连续的参数

bind：创建一个新的函数，与call和aplly不同的是，bind想什么时候调用就什么时候执行。

深浅拷贝原理，以及实现的方法有那些？

浅拷贝：复制对象的时候，只对第一层键值对进行独立复制，如果对象内部还有对象，则只能复制嵌套对象地址。实现方法：Array.concat（） Array.slice（） object.assign（）

深拷贝：复制对象的时候完全的拷贝一份对象，即嵌套了对象，两者相互分离，修改一个对象属性也不会影响另外一个。实现的方法：需要封装一个函数（怎么封装？通常我都会去借鉴别人封装的后自我修改一下）

new关键字的作用？

创建一个空对象，给他添加一个属性proto这属性引用fn.prototype

运行构造函数，让内部的this 指向创建的对象（用创建的新对象去调用构造函数）

整个表达式的结果看函数的返回值：返回值是引用数据，那么就是返回值

返回值不是引用数据，那么就是这个运行完毕之后创建的那个对象

数组中常用的方法？

push（）、pop（）、unshift（）、shift（）、splice（）、slice（）、reverse（）、join（）

实现一个栈的功能，可以通过size获取长度，delete删除数据，add添加

React组件中 shouldcomponentUpdate生命周期有什么作用？

优化性能

盒子模型是什么？BFC形成的条件有哪些？

盒子模型是一种思维模型，由内外边距、边框、尺寸组成

形成条件：1.添加浮动float 2.display：lnline-block或flex 3.overflow除去默认值visible的所有属性 4.定位除去absolute的所有属性

display：none和visibility：hidden的区别是什么？

display：none 该元素不占据任何空间、不具有继承性

bisibility：hidden 该元素依旧存在，占用空间、具有继承性

class中那些样式具备继承性？

font、color、text、direction

每日五个面试题

Scss与less中如何定义变量

scss用$符号定义，less用@符号定义

写一个递归函数，实现某个数字阶乘的运算，如：5！=5*4*3*2*1

function factorial(num){  
        if(num <= 0){  
            return 1;  
        }else{  
            return num*arguments.callee(num-1);  
        }  
    } 

vuex中如何使用变更状态数据

$emit.enetbus $ref 使用commit提交mutation对store中的状态进行更改

组件中如何调用到vuex的store中的mutation方法

vue2.x中filter的作用是什么，如何定义？

文本格式化