vue面试题

Vue 双向绑定原理：

vue.js 2.0: 
    采用数据劫持（Proxy模式) 结合发布者-订阅者模式（PubSub模式）的方式，
    通过Object.defineProperty()来劫持各个属性的setter、getter，
    在数据变动时发布消息给订阅者，触发相应的监听回调。
@1：实现一个数据监听器Observer，
    能够对数据对象的所有属性进行监听，
    如有变动可拿到最新值并通知订阅者；
@2：实现一个指令解析器Compile，
    对每个元素节点的指令进行扫描和解析，
    根据指令模板替换数据，
    以及绑定相应的更新函数；
@3：实现一个Watcher，
    作为连接Observer和Compile的桥梁，
    能够订阅并收到每个属性变动的通知，
    执行指令绑定的相应回调函数，从而更新视图。

虚拟DOM， Diff算法：

@1：不用直接操作DOM元素，只操作数据便可以重新渲染页面；
@2：虚拟DOM是为了解决浏览器性能问题而被设计出来，
    当操作数据时，将改变的dom元素缓存起来，
    都计算完后再通过比较映射到真实的dom树上。
@3：diff算法比较新旧虚拟dom。
    如果节点类型相同，则比较数据，修改数据；
    如果节点不同，直接干掉节点以及所有子节点，插入新的节点；
    如果给每个节点都设置了唯一的key,
    就可以准确的找到需要改变的内容，
    否则就会出现修改一个地方导致其他地方都改变的情况。
    例如a-b-c-d，插入新节点a-b-m-c-d，实际上改变了c和d。
    但是设置了key，就可以准确的找到b和c并插入。

总结：虚拟dom可以很好的跟踪当前dom状态，
    因为它会根据当前数据生成一个描述当前dom结构的虚拟dom，
    然后数据发生改变时，又会生成一个新的虚拟dom,
    而这两个虚拟dom恰恰保存了变化前后的状态。
    然后通过diff算法，计算出两个前后虚拟dom之间的差异，
    得出一个更新的最优方法（哪些发生改变，就更新哪些）。
    可以明显的提升渲染效率以及用户体验。

v-if和v-show的区别：

· v-if是真正的条件渲染，通过节点的销毁、重建来实现。
· v-if是惰性的，即初始条件为false时，什么也不做，直到条件第一次为true才开始渲染。
· v-show总会被渲染，只是简单的基于css来实现样式切换。
· v-if有更高的切换开销，而v-show更高的初始渲染开销。
    因此，
    如果需要非常频繁地切换，则使用v-show较好；
    如果再运行时条件很少改变，则使用v-if较好。
· v-if按照条件是否渲染，v-show是display的block或none。

v-if与v-for一起使用：

· 当 v-if 和 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。（这里是2.x的版本，3.x则反之）
· 不推荐同时使用 v-if 和 v-for（可在v-for 内加一层 template 标签使用 v-if）。

计算属性（computed）vs 方法：

· 计算属性的值会被缓存，计算属性基于它们的响应式依赖进行缓存的，
当依赖项改变时，才重新计算计算属性的值并继续缓存。
· 方法不会缓存，每调用一次方法，都会重新执行一次方法主体代码块。

计算属性 vs 侦听器：

· 计算属性的值会被缓存；
· 侦听器不能被缓存；
· 通常计算属性是根据一个或多个已有数据，返回一个新的值；
  侦听器是监听一个数据的变化，
  可能由一个数据的变化导致其他一个或多个数据的变化，
  或导致其他一些副作用。

vue.js的两个核心是什么：

· 数据驱动
· 组件系统

vue常用的修饰符：

· .prevent: 提交事件不再重载页面。
· .stop：阻止单击事件冒泡。
· .self: 当事件发生在该元素本身而不是子元素的时候会触发。
· .capture: 事件侦听，事件发生的时候会被调用。

vue中 key 值的作用：

· js用v-for正在更新已渲染过的元素列表时，它默认用"就地复用"策略。
  如果数据项的顺序被改变，
  vue将不会移动DOM元素来匹配数据项的顺序，
  而是简单复用此处每个元素，
  并且确保它在特定索引下显示已被渲染过的每个元素。
