vue的面试总结

vue面试总结-1

一、怎么获取token,网络请求,放在哪,请求头,还是哪?请求头放在哪个字段?请求头哪个属性下面

  1. 怎么获取token:(如下)
    先引入jwtSecret在mock数据中
    在这里插入图片描述
  2. 引入token(记得引入config,安装jsonwebtoken,并引入jsonwebtoken)在这里插入图片描述
    在这里插入图片描述
    ——再用postman测试接口则会返回token字段
    3.怎么获取网络请求
    在这里插入图片描述
    引入axios在request文件,
    4.headers要放在params的后面,不能和params在一个参数中。加不加params都可以,看api规范
    在这里插入图片描述
    二、utils数据变化侦听,你觉得watch好用吗?深层次侦听对象涉及到什么?设置为true.
    回答:大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?
    vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;
     demo: https://run.iviewui.com/oW2m2Jo7
     在这里插入图片描述
    在这里插入图片描述
    1.利用computed配合watch实现单个属性的深度监听;
     demo: https://run.iviewui.com/7zwv09qd
    在这里插入图片描述
    三.vue项目性能问题1.初次加载2.减少dom操作
    即HTML,CSS,JS,分别对应到 .vue 文件内的,template,style,script。
    注意:
    1.v-loading 减慢table的渲染速度
    2.减少http请求
    3.减少dom操作
    4.压缩图片(尽量Svg图片,可使用gzip压缩)
    5.v-if keep-alive路由/切换等缓存
    6.减少data初始变量 ,去掉不必要得冗余变量
    四.v-if vshow区别vshow对数据渲染有什么影响?data为什么是函数.
    v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;

v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

v-if适合运营条件不大可能改变;v-show适合频繁切换。

so,一般的,v-if有更高的切换消耗,而v-show有更多的初始化渲染消耗。

so,如果需要频繁的切换而对安全性无要求,使用v-show。如果在运行时,条件不可能改变,则使用v-if较好。

在创建或注册模板的时候,传入一个data属性作为用来绑定的数据。但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它。
Vue.component(‘my-component’, {
template: ‘

hello Vue
’,
data() {
return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回!!!
},
})
你在前面看到,在new Vue()的时候,是可以给data直接赋值为一个对象的。这是怎么回事,为什么到了组件这里就不行了。
实际上,它首先需要创建一个组件构造器,然后注册组件。注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式。理解这点之后,再理解js的原型链:
var MyComponent = function() {}
MyComponent.prototype.data = {
a: 1,
b: 2,
}
// 上面是一个虚拟的组件构造器,真实的组件构造器方法很多
var componentA = new MyComponent()
var componentB = new MyComponent()
// 上面实例化出来两个组件实例,也就是通过调用,创建的两个实例
componentA.data.a === componentB.data.a // true
componentA.data.b = 5
componentB.data.b // 5
可以看到上面代码中最后三句,这就比较坑爹了,如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改。这怎么可以,两个实例应该有自己各自的域才对。所以,需要通过下面方法来进行处理:
var MyComponent = function() {
this.data = this.data()
}
MyComponent.prototype.data = function() {
return {
a: 1,
b: 2,
}
}
这样每一个实例的data属性都是独立的,不会相互影响了。所以,你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关.

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页