Vuex相关

你知道路由钩子吗？
路由钩子分为全局钩子、路由独享钩子、组件内钩子，全局钩子用来拦截所有的路由的，进行处理，路由独享钩子，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。组件内钩子，是将钩子函数定义在组件内部了

项目中如果涉及多个组件数据共享你如何解决？
可以启用vuex

vuex中的五个属性都是什么? 有什么作用？
State 存储数据
Getter 可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
Action 包含任意异步操作，通过提交 mutation 间接更变状态
Module 将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块

Vue 实现数据双向绑定的原理：Object.defineProperty()

vue实现数据双向绑定主要是：采用 数据劫持结合发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回掉。当把一个普通 JavaScript 对象传给Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用Object.defineProperty 将他们转为 getter/setter。用户看不到getter / setter ，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Complie 和 Watcher三者，通过Observer来监听自己的model的数据变化，通过Complie来解析编译模板指令(vue中是用来解析 {{ }} ），最终利用watcher搭起observer和complie之间的通信桥梁，达到数据变化 ==》视图更新，视图交互变化（input）==》数据model变更双向绑定效果。
js实现简单的双向绑定

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
</body>
<script type="text/javascript">
    var obj = {};
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue;
            document.getElementById('show').innerHTML = newValue;
        }
    })
    document.addEventListener('keyup', function (ev) {
        obj.txt = ev.target.value;
    })
</script>

四、Vue 组件间的参数传递

1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据；
子组件传给父组件：$emit方法传递参数;
2.非父子组件间的数据传递，兄弟组件传值
EventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时，用这个比较合适；
VueX，创建一个数据仓库，整个项目全局都可以往这个仓库存放数据和读取数据

五、Vue的路由实现：hash模式和 history模式
hash模式：在浏览器中符号 “#” 以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用，hash不会重新加载页面。

history模式：history 采用HTML5的新特性；且提供了两个新方法：pushState（）、replaceState（）可以对浏览器历史纪录栈进行修改，以及popState事件监听到状态变更。

六、 Vue与Angular以及React的区别？
（版本不断更新，以下区别有可能不是很正确，我的工作中只用到vue，对angular和react不怎么熟）
1.与AngularJs的区别
相同点：都支持指令，内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定，都不支持低端浏览器；

不同点：AngularJs的学习成本高，比如Dependency、Injecttion特性，而vue.js本身提供的API都比较简单、直观；在性能上，AngularJs依赖对数据做脏检查，所以watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所以的数据都是独立触发的。

2. 与React的区别
相同点：
React采用独特的JSX语法，Vue.js 在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用;中心实现相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化底去处理需求，都不内置列数Ajax，Route等功能到核心包，而是以插件的方式加载;在组件开发中都支持mixins的特性了；

不同点：
React采用Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷的操作Virtual DOM。

七、Vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等。一般用于页面title的修改，一些需要登录才能调整页面重定向功能。
beforeEach 主要的3个参数to，from，next；
to : route即将进入的目标路由对象、
from： route当前导航正要离开的路由、
next： function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

八、Vuex是什么？怎么使用？那种功能场景使用它？

只要来读取的状态集中放在store中；改变状态的方式就是提交mutations。这是个同步的实物；异步逻辑应该封装中action中。
在main.js引入store，注入。新建一个目录store，...export。
场景有：单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车

vuex.jpg

state
Vuex 使用单一状态树，既每个应用将仅仅包含一个store实例，单单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex的store中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
action可以理解为通过mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view层通过store.dispath来分配action。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})

modeules
项目特别复杂的时候，可以让每一个模块拥有自己的state，mutation，action，getters，使得结构非常清晰，方便管理

  const modulesA = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
    }
  }

  const modulesB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
    }
  }

const store = new Vuex.store({
  modules: {
    a: modulesA,
    b: modulesB
  }
})