1.对于MVVM的理解?

MVVM 是Model - View - ViewModel 的缩写
Model 代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI组件,它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制试图行为、处理用户交互、简单理解就是一个同步View和Model的对象,连接Model和View。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,model 和 ViewModel 之间的交互是双向的,因此View 数据的变化会同步到Model 中,而Model数据的变化也会立即反应到View上。
** ViewModel** 通过双向数据绑定把View 层和model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM 来统一管理。


    2.Vue 实现数据双向绑定的原理:

    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>


      3.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。


        4.Vue路由的钩子函数

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


          5.对Keep-Alive的了解?

          keep-alive 是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
          在vue 2.1.0的版本之后,keep-alive新加入了两个属性: include( 包含的组件缓存)与exclude(排除的组件不缓存,优先级大于include)
          使用方法
           <keep-alive include="inclde_components" exclude="exclude_components">
                <component>
                  <!-- 该组件是否缓存取决与include 和 exclude 属性-->
                </component>
            </keep-alive>
          
          参数解释
          include -- 字符串或者正则表达式,只要名称匹配的组件会被缓存
          exclude -- 字符串或者正则表达式,任何名称匹配的组件都不被缓存
          include 和exclude 的属性允许组件有条件的缓存。而这都可以用 " , " 分割字符串、正则表达式、数组。单使用正则或者是数组是,要记得用 v-bind
          示例
          <!-- 逗号分隔字符串,只有组件a与b被缓存。 -->
          <keep-alive include="a,b">
            <component></component>
          </keep-alive>
          
          <!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -->
          <keep-alive :include="/a|b/">
            <component></component>
          </keep-alive>
          
          <!-- Array (需要使用 v-bind,被包含的都会被缓存) -->
          <keep-alive :include="['a', 'b']">
            <component></component>
          </keep-alive>