前端开发面试2021.5.21

作者: 土鳖班长大大 | 来源:发表于2021-05-22 01:34 被阅读0次

    第一题:vue和react的区别:

    1、vue中的数据由data属性在Vue对象中进行管理,react中的数据由state属性管理;2、vue通过slot插槽进行嵌套传递,react通过“props.children”的方式将标签内的部分传递给子组件。
    3.vue:Vue.js 把html,css,js组合到一起,用各自的处理方式,使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。


    第二个题目:v-if和v-for为什么避免一起用

    答:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中

    所以,不推荐v-if和v-for同时使用

    推荐方法:

    <li
    v-for="user in users"
    :key="user.id"
    >
    {{ user.name }}
    </li>
    </ul>
    

    放在外层元素上或者使用template标签进行包裹(template为html5的新标签,无特殊含义)

    <template v-for="Oitem in Object.keys(cItem)">
              <el-input 
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 8}"
                  :key="Oitem"
                  v-if="Oitem !== 'title'"
                  v-model="cItem[Oitem]">
               </el-input>
    </template>
    

    注意:key值在包裹的元素中

    当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

    <li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
    </li>
    

    上面的代码只传递了未完成的 todos。
    而如果你的目的是有条件地跳过循环的执行,那么就是用前两种方法。


    第三:vue中自己封装过组件大(自定义)不?

    答: 我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组件)、list(上拉加载更多功能组件))

    首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性低等问题。

    使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。但是我们一般用脚手架开发项目,每个 .vue单文件就是一个组件。在另一组件import 导入,并在components中注册,子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。
    ----------###---------####-----

    第四:http协议?

    答:HTTP工作原理
    HTTP工作步骤
    以下是 HTTP 请求/响应的步骤:

    客户端连接到Web服务器
    一个HTTP客户端,通常是浏览器,与Web服务器的HTTP端口(默认为80)建立一个TCP套接字连接。例如,http://www.baidu.com
    发送HTTP请求
    通过TCP套接字,客户端向Web服务器发送一个文本的请求报文,一个请求报文由请求行、请求头部、空行和请求数据4部分成。
    服务器接受请求并返回HTTP响应
    Web服务器解析请求,定位请求资源。服务器将资源复本写到TCP套接字,由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。
    释放连接TCP连接
    若connection 模式为close,则服务器主动关闭TCP连接,客户端被动关闭连接,释放TCP连接;若connection 模式为keepalive,则该连接会保持一段时间,在该时间内可以继续接收请求;
    客户端浏览器解析HTML内容
    客户端浏览器首先解析状态行,查看表明请求是否成功的状态代码。然后解析每一个响应头,响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML,根据HTML的语法对其进行格式化,并在浏览器窗口中显示。
    ##############----********###----

    第五:解决跨域的方法?

    答:##方法1.通过PHP设置响应头允许跨域(CORS方式)
    CORS(跨域资源共享,Cross-Origin Resource Sharing)定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应头即可
    header(“Access-Control-Allow-Origin:*”); // 允许任何来源
    header(“Access-Control-Allow-Origin:http://local.com”); //只允许来自域名http://local.com的请求

    方法2.使用php做代理去请求第三方api接口

    php是可以跨域的,我们利用ajax请求本域名中的php文件,php再去请求第三方接口文件,从而达到跨域目的。

    方法3:方法3.jsonp方法 只能get

    浏览器只对XHR(XMLHttpRequest)请求有同源请求限制,而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制,利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的,当向第三方站点请求时,我们可以将此请求放在<script>标签的src属性里这就如同我们请求一个普通的JS脚本
    JSONP实现跨域请求的原理简单的说;

    就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据。
    JSONP 由两部分组成:
    回调函数和数据。

    第六:vue项目中的性能优化:

    答:##一.源码优化

    1、代码模块化,咱们可以把很多常用的地方封装成单独的组件,在需要用到的地方引用,而不是写过多重复的代码,每一个组件都要明确含义,复用性越高越好,可配置型越强越好,包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

    2、for循环设置key值,在用v-for进行数据遍历渲染的时候,为每一项都设置唯一的key值,为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值去对比的时候,可以更快的定位到diff。

    3、Vue路由设置成懒加载,当首屏渲染的时候,能够加快渲染速度。

    4、更加理解Vue的生命周期,不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null。

    5、可以使用keep-alive,keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。

    二.打包优化:

    1、修改vue.config.js中的配置项,把productionSourceMap设置为false,不然最终打包过后会生成一些map文件,如果不关掉,生成环境是可以通过map去查看源码的,并且可以开启gzip压缩,使打包过后体积变小。

    2、使用cdn的方式外部加载一些资源,比如vue-router、axios等Vue的周边插件,在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。

    3、减少图片使用,因为对于网页来说,图片会占用很大一部分体积,所以,优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果,或者使用雪碧图来减少图片的体积。

    4、按需引入,咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分,无端增加项目体积。比如在使用element-ui库的时候,可以只引入需要用到的组件。


    第七:es6新特性?

    答:(1)变量声明:由var变为let和const;

    (2)模板字符串:使用反引号``;在模板字符串里面支持换行,并可以在里面使用${}来包裹一个变量或表达式;

    (3)解构:有数组解构和对象解构;可以快速获取数组和对象的值;
    1:var声明的变量是函数变量(全局变量和局部变量),会有变量提升的风险,可以先使用再声明,尽量少用。

    2:let声明的变量具有块级作用域的特性,即只能在声明的代码块中使用,只能先声明之后才能使用。

    3:const声明的变量是常量,常量的值不允许更改,如果常量是引用类型(对象或者数组),那么可以更改常量内部属性的值。

    4:解构就是分解数据结构,赋值就是为变量赋值;在ES6中允许从对象和数组以及任何可以遍历的数据类型进行解构赋值。

    5:箭头函数是将函数简化定义的一种方式,将箭头函数赋值给一个变量,变量名就是函数名称,通过调用变量名来调用函数。

    6:Set数据结构的声明方式分为两种:1、直接实例化一个空的Set()构造函数;2、在Set构造函数中传入一个数组。Set构造函数可以用来做数组去重等操作。

    7:Map数据结构的声明方式分为两种:1、直接实例化一个空的Map()构造函数;2、在Map构造函数中传入一个带有键值对的数组

    -----#########################

    今天晚上就更新到这里,狗命要紧

    相关文章

      网友评论

        本文标题:前端开发面试2021.5.21

        本文链接:https://www.haomeiwen.com/subject/cxnwjltx.html