vue笔试题

 1.src和href的区别 ?

        (1) href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
       (2)在请求 src 资源时会将其指向的资源下载并应用到文档中,常用的有script、img 、iframe;

        2、作用结果不同
        (1)href 用于在当前文档和引用资源之间确立联系;

        (2)src 用于替换当前内容;

             总结:  href 不是用来引用资源,而是为了建立联系,让当前标签能够链接到目标地址。

                             src就是把引用的资源放在文档里面

2.页面元素隐藏方式 和各自特点?

        display属性为none,效果:元素不显示,不占位

        第二种:设置css visibility属性为hidden,效果:元素不显示,但占位

                总结:

                         display:none;隐藏后就相当于空出了这个标签的位置,别的标签会过来占用这个位置

                        visibility:hidden;隐藏后依旧占着位置

3.用过哪些盒模型?

        标准盒模型(W3C盒子模型),设置的width或height是对 实际内容(content)的width或height进行设置,内容周围的border和padding另外设置,即盒子模型的width(height)=设置的content的宽高+padding+border+margin

        怪异盒模型(IE盒子模型),设置的width或height是对 实际内容(content)+内边距(padding)+边框(border)之和的width和height进行设置的,其盒模型的width(height)=设置的width(height)+外边距margin

        box-sizing: content-box 是W3C盒子模型

        box-sizing: border-box 是IE盒子模型

4.谈谈你的移动端适配方案有哪些?

        1)viewport(scale=1/dpr)
        2)rem
        3)flex
        4)vm/vh             

5.js基本数据类型是什么?它们之间的区别是什么

         Number(数值)、String(字符串)、 boolean(布尔)、 Underfind(未知)、Null(空)、Object(对象)

                区别

  •             基本类型在栈内存,引用类型在堆内存分配地址.
    •       不同的内存分配机制也带来了不同的访问机制
      • 深拷贝和浅拷贝的不同
      • 参数传递的不同

6.数据类型强制转化和隐式转化的分别怎么使用?

         隐式转换都是以强制转换为基础的。强制转换主要指使用一些特定函数,手动将各种类型的值,转换为其对应的类型

                使用:

                        强转换

                                通过String(),Number(),Boolean()函数强制转换

        


var str=123;
var str1='123';
console.log(typeof str);
console.log(typeof str1);
console.log(typeof String(str));
console.log(typeof Number(str1));

                        隐转换

                                可以用typeof方法打印来某个是属于哪个类型的不同类型的变量比较要先转类型,叫做类型转换,类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等


console.log(typeof '11')//输出string
console.log(typeog 11) //输出number
console.log('11' < 4 ) //输出false

7.let const 和 var 的区别 ?

        1.var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。

        2.let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。

        3.const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改

                总价:var在函数内部是局部在外部是全局

                            let是块级作用域

                            const是不可修改的量

8.箭头函数和普通函数的区别 ?

        箭头函数:不能当做构造函数 相当于匿名函数,不可以使用new命令,this永远指向上下文的this无法改变其指向

        普通函数:this指向调用它的那个对象

                总价:

                        箭头函数的

                        普通函数的this指向调用它的那个对象

                        

9.解释什么叫回调地狱 ,以及怎么解决回调地狱 ?

        就是函数作为参数层层嵌套    

        怎么解决:通过promise链式调用的方式

 unction buildCatList(list, returnVal) {

      return new Promise(function (resolve, reject) {

           setTimeout(function (name) {

                 var catList = list === '' ? name : list + ',' + name

                 resolve(catList)

            }, 200, returnVal)

      })

}

buildCatList('', 'Panther').then(function (res) {

       return buildCatList(res, 'Janguar')

 }).then(function (res) {

       return buildCatList(res, 'Lion')
}).then(function (res) {

       console.log(res)
})//本质上还是函数套函数

                 总结:

                               先设置第一个延时器,执行完调用回调函数,回调函数里再设置一个延时器,执行完调用回调函数的回调函数,回调函数的回调函数再设置定时器,执行完调用回调函数的回调函数的回调函数。。。

无限套娃。。。

setTimeout(function() {
	console.log('我是定时器一秒后调用的回调函数');
	setTimeout(function() {
		console.log("我是定时器两秒后调用的回调函数");
		setTimeout(function() {
				.....		
		}, 1000)
	}, 1000)
}, 1000);

10.说明原生ajax的实现步骤?

        1创建对象

        2设置请求方式和请求地址

        3发送请求

        4监听状态变化

        5返回数据

        例:

var xhr = new XMLHttpRequest()

    xhr.onreadystatechange = function(){

        if(xhr.readyState != 4)return;

           if(xhr.status == 200 && xhr.readyState == 4){

                  console.log(xhr.responseText)

           }else{

                  console.log("请求失败")

          }

    }

xhr.open("get","http://localhost:3030")

xhr.send()

11.什么情况下会导致跨域?怎么解决

        不同源策略时会导致跨域

        解决方法:

        正向代理和反向代理

        1)jsonp:原理就是利用了script标签src属性外联引入文件不受同源策略的限制,在页面中动态插入了script,script标签的src属性就是后端api接口的地址,并且以get的方式将前端回调处理函数名称告诉后端,后端在响应请求时会将回调返还,并且将数据以参数的形式传递回去;

        2)document.domin:两个域名必须属于同一基础域名,并且所有的协议端口完全一致,否则无法跨域;例:beijing.58.com
