mvvm的理解

496 阅读1分钟

1. 前言

这两天在写项目的时候,脑海中突然跑出来一个东西mvvm,这个熟悉又陌生的名字忘记了,所以打算复习一下。

2. 定义

mvvm最早可以追溯到微软的wpf,简单来说就是ViewModel的改变,会引起视图层的变化。 同时视图层的变化也可以引起ViewModel的变化。当然到这里很多人会说:

006APoFYly8gt78v7g65tj30ft0hsaao.jpg

是哦,好像不用也木有关系,当然这是对于简单的软件开发来说,如果用mvc为例,大型开发的应用,最后会演变为:

image.png

所以到最后理清数据流的关系也是一种困难,但是当转为mvvm之后,就会发现:

image.png

就算是瞎子也能看出来了有没有,当然不是说mvc不好,只是对于前端来说,可能mvvm的模式更为简便

3. 从实际

说完了定义,当然也要从工作中来看,以vue为例,双向绑定的实现方式是使用v-model,对于form组件来说,我们可以直接使用:

<input v-model="modelDate" >

当然如果要让自己的组件也实现响应式的话,就需要一点点的加工:

<template>
  <div v-if="visible">
    <slot />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
export default defineComponent({
  name: 'RaImage',
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const visible = computed<boolean>({
      get() {
        return props.modelValue;
      },
      set(val) {
        emit('update:modelValue', val);
      },
    });
   
    return {
      visible,
    };
  },
});
</script>

当然如果你对watch有一定了解,知道它是懒执行的话,还有一种写法:

<template>
  <div v-if="visible">
    <slot />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, toRef, watch } from 'vue';
export default defineComponent({
  name: 'RaImage',
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const visible = ref(false);

    watch(toRef(props, 'modelValue'), () => {
      visible.value = props.modelValue;
    });

    watch(visible, () => {
      emit('update:modelValue', visible.value);
    });
    return {
      visible,
    };
  },
});
</script>

当然新手可以使用第二种,比较好理解,喜欢精益求精同志们,可以像我一样,选择第一种。当然只是推荐,不代表最好答案

OIP-C.jpg

4.总结

比较简单,相信大家都懂,喜欢可以点过赞