Vue面试遇到的题目

**************************************************************************************

1 .路由两种模式的区别 哈希路由和history

**************************************************************************************

参考：https://www.cnblogs.com/ceceliahappycoding/p/10552620.html

https://www.jianshu.com/p/9449d7605279

自己总结：

构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。

前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。（指的是实实在在的F5页面我理解的）

前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，加载不同的组件，然后动态的渲染出区域 html 内容。

1.hash(默认) —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abcdef.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL >中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持

 

当然啦，history 也不是样样都好。SPA 虽然在浏览器里游刃有余，但真要通过 URL 向后端发起 HTTP 请求时，两者的差异就来了。尤其在用户手动输入 URL 后回车，或者刷新（重启）浏览器的时候。

你后端要配置对应的请求路径的页面不然分分钟刷出404页面，（因为你后端对应的路径下没有此页面啊）;因为刷新是实实在在地去请求服务器的,不玩虚的。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abcdef.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

 

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abcdef.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

 

 

**************************************************************************************

2.vue中data中声明的数组，有些时候修改数组它不会实时响应，有时候又会，怎么处理？怎么界定数组的哪些方法可以实时更新哪些不能实时更新？

**************************************************************************************

（变异方法）修改原数组的可以实时更新，（非变异的如filter(),slice()等返回一个新数组，你页面上渲染的是原始数组当然不会实时更新啦）

<p v-for="(item) in arrlist1" :key="item">{{item}}</p>

arrlist1:[2,4,5,6],

 

import Vue from 'vue'

 

   change(){
      console.log('change');
      //this.arrlist1[0]=9  不行    
      Vue.set(this.arrlist1,0, 9)
    },

　

总结：基础数据不行，引用数据可以，原理就是obj.defineproterty,数组中的对象声明了所以劫持这个数组的中的对象的seter/getter，这样就可以直接改值了；数组push生效时应为重新了push方法

<p v-for="(item,index) in arrlist" :key="index">{{item.name}}</p>

 

arrlist:[
        {
          name:'大哥'
        },
         {
          name:'小弟'
        }
      ],

change(){

console.log('change');

this.arrlist[0].name=9

},

这样就可以我擦

　　

 ******************************************************************************************************************

 https://www.cnblogs.com/penghuwan/p/7194133.html  computed watch methods

 ******************************************************************************************************************

 ******************************************************************************************************************

 ******************************************************************************************************************

 ******************************************************************************************************************

 ******************************************************************************************************************