tianjing.58.com ;

        3)iframe、hash :父页面向子页面传输数据:将要传递的数据添加到子页面的url的hash值上,子页面通过location.hash
并添加定时器实时地动态父页面传来的数据;子页面向父页面传输数据:利用window.name的特性,及页面重新加载但当前页的name值不变,即使换了一个页面。需要三个页面配合使用。一个应用页面,一个数据页面,一个代理文件。代理文件一般是一个没有任何内容的html页面,需要和应用页面在同一域下。将数据页面的窗口换成代理页面,代理页面通过window.name获取数据页面留下的数据,应用页面再访问和它同源的代理页面获取数据,就完成了跨域;

        4)CORS(Cross-Origin-Resource-Sharing):在服务器端设置的,不需要客户端进行操作。Cors背后的思想是使用自定义的http头部让浏览器和服务器进行沟通,从而决定请求或响应是否应该成功,还是应该失败。浏览器向服务器发送请求,如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息(如果是公共资源,可以回发*);如果没有这个头部,或者有这个头部但信息源不匹配,浏览器就会驳回请求。正常情况下,浏览器会处理请求。(请求和响应都不包含cookie信息);

        5)服务器跨域,服务器中转代理:前端向本地服务器发送请求,本地服务器代替前端再向服务器接口发送请求进行服务器间通信,本地服务器是个中转站的角色,再将响应的数据返回给前端

12.vue 有几个生命周期 以及各个生命周期的调用时机 ?         

        有10个:

                beforeCreate创建前    created创建后   

                befoerMount 载入前   mounted载入后 

                beforeUpdate更新前   updated更新后      

                beforeDestroy销毁前  destroyed销毁后

                Activated     激活前      deactivated  激活后

13.使用vue中的v-for时,为什么要绑定 :key?  如果不绑定会有什么效果?            

               因为vue组件增加Key可以标识组件的唯一性,为了更好地区别各个组件 高效的更新虚拟的dome 

               会导致所有列表DOM重新渲染。化性能无法最大化,   

14.v-show 和 v-if 的作用和区别, v-bind 和v-model的作用和区别?

v-show和v-if 

         作用:都是条件渲染指令

         区别:

                   v-if:
                        初始渲染
                                 初始值为false时,不会渲染(所谓惰性),生命周期函数不会执行
                                 初始值为true时,组件开始渲染,依次执beforCreate,created,beforeMount,mounted等生命周期
                        切换时
                                 从false到true:依次执行beforeCreate,created,beforeMount,moynted
                                 从true到false:依次执行beforeDestroy,destroyed
                  v-show:
                        初始渲染
                                 无论初始状态为true还是false,组件都会渲染,依次执行     beforeCreate,created,beforeMount,mounted
                        切换
                                基于css进行切换,对生命周期函数无影响.

v-bind和v-mode

              作用: 数据绑定  

              区别:

                        v-bind:是单向绑定

                        v-model是双向绑定

15.vue 组件通信如何实现,至少列举3种方式并说明各自的局限性?

               父传子  props           

                        居限性:

                                传入的值想作为局部变量来使用,直接使用会 报错    

               子传父  $emit

                        居限性:

                                

                vuex

                        居限性:

                                刷新浏览器,vuex中的state会重新变为初始状态
                                解决方案-插件vuex-persistedstate

16.组件中 data computed 和 watch的区别?

                data:Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter,从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)

                Computed:是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算   

                        computed默认只有getter方法

                                2.计算属性最大的优点:产生缓存 如果数据没有发生变化 直接从缓存中取

                                      提升了代码运行效率

                  Watch: 是调用一次执行一次 如果监听数据变化都会执行回调

17.keep-alive的是什么? 使用它的目的是什么?

        是一个内置组件

        可以使被包含的组件保留状态  避免重新渲染

18.vue-router的作用是什么?为什么不使用a标签?

        vue-router路由,实现页面的跳转,通过设置不同的path,向服务器发送的不同的请求,获取不同的资源。

        至于我们为啥不能用a标签,这是因为用Vue做的都是单页应用,就相当于只有一个主的index.html页面,所以你写的标签是不起作用的,你必须使用vue-router来进行管理。

19.vuex 是什么? 怎么使用?为什么用使用它?

               vuex是vue框架中状态管理,

               在main,Js引入store,注入。只用来读取的状态集中放在store中;改变状态的方式是提交mutatios,这是个同步的事物;异步逻辑应该封装在action中。

              所以组件和数据之间的对应关系,随着项目的复杂,变得混乱。所以需要统一管理数据,把数据的存取集中到一个地方,所有的组件都从这个地方取数据,更新数据也集中到同一个地方。

20.请谈一下你对使用原生js开发和使用vue开发的看法。(至少20字以上)

        原生js:

               使用原生js可以根据自己的能力写自己的代码,更有针对性,没有多余的代码;缺点是如果经验不足的话代码的兼容性和扩展能力较差,代码抽象的层次较低,要想做好的话需要经验和大量的时间和精力,最后也许会形成自己的框架。

使用框架的优势是代码兼容性较好,扩展能力好,抽象层次高,开发效率高,不需要太多经验也可以上手;缺点是业务简单时框架里的大部分代码是无用的,框架掩盖了一些问题的本质,对新手积累经验无益。

还有一点要说的是框架的执行效率并不低,效率低是因为没有用正确的方法使用框架。

        vue:

                DOM操作频繁,或涉及多页面切换的需求,采用vue开发,现有功能(如信用分)暂时保持不变。

                

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值