Vue常见知识点

Posted petewell

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue常见知识点相关的知识,希望对你有一定的参考价值。

I. 什么是 MVVM?

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

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

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

II. MVVM 和 MVC 的区别?

MVCMVVM 都是一种设计思想。主要区别是 MVCController 演变成了 MVVM 中的 ViewModelMVVM* 主要解决了 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 实例的 $eldata 都初始化了,但还是挂载之前虚拟的 DOM 节点,data.message 还未替换。在 mounted 阶段,Vue 实例挂载完成,data.message 成功渲染。

  • c. 更新前/后:当 data 发生变化时,会触发 beforeUpdateupdate 方法。

  • d. 销毁前/后: 在执行 destroy 方法后,对 data的改变不会再触发周期函数,说明此时 Vue 实例已经解除了事件监听以及和 DOM 的绑定,但是 DOM结构依然存在。

V. Vue1.0Vue2.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,如果要用到 indexkey 则可通过 ES6的语法来获取:

      v-for="(val,index) in rows"
    • 关于整数循环,1.0的整数循环是从0开始的,2.0的整数循环则是从1开始的。

原文:大专栏  Vue常见知识点


以上是关于Vue常见知识点的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家