vue面试题

1. 计算属性和 watch 的区别？computed 是一个对象时，它有哪些选项？computed 和 methods 有什么区别？computed 是否能依赖其它组件的数据？watch 是一个对象时，它有哪些选项？

答：

1. 计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。
   所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。
2. 有get和set两个选项
3. methods是一个方法，它可以接受参数，而computed不能，computed是可以缓存的，methods不会。
4. computed可以依赖其他computed，甚至是其他组件的data
5. watch 配置
   handler
   deep 是否深度
   immeditate 是否立即执行

当有一些数据需要随着另外一些数据变化时，建议使用computed。
当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watcher

2.为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？

答：因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

3. 怎样理解单向数据流? 组件间的通信?

1. 这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：
在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能, 如果是对 prop 值的转换，可以使用计算属性computed

2. 组件间的通信：

1. 父子 props/event $parent/$children ref provide/inject
2. 兄弟 bus vuex
3. 跨级 bus vuex provide.inject

4. 路由的跳转方式

1. 声明式（标签跳转）<router-link to='home'> router-link标签会渲染为<a>标签，咋填template中的跳转都是这种；

2.另一种是编程式(js跳转)导航 也就是通过js跳转 比如 router.push('/home') 

5. Vue.js 2.x 双向绑定原理

这个问题几乎是面试必问的，回答也是有深有浅。基本上要知道核心的 API 是通过 Object.defineProperty() 来劫持各个属性的 setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）。

6. active-class是哪个组件的属性？嵌套路由怎么定义？怎么定义vue-router的动态路由？怎么获取传过来的动态参数？vue-router有哪几种导航钩子？

1.  vue-router模块的router-link组件。

2.  在 VueRouter 的参数中使用 children 配置

3. 在router目录下的index.js文件中，对path属性加上/:id。
4. 使用router对象的params.id。

5．有三种：

第一种全局导航钩子router.beforeEach(to,from,next)作用跳转前进行判断拦截。
第二种：组件内的钩子
第三种：单独路由独享组件

7.vuex是什么？怎么使用？那种场景使用？Vuex的属性？vuex的vuex的Mutation特性？

1.  vue框架中状态管理。

2. 在main.js引入store，注入。新建了一个目录store，….. export 。

3. 场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

4. 有五种，分别是 State、 Getter、Mutation 、Action、 Module

5. Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

8. 自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

1. 全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
2. 钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
3. 钩子函数参数：el、binding

9． vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default {}
第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’
第三步：注入到vue的子组件的components属性上面,components:{indexPage}
第四步：在template视图view中使用，
问题：例如有indexPage命名，使用的时候则index-page0

10.vue公司双向数据绑定原理

vue.js是采用数据劫持结合发布者 - 订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。