· key 的作用主要是为了高效的更新模拟DOM。

Vue组件之间的参数传递：

父组件和子组件传值：
· 父组件传给子组件：子组件通过props方法接收数据；
· 子组件传给父组件：$emit方法传递参数。
非父子组件间的数据传递，兄第组件传值：
· eventBus：就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。
  项目比较小时，用这个比较合适。
· Vuex
· 发布订阅模式

Vue中如何监控某个属性值的变化：

例如现在需要监控data中，obj.a的变化：

watch:{
    'obj.a':{
        handler(new, old){
            console.log(new,old)            }
    }
}

利用计算属性（computed）来实现，当依赖改变时，便会重新计算一个新值：
computed：{
    a1 () {
        return this.obj.a
    }
}

v-model 是如何实现的，语法糖是什么：

· 作用在表单元素上:
    v-model="message" 等同于 
    v-bind:value="message"  
    v-on:input="message=event.target.value"

· 作用在组件上，本质是一个父子组件通信的语法糖，通过props和.emit实现，等同于
    :value="message" 
    @input="$emit('input', $event.target.value)"

data为什么是一个函数而不是对象：

· js中的对象是引用类型的数据，
    当多个实例引用同一个对象时，
    只要一个实例对这个对象进行操作，
    其他实例中的数据也会发生变化。

· 在vue中，更多的是复用组件，
    那就需要每个组件都有自己的数据，
    这样组件之间才不会相互干扰。

· 所以组件的数据不能写成对象的形式，
    而是要写成函数的形式。
    数据以函数返回值的形式定义，
    这样每次复用组件时，
    就会返回一个新的data。
    也就是说每个组件都有自己的私有数据空间，
    各自维护自己的数据，
    不会干扰其他组件的正常运行。

vue的生命周期：

每一个vue实例从创建到销毁的过程就是这个vue实例的生命周期。
从开始创建、初始化数据、编译模板、挂载dom、渲染、更新、渲染、卸载等一系列过程。

· beforeCreate (初始化界面前)
· created (初始化界面后)
· beforeMount（渲染界面前）
· mounted（渲染界面后）
· beforeUpdate（更新数据前）
· updated（更新数据后）
· beforeDestroy（卸载组件前）
· destroyed（卸载组件后）

keep-alive：

· <keep-alive> 是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染dom。
· <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

· 生命周期钩子函数：
    actived: 激活调用；
    deactived: 停用时调用。

· 属性：
    include: 名称（正则或字符串）匹配时调用；
    exclude：名称不匹配时调用；
    max：最多缓存数量。

Vuex：

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便实现组件之间数据的共享。
· Vuex集中管理共享的数据，易于开发和后期维护；
· 能够高效的实现组件之间的数据共享，提高开发效率；
· 存储在vuex的数据是响应式的，能够实时保持页面和数据的同步；
· 核心属性：state、mutations、action、getters、modules。

@1 state： 
    vuex使用单一状态树，即每个应用将仅仅包含一个store实例，
    但单一状态树和模块化并不冲突。
    存放的数据状态，不可直接修改里面的数据。

@2 mutations：
    muations 定义的方法动态修改vuex的store中的状态或数据。

@3 action:
    actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，
    简单的说就是异步操作数据。
    view层通过store.dispath来分发action。

@4 getters:
    类似vue的计算属性，主要用来过滤一些数据。

@5 modules:
    项目特别复杂或大型时，可以让每一个模块都拥有自己的state、mutations、action、getters，
    使得结构更清晰，方便维护管理。        

MVC和MVVM的区别：

· MVC 表示"模型-视图-控制器"；MVVM 表示"模型-视图-视图模型"；

· MVVM 是由MVC衍生出来的。MVC中，view会直接从model中读取数据；

· MVVM 各部分的通信时双向的，而MVC各部分通信是单向的；

· MVVM 是真正将页面与数据逻辑进行分离放到 js 里面去实现，而MVC里面并未分离。