vue面试题

# 1.vue 路由模式有哪些，有何区别？

hash模式和history模式

区别：

hash模式不需要服务器端支持，而history需要服务器端支持，如果后端不配合刷新页面会出现404错误
hash模式url发生变化页面不会重新加载,兼容性好,而history的话刷新页面会重新加载，兼容性不是很好，但是比较美观
hash模式的实现原理是通过window对象的onhashchange事件，通过url变化去匹配对应的组件或者页面;而history模式是通过historyapi监听浏览器的popstate事件，通过url变化去匹配对应的页面

# 2.vue2实现原理和 vue3的实现原理有何区别？

# vue2原理

通过object.prototype数据劫持getter和setter，当数据发生改变的时候执行一个回调去更新视图，但vue2也存在一定的问题新增属性和删除属性的时候界面不会自动更新，再一个用数组下标修改数据的时候界面不会自动更新，只能vue提供的一些方法去处理对象用$set,数组用slice和push等的方法

例如：

<script>
export default {
  data() {
    return {
      person: {
        name: '张三',
        age: 25
      },
      arr: ['语文', '数学', '英语']
    }
  },
  methods: {
    addSex() {
      this.person.sex = '男'
    },
    // 这时候我们点击添加的时候界面不会自动更新
    // 而是通过 this.$set(this.person,'sex','女') ｜｜ Vue.set(this.person,'sex','女')
    delName() {
      delete  this.person.name 
      // 我们删除属性的时候，界面也不会自动更新
      // 而是通过this.$delete(this.person,'name')
    },
    updateArr() {
      this.arr[0] = '地理'
      // 而是通过 this.$set(arr,0,'地理') ｜｜ this.arr.splice(0,1,'地理')
      
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# vue3原理

通过proxy代理，拦截对象中任意属性的变化，包括属性的读写、添加、删除。
然后通过Reflect反射，对被代理对象的属性进行操作。

new Proxy(data,{
    // 拦截读取属性
    get(target,prop) {
        return Reflect.get(target,prop)
    },
    // 拦截设置属性或者添加属性
    set(target,prop,value) {
        return Reflect.set(target,prop,value)
    },
    // 拦截删除属性
    deleteProperty(target,prop) {
        return Reflect.delete(target,prop)
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 区别

性能的提升，打包体积减小、渲染速度加快、内存减小
vue2模板中只能有一个根标签，vue3模板中可以有多个根标签
vue3新增了composition api，配置都在setup函数中，并且没有this
生命周期的不同，vue3没有beforCrete和created，并且beforeDestroy改名beforeUnmount，destroyed改名为unmounted，然后在setup函数中配置多了个on
组件的传值不同，vue3是从setup函数中接收两个参数，一个是组件外部传过来的参数，另一个是上下文对象

# 3.vue2中computed和watch的区别，分别应用什么场景？

# computed 计算属性

依赖缓存，当属性发生变化的时候它才会重新计算。有两种写法

一种是get和set

<script>
export default {
  computed: {
      name: {
        get() {
          return this.name
        },
        set(value) {
          this.name = value
        }
      }
  }
}

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

另一种是函数式的简写

<script>
export  default {
  computed: {
    fillName() {
      return this.name
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9

应用场景：

我们平时所用的前端分页
购物车的吧结算等等

# watch 监视属性

监视某一个属性的变化

一种是对象形式写法,里面写个方法,还可以配置immediate、deep等属性

<script>
export default {
  watch: {
    isFlag: {
      handle(newValue,oldValue) {
        
      },
      immediate: true, // 初始化的时候让handle调用一下
      deep: true // 能够监视多级结构中属性的变化
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

另一中是函数式的简写：

<script>
export default {
  watch: {
    isFlag(newValue,oldValue) {
      
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9

应用场景：

搜索数据、
封装charts组件的初始渲染

区别： computed不能用异步去维护数据而watch可以用异步去维护数据

# 4.请你说说什么是单页面应用和多页面应用，有何区别？

# 单页面

一个应用就是一个页面，一开始就要加载所必需的html、css、js，页面的跳转是通过路由机制实现内容的变化。优点：用户体验好，不需要重新加载整个页面，对服务器端压力小缺点：首次加载比较缓慢，不利于SEO优化

# 多页面

一个应用有多个页面组成，页面之间的跳转是一个页面跳转到另一个页面，需要重新加载整个页面，用户体验不好，但是有利于SEO优化

# 5.什么是路由导航守卫？

对路由进行权限控制

# 全局导航守卫

# 全局前置路由守卫 beforEach()

## 初始化的时候被调用，页面切换之前被调用，里面传个回调函数
router.beforEach((to,from,next) => {
    if(!localStorage.getItem('token')) {
        if(to.path !== '/login') {
            next('/login')
        } else {
            next()
        }
    } else {
        next()
    }
})

1
2
3
4
5
6
7
8
9
10
11
12

# 全局后置路由守卫

## 初始化的时候被调用，页面切换后调用，里面传个回调函数
router.beforEach((to,from) => {
    document.title = to.meta.titlt || '官网'
})

1
2
3
4

# 路由独享钩子函数

谁进入之前

beforEnter: (to,from,next) => {
    
}

1
2
3

# 组件内的路由守卫

<script>
export default {
  // 通过路由规则进入该组件时被调用
  beforRouteEnter(to,from,next) {
    
  },
  // 通过路由规则离开该组件时被调用
  beforRouteLeave(to,from,next) {

  }
}
</script>