遇到的问题及简答(欢迎交流)

最新推荐文章于 2024-04-20 17:35:10 发布

抹茶爬虫

最新推荐文章于 2024-04-20 17:35:10 发布

阅读量245

点赞数

分类专栏：面试题文章标签： web

本文链接：https://blog.csdn.net/DcynotFound/article/details/89387843

版权

面试题专栏收录该内容

0 篇文章 0 订阅

订阅专栏

react中的虚拟DOM运行机制

虚拟DOM的设计思想：

（1）提供一种方便的工具，使开发效率得到保证；

（2）保证最小化的DOM操作，使得执行效率得到保证。

同样的vue中也是虚拟DOM实现不直接对DOM进行操作利用diff算法实现页面驱动视图更新

React中的props和state的区别

props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。
state代表的是一个组件内部自身的状态（可以是父组件、子孙组件）。
改变一个组件自身状态，从语义上来说，就是这个组件内部已经发生变化，有可能需要对此组件以及组件所包含的子孙组件进行重渲染。
而props是父组件传递的参数，可以被用于显示内容，或者用于此组件自身状态的设置（部分props可以用来设置组件的state），不仅仅是组件内部state改变才会导致重渲染，父组件传递的props发生变化，也会执行。
既然两者的变化都有可能导致组件重渲染，所以只有理解pros与state的意义，才能很好地决定到底什么时候用props或state。
props放初始化数据（只读属性），一直不变的，state就是放要变的。
State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据,因为组件本身不能修改自己的 prop

怎么定义vue-router的动态路由，怎么获取路由中的参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1. 安装 vue-router 路由模块 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
  <style>
    .router-link-active,
    .myactive {
      color: red;
      font-weight: 800;
      font-style: italic;
      font-size: 80px;
      text-decoration: underline;
      background-color: green;
    }

    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(140px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- <a href="#/login">登录</a> -->
    <!-- <a href="#/register">注册</a> -->

    <!-- router-link 默认渲染为一个a 标签 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>


    <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->
    <!-- 所以： 我们可以把 router-view 认为是一个占位符 -->
    <transition mode="out-in">
      <router-view></router-view>
    </transition>

  </div>

  <script>
    // 组件的模板对象
    var login = {
      template: '<h1>登录组件</h1>'
    }

    var register = {
      template: '<h1>注册组件</h1>'
    }


    /*  Vue.component('login', {
       template: '<h1>登录组件</h1>'
     }) */

    // 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
    // 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
    var routerObj = new VueRouter({
      // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
      routes: [ // 路由匹配规则 
        // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
        //  属性1 是 path， 表示监听 哪个路由链接地址；
        //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
        // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
        // { path: '/', component: login },
        { path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: routerObj // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
    });
  </script>
</body>

</html>

获取路由中参数的方式：
this.$route.query和this.$route.params根据传递参数的方式选择对应的方法
?name=zs&age=18和/:name/:age(上下对应)

vue中生命周期的理解

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期 8个周期如下
beforeCreate()
created(在这里发送ajax,最早创建this)
beforeMount()
Mounted(编译好了模板，并挂载到了指定的容器中)
beforeUpdate()
Updated()
beforeDestory()
Destoryed()

精灵图/sprite图的优缺点

优点：减少http请求，有利于提高浏览器加载速度
缺点：背景图片很少的情况，没有必要使用精灵技术，维护成本太高

跨域怎么解决

1.cors最常用
2.jsonp
3.iframe

适应不同分辨率的实现方案

响应式布局（原理：媒体查询）
栅栏式布局
流式布局（宽度百分比）

移动端touch事件判断滑屏手势的方向

1.当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY
2.当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向

计时器运行原理，为什么可以触发计时效果，是多线程的吗

1.var id=setTimeout(fn,delay); 初始化一个定时器，它将在delay延迟后触发fn函数。setTimeout方法返回一个用来标示定时器的唯一id，生成唯一id之后可以用这个id来取消所标示的定时器；
2.ar id=setInterval(fn,delay);和setTimeout类似，不过setInterval会持续的每隔delay延迟后调用fn方法，直到它被取消；
3.clearInterval(id);clearTimeout(id);这两个方法都接收一个定时器id（前面两个函数的返回值）作为参数，用来取消相应的定时器。
计时效果是利用了计时器的delay及延迟时间来触发的
单线程的

对async、await的理解

async是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await只能在async函数中使用
async在ajax中可以控制是否发送异步请求默认情况下（async:true）改为false时ajax就会变为同步请求
通常async、await都是跟随Promise一起使用的。因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么就是什么)；
Promise函数的then表示成功的回调函数catch表示失败的回调函数，也可以在ajax后面直接.then() .catch() （详情见Promise的用法）
await得到Promise对象之后就等待Promise接下来的resolve或者reject。

cookie和session的区别

cookie存储在本地大小在4kb左右
seesion存储在服务器
cookie可以被伪造不安全考虑到安全应当使用session
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用cookie

webpack中常用的plugin和loader

html-webpack-plugin（内存中生成index.html需要)
style-loader(css使用时需要)
css-loader(css使用时需要)
sass-loader（sass使用时需要）
less-loader（less使用时需要）
url-loader（背景图片引入时需要）
babel-loader(ES6新语法使用时需要)

MVVM模式的理解

MVVM是前端视图层的分层开发思想，分成了M(Model) V(View) VM(View Model)
VM是MVVM思想的核心，它是View和Model之间的调度者
MVVM的思想主要是为了让我们开发更加方便因为它提供了双向数据绑定（VM提供）
这里简单的说一下双向数据绑定：双向数据绑定的核心是：发布者订阅者模式+数据劫持
这样就能实现数据驱动页面更新

前端的缓存方式及他们的优劣势

协商缓存和强缓存

协商缓存在加载资源时，浏览器先判断缓存是否命中。如果命中，浏览器会发送一次 http 请求向服务器询问当前的缓存是否是有效的；如果有效，则可以直接从缓存中加载静态资源

强缓存在加载资源时，浏览器先判断缓存是否命中，如果命中，直接从缓存中读取静态资源，不会向浏览器确认缓存是否有效。这种方式的好处是可以减少一次 http 请求

Vue.js和LayUI的区别

首先vue是一个前端框架和react 以及angular组成三大主流框架\

vue最火 react最流行 angular出自chrome

LayUI是一个UI框架

框架和库的区别
框架是一套完整的的解决方案对项目的侵入性很大，如果项目要换框架就需要重构整个项目
库：提供某一些功能，对项目的侵入性小（jquery）

layUI只是一个前端的UI优化的插件可以轻易被取代MUI ElementUI bootstrap等UI框架（它只是一个UI框架），他们都属于第三方的库，可以被vue.js应用

为什么我们要使用Vue？

Vue.js是一套构建用户界面的框架，只关注于视图层（页面），易上手还便于与第三方库或既有项目整合（layui属于第三方库）

Vue.js的核心概念就是让我们程序员不需要再操作DOM元素，让我们可以有更多的时间关注业务逻辑
也就是我之前提到的数据驱动视图更新

抹茶爬虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
遇到的问题及简答(欢迎交流)

vue中的虚拟DOM运行机制React中的props和state的区别props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。state代表的是一个组件内部自身的状态（可以是父组件、子孙组件）。改变一个组件自身状态，从语义上来说，就是这个组件内部已经发生变化，有可能需要对此组件以及组件所包含的子孙组件进行重渲染。而props是父组件传递的参数，可以被用于显示内容，或...
复制链接

扫一扫

专栏目录