Vue常见知识点

I. 什么是 MVVM?

MVVM是 Model-View-ViewModel 的缩写。它是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表UI组件，它负责将数据模型转化成 UI展现出来；ViewModel 是一个同步 View 和 Model 的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Mode 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，不需要手动去操作 DOM 节点，不需要灌输主句状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

II. MVVM 和 MVC 的区别？

MVC 和 MVVM 都是一种设计思想。主要区别是 MVC 中 Controller 演变成了 MVVM 中的 ViewModel。 MVVM* 主要解决了 MCV 中大量的 DOM** 操作是页面渲染性能降低，加载速度变慢，从而影响了用户体验。而且当 Model 层数据频繁发生变化时，开发者需要手动更新 View 层。

III. Vue的优点是什么？

a. 低耦合。视图层(View) 可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同改的 View 上，当 View 发生变化 Model 可以不变，当 Model 变化的时候 View 也可以不变。
b. 可重用性。你可以把一些视图层逻辑放在一个 ViewModel 中，让很多 View 重用这段视图逻辑。
c. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计，使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
d. 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写专门的测试代码。

IV. Vue2.0生命周期是什么？

Vue 的生命周期总共有创建前/后，载入前/后，销毁前/后。

a. 创建前/后：在 beforeCreate 阶段，Vue 实例的挂载元素 el 和数据对象 data 都为 undefined ，还未初始化。在 create 阶段，vue 实例的数据对象 data 有了值，但 el 仍然没有。
b. 载入前/后：在 beforeMount 阶段，Vue 实例的 $el 和 data 都初始化了，但还是挂载之前虚拟的 DOM 节点，data.message 还未替换。在 mounted 阶段，Vue 实例挂载完成，data.message 成功渲染。
c. 更新前/后：当 data 发生变化时，会触发 beforeUpdate 和 update 方法。
d. 销毁前/后: 在执行 destroy 方法后，对 data的改变不会再触发周期函数，说明此时 Vue 实例已经解除了事件监听以及和 DOM 的绑定，但是 DOM结构依然存在。

V. Vue1.0 和 Vue2.0的对比

1.片段代码: 在 Vue2.0 中，每个组件模板中，必须有一个根元素，来包裹所有的元素。


    <template>
        <h3>我是组件</h3><strong>我是加粗标签</strong>
    </template>
<!-- 现在:  必须有根元素，包裹住所有的代码 -->
    <template id="aaa">
            <div>
                <h3>我是组件</h3>
                <strong>我是加粗标签</strong>
            </div>
    </template>

2.生命周期见下表

vue1.0	vue2.0	描述
init	beforeCreate	组件实例刚被创建，组件属性计算之前，如 data 属性等。
created	created	组件实例创建完成，属性已绑定，但 DOM 还未生成，`$el`属性还不存在。
beforeCompile	boforeMount	模板编译/挂载之前
compiled	mounted	模板编辑/挂载之后
ready	mounted	模板编译/挂载之后（不保证组件已在 `document` 中）
-	beforeUpdate	组件更新之前
-	updated	组件更新之后
-	activated	for `keep-alive` ，组件被激活时调用
-	deactivated	for `keep-alive` ，组件被移除时调用
attached	-	-
deattached	-	-
beforeDestroy	beforeDestroy	组件销毁前调用
destroyed	destroyed	组件销毁后调用

3.过滤器
2.0 删除了 1.0 所有自带的过滤器，将不再是传参的方式调用，如下：
{{msg | mimi '12' '5'}}
而现在2.0中，要使用过滤器，必须要自定义一个过滤器:
Vue.filter('toDou',function(n,a,b){
return n<10?n+a+b:''+n;
});

//调用过滤器
{{msg | mimi('12','5')}}
4.v-for循环
- 在1.0中循环渲染时会使用到 tranck-by="$indec"来提高for循环的性能，而在2.0，使用重复数据将不会报错，同时也去掉了一些隐式变量如：index 、 key，如果要用到 index 和 key 则可通过 ES6的语法来获取：
  v-for="(val,index) in rows"
- 关于整数循环，1.0的整数循环是从0开始的，2.0的整数循环则是从1开始的。