前端试题(四)

1. vue过滤器使用场景

2. v-on绑定多个方法

<p v-on="{click:dbClick,mousemove:MouseClick}"></p>

一个事件绑定多个函数：

<p @click="one(),two()">点击</p>

3. 在菜单结构不确定时，前端如何动态渲染

树形结构：深度遍历、广度遍历（递归）

4. Vue-router的钩子函数

[Vue的钩子函数路由导航守卫、keep-alive、生命周期钩子

路由导航守卫

5. Vue-router的实现原理

更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式,Hash模式和History模式。

6. Vuex的实现原理

Vuex是一个专为Vue服务，用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层，规定所有的数据操作必须通过 action - mutation - state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰，同时可在调试模式下进行时光机般的倒退前进操作，查看数据改变过程，使code debug更加方便。
Vuex框架原理与源码分析

7. Vue-cli的自定义指令

像vue ui那样在终端用的指令？？还是vue的自定义指令

8. keep-alive的两个属性

在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。

1. 缓存路由组件：将所有路径匹配到的路由组件都缓存起来（某个组件切换后不进行销毁，而是保存之前的状态）

    <keep-alive>
        <router-view></router-view>
    </keep-alive>

缺点：所有的路由组件都被缓存了，严重浪费性能，而且也不符合需求

2. 缓存特定组件

在keep-alive上有两个属性，只有匹配的组件会被缓存。

• include 值为字符串或者正则表达式匹配的组件name会被缓存。
• exclude 值为字符串或正则表达式匹配的组件name不会被缓存。

3. 路由的meta属性
   除了方法二，我们还可以利用路由中的meta属性来控制

{
      path: '/',
      name: 'home',
      meta:{
        keepAlive:true
      },
      component: Home
    }

新的问题：组件被缓存，并没有被销毁，所以组件在切换的时候也就不会被重新创建，自然也就不会调用created等生命周期函数，所以此时要使用activated与deactivated来获取当前组件是否处于活动状态。

• 在home组件里面写入了activated与deactivated生命周期函数：

activated(){
    console.log("哎呀看见我了")
    console.log("----------activated--------")
  },
  deactivated(){
    console.log("讨厌！！你又走了")
    console.log("----------deactivated--------")
  }

9. keep-alive组件

10. Vue的核心

Vue核心思想

11. Vue的修饰符

1. 修饰符
2. 事件修饰符
3. 按键修饰符
4. 系统修饰符
   vue常用的修饰符

12. ES5、ES6的区别

所有es6的新特性都要答到
JavaScript、ES5和ES6的介绍和区别

13. 单页面应用的原理和优缺点

单页面应用指只有一个主页面的应用，浏览器一开始就要加载所有必须的html，js，ss，单页面的页面跳转仅刷新局部资源，多应用于pc端，
多页面就是指一个页面中有多个页面，页面跳转时是整页刷新
单页面优点：
1.用户体验好，快，内容改变不需要重新加载整个页面；
2.没有页面之间的切换，就不会出现“白屏现象”
单页面缺点：
1.首次加载耗时比较多；
2.不利于SEO
3.不可以用导航实现前进后退效果；
4.页面复杂度高

14. 浏览器兼容

15. 前端文件上传

百度的webuploader，基于jquery封装的

原生ajax上传/axios.post上传+进度条+后端接收文件

15.1 原生

掘金：前端本地文件（图片）操作与上传，并显示在页面中

底层实现还是基于input输入框，然后利用onchange事件，监听文件选择的事件，然后利用formData对象装载需要上传的文件，最后通过XMLHttpRequest来进行文件的网络异步传输。
inputDom.files[0]
var fd=new FormData()
fd.append('pic',pic)
xhr.upload.onprogress

1. lengthComputable
2. loaded
3. total

---

这里的处理，在于如何显示出来（读取文件）
let fileReader = new FileReader()
fileReader.onload
fileReader.readAsDataURL(this.files[0])赋值给img标签的src

15.1.1 在ipt的onchange事件里打印this对象，有files属性，是一个数组

15.1.2 打印files[0]

15.1.3 input dom对象的value值

<script type="text/javascript">
function upfile(){
    var pic=document.getElementsByTagName('input')[0].files[0];
    var fd=new FormData();
    var xhr=new XMLHttpRequest();
    xhr.open('post','01.php',true);
 
    xhr.onreadystatechange=function (){
        //readystate为4表示请求已完成并就绪
        if(this.readyState==4){
            document.getElementById('precent').innerHTML=this.responseText;
            //在进度条下方插入百分比
        }
    }
 
    xhr.upload.onprogress=function (ev){
        //如果ev.lengthComputable为true就可以开始计算上传进度
        //上传进度 = 100* ev.loaded/ev.total
        if(ev.lengthComputable){
            var precent=100 * e