Vue面试篇

1、vue的双向绑定原理是什么？关键点在哪里？

双向绑定原理

双向绑定原理脑图.png

2、Vue中为什么data必须是一个函数，而New Vue实例中，data可以直接是一个对象

data是函数以及实例中data是对象的原因

data.png

3、vue的两大核心

两个核心

两个核心.png

4、Vue中v-for为什么要加一个key

加key的原因

image.png

5、Vuex有几个属性及作用

5大属性及其作用

image.png

6、Vue的监听属性和计算属性有什么区别

区别

image.png

7、Vue的导航守卫有哪些

导航守卫

image.png

8、Vue登陆拦截如何实现

Vue登陆拦截如何实现

image.png

9、Vue组件通信的方式有哪些

Vue组件通信的方式

image.png

10、keep-alive是什么 有几个周期？如何避免被其缓存？

是什么及其周期

image.png
如何避免被keep-alive缓存
image.png

11、vuex刷新页面后数据丢失，如何保存数据

保存方法

image.png

12、vue是如何依赖收集的

收集机制

image.png

13、vue $nextTick及其作用

vue $nextTick及其作用

image.png

14、vue两种路由模式的区别

vue两种路由模式的区别

image.png

15、vue的优缺点

优缺点

image.png

16、请简述vue数据传递过程

1、通过new Vuex.Store()创建一个仓库 state是公共的状态，state--->components渲染页面；
2、在组件内部通过 this.$store.satate.属性 来调用公共状态中的state，进行页面的渲染;

3、当组件需要修改数据的时候，必须遵循单向数据流。通this.$store.dispatch来触发actions中的方法
4、actions中的每个方法都会接受一个对象 这个对象里面有一个commit方法，用来触发mutations里面的方法
5、mutations里面的方法用来修改state中的数据 mutations里面的方法都会接收到2个参数 一个是store中的state另外一个是需要传递到参数
6、当mutations中的方法执行完毕后state会发生改变，因为vuex的数据是响应式的 所以组件的状态也会发生改变

17、vue中mixin和mixins的区别

区别

image.png

18、watch与 watchEffect

简介与区别

image.png

setup(props) {
      const { reactive,toRefs,watch,watchEffect } = Vue;
      const nameObj = reactive({ name:'yh' ,EnglishName:'ji'})
    // watch 是有一定的惰性 lazy 加上 immediate:true  可以改变惰性 立即执行
      // 当 监听是基础数据是 可以使用 watch('name',() =>{})
      // 当 监听数据 是单个数据对象时
      // watch(()=>nameObj.name,(curName,prevName)=>{
      //   console.log(curName,prevName)
      // })
      // 当 监听数据是多个数据对象时
      watch([()=>nameObj.name,()=>nameObj.EnglishName],([curName,curEng],[prevName,prevEng])=>{
        console.log('watch',curName,curEng ,'---',prevName,prevEng)
      })

      // watchEffect 是立即执行 不需要传递侦听内容 会自动感知 不需要很多参数 只需要一个回调函数
      // 不能获取之前数据的值
      watchEffect(() =>{
        console.log('abc')
      })
      const { name,EnglishName } = toRefs(nameObj)
      return { name,EnglishName }
    }