vue基本面试题总结

原文地址：vue基本面试题

1、vue双向数据绑定？

vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者 模式的方式来实现的。

利用数据监听器 Observer 其实也就是 Object.defineProperty() 并通过该方法 劫持各个属性的setter，getter，在数据变动时发布消息给订阅者watcher来触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

引用了：https://www.cnblogs.com/sichaoyun/p/8406194.html

2、解释一下vuex？

vuex是用来做状态管理的，具有五个常用属性state, getter, actions, mutations, modules。state是数据源，类似vue中的data，我们可以通过两种方式来获取它，mapStates, mapGerters。并且获取state必须放到computed中这样能保证state发生改变的时候该组件中用到state的地方都发生变化。

3、使用vue遇到的问题？

1、通过js修改data中的对象数据页面并没有重新渲染，因为vue并没有对object类型对象进行深层监听，所以使用this.$set()方法来修改object类型的对象。

2、打包发布路径问题：打包的基础路径设置一定要和服务器上的相同，否则打包好后放服务器会访问不到资源。是在config/index.js中设置build对象里设置assetsPublicPath：'/路径/'。

3、发版缓存问题，由于发版是全量发版，所以如果用户浏览器有缓存的话，就会访问不到旧资源，导致无法正常查看，那么可以设置不允许index.html缓存，这样就能保证每次用户访问的都是正确的。做法是在vue发布项目根目录建立manifest文件夹里面建一个cache.manifest文件， 里面内容如下

CACHE MANIFEST

#version 1.0

#直接缓存的文件

CACHE:

#需要实时在线的文件

NETWORK:

../index.html

#替代方案

HTML页面中设置meta熟悉

4、路由跳转回退，滚动到浏览器上次访问位址。

使用vue2 中的keep-alive缓存组件 在app.vue中如下写法：

 

router/index文件下

{

  path: '/user',

  name: 'User',

  component: userComp,

  meta: {

    isUseCache: false,// 结合下面activated钩子函数中的判断来确定是否去刷新数据

    keepAlive: true

  }

}

设置了keepAlive缓存的组件的钩子函数：

第一次进入： beforeRouterEnter -> created -> activated -> ... -> deactivated

第二次进入： beforeRouterEnter -> activated -> ... -> deactivated

只有第一次进入的时候，有created钩子，那么所有的判断可以在activated中写，

这里判断是否需要重新获取数据，isUseCache默认是false，第一次进入的时候加载数据，然后在离开这个页面的时候，设置为true再次进入这个页面就可以使用缓存。

userlist页面这么写

activated() { 

  if(!this.$route.meta.isUseCache) {

    this.list = []

    this.loadData()

  }

}

userDetail页面这样写

beforeRouteLeave(to, from, next) {

  if(to.name == 'User') {

    to.meta.isUseCache = true

  }

  next()

5、vue父子组件之间传值?

父组件向子组件传值可以通过props来实现:

父组件在引用子组件的时候，可以添加自定义属性如：

子组件接收：

props: ['cName', 'cSex']

或者用：

this.$attrs('data-name'), this.$attrs('data-sex')

子组件向父组件传值可以通过emit来实现:

子组件中使用：

this.$emit('changeName', params)

父组件接收：

methods: {

  change(params) {

    this.name = params.name

  }

}

或者

mounted() {

  this.$on('changeName', function(params) {

    this.name = params.name

  })

}

6、vue-router传参和接收参数？

vue-router 传参方式有两种

首先在路由里面配置路由

{

  path: '/user',

  name: 'user',

  component: User

}

跳转的时候可以这样：

this.$router.push({

  path: '/user',

  query: {

    id: '001',

    name: 'lsj'

  }

})

接收参数：this.$route.query.id，this.$route.query.name

this.$router.push({

  name: 'user',

  params: {

    id: '001',

    name: 'lsj'

  }

})

接收参数：this.$route.params.id, this.$route.params.name

上面的传参形式也可以直接使用

7、vue-router的嵌套路由是怎么实现的？

答：是通过children实现的方式如下：

{

  path: '/home',

  name: 'home',

  component: HomePage,

  children: [

    { path: '/home/login', name: 'login', component: Login},

    { path: '/home/reg', name: 'reg', component: Reg}

  ]

}

8、导航钩子有哪些？

beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数： to, from, next

to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

9、请详细说下你对vue生命周期的理解？

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然

10、vue事件绑定的几种情况

可以看vue官网关于修饰符的介绍

https://cn.vuejs.org/v2/guide/events.html?#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

11、vue 获取dom元素，获取当前点击元素的父元素

可以通过 this.$refs 来直接获取需要获取的元素，效果类似于dom结构上的id

下面是具体使用方法：

    {{item.listTitle}}

setPageMenu(index) {

//这个是获取当前menuItem值，用index来区分当前元素是v-for 产生的数组中的第几个数

    let getMenuText = this.$refs.menuItem[index].innerText;

}

methods: {

  doSomething(event) {

    const ClictEl = event.target // 是你当前点击的元素

    const El = event.currentTarget // 是你绑定事件的元素

    const ParentEl = event.currentTarget.parentNode // 当前元素的父元素

    const pName = ParentEl.getAttribute('pName')

  }

}