vue —— 新增面试题（项目使用）

1.使用vue时，想要页面第一次渲染就调用watch

immediate
发现watch的一个特点是最初绑定的时候不执行改变即第一次直接赋值不会监听到，这里需要用到immediate属性，默认值为false,我们需要这样写immediate：true,即立刻执行。deep
watch的另一个属性是deep,默认值为false,代表是否深度监听，设置deep:true,意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样开销性能就会非常大了，任何修改对象里面的一个属性都会触发这个监听器里的handler

watch: {
    dateList: {
      handler(val) {},
      immediate: true,
    },
  },

2.vue内置组件 keep-alive

组件缓存，组件实例能够在第一次被创建时缓存
在函数组件中不能正常工作，因为函数组件没有缓存实例

新增
include：需要缓存的组件；
exclude：除了某些组件外都要缓存；
max：数字，最多可以缓存多少组件实例，数字达到后，缓存组件中最久没有被访问的实例会被销毁；

<keep-alive :include=“a, b">
    <component :is=“view></component>
</keep-alive>

<keep-alive :include=“/a|b/">
    <component :is=“view></component>
</keep-alive>

<keep-alive :include=“[‘a’, ‘b']">
    <component :is=“view></component>
</keep-alive>

具体使用

详见博客主页vue内置组件keep-alive具体使用方法

3.vue的路由缓存

• 缓存全部路由

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

• 缓存指定路由

<keep-alive :include=“name">
    <router-view></router-view>
</keep-alive>

• 动态缓存指定路由
  路由meta属性中添加keepAlive: true/false

{
    path: '/home',
    component: () => import('../home.vue'),
    meta: {
        title: ',
        keepAlive: true
    }
}

<keep-alive>
    <router-view v-if=“$route.meta.keepAlive"></router-view>
</keep-alive>

4.虚拟DOM优缺点

优点：
1.无需手动操作DOM，可以通过框架的双向数据绑定更新视图；
2.跨平台，DOM是js对象，可以更方便的跨平台操作，例如服务器渲染；
3.可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能
缺点：
是在一些性能要求极高的应用中虚拟DOM无法进行针对性的优化，且首次渲染大量DOM时插入innerHTML过慢

5.DOM事件流

包含3个阶段
事件捕获阶段、目标阶段、事件冒泡阶段
首先发生的事件捕获为截获事件提供机会，然后是实际的目标接收事件，最后一个阶段是事件冒泡阶段，可以在这个阶段对事件做出响应。

6.js面试题 —— ajax同步和异步的区别

同步：当js代码加载到ajax时会把页面所有代码停止加载，页面处于假死状态，这个ajax执行完之后才继续运行其他代码；
异步：ajax运行时其他代码一样可以运行，

jquery的async：false
默认：true：同步， false：异步

$.ajax({
       type: "post",
       url: "path",
       cache:false,
       async:false,
       dataType: ($.browser.msie) ? "text" : "xml",
        success: function(xmlobj){
       }
});

7.setIntervel的返回值

setInterval 返回值是数字id，从1开始，

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
比如说clearInterval(attime) ;这样就可以停止调用函数，

事实上，如果你只用了一次setInterval ，返回的值就是1，
然后clearInterval(1);也是可以停止调用函数的；

8.浅记vue生命周期

created： 没有$el，没有DOM；
beforeMount: 出现虚拟DOM；
mounted：页面渲染完成，真实DOM出现，可以操作DOM，发送http请求；

9.单页面优缺点

优点：
1.没有页面之间的切换，就不会出现白屏现象，也不会出现假死并有闪烁现象，页面显示流畅，web更具有响应性
2.良好的前后端分离工作模式
3.减轻服务器压力
缺点：
1.首屏加载慢，可以使用路由懒加载
2.不利于SEO，可以使用history模式、页面预渲染

10.vue路由模式（默认hash）

• Hash
  当URL改变的时候,页面不会重新加载,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作
• History
  会将URL修改成正常请求后端的URL一样,如后端没有配置对应**/user/id**的路由处理，则会返回404错误，需要后端在服务端设置，如果 URL 匹配不到任何静态资源，则返回同一个index.html页面，这个页面就是你 app 依赖的页面

11.显示转换，隐式转换

• 显式转换:
  toString、toNumber、toBoolean、Number、parseInt、parseFloat
  toBoolean有七个值会转为false，其他都是true：

0、false、NAN、Null、Undefined、空字符串‘’

• 隐式转换:
  1. 字符串和数字相加是字符串拼接，数字会转为字符串
  2. true转为1，false转为0
  3. 数字加date对象，转成字符串类型
  4. 判断转成boolean类型（if、for循环中的判断、while、do while、三目运算、逻辑运算等）
  5. 取反！

12.this

普通函数中下this指的是window，严格模式下this指的是undefined；
箭头函数下this是上下文环境；
对象方法中指的是调用的对象；
call,apply,bind改变this指向；
事件绑定中this指的是触发事件的元素本身。

13.vue多层组件传值(provide, inject)

在父组件中通过provide提供变量，在子组件中inject注入变量，不管多少层组件，在父组件有效生命周期中该变量一直生效，但是父组件值改变，子组件中注入的不会改变
父组件：

export default {
      provide: {
        name: ‘hh’
    }    
}

子组件：

export default {
    inject: [‘name’],
    mounted () {
         console.log(this.name)
    }
}

14.css3 新增属性

• 边框颜色border-color、边框背景图border-image
• 圆角边框border-radius
• 阴影box-shadow、文字阴影text-shadow
• 背景图片:background-clip（指定背景图片从什么位置开始裁剪）、background-size、background-origin(指定背景图片从什么位置开始显示)
• 自动换行word-wrap
• 动画animation、过渡transition、变换transform

15.常用的项目优化

1.减少http请求
2.路由、图片懒加载
3.非核心代码异步加载，async…await
4.利用浏览器缓存：

• 强缓存：不使用服务器请求，直接使用本地缓存，利用http响应请求头实现的；
  – Expires：服务器返回的绝对时间；
  – Cache-control：服务器返回的相对时间；
• 协商缓存：浏览器发现本地有资源的副本，问一下服务器要不要使用，如果某个资源 请求超时了，就会向服务器发送一个请求，验证协商缓存是否命中，利用两个header

5.尽量少操作DOM，少使用循环和条件查询