1. 前言

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

2. 定义

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

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

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

就算是瞎子也能看出来了有没有，当然不是说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>

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

4.总结

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