1. Introduction

When I was writing the project these days, an object called MVVM suddenly came out of my mind. I forgot the familiar and strange name, so I decided to review it.

Definition 2.

MVVM can be traced back to Microsoft’S WPF. In simple terms, changes in the ViewModel will cause changes in the view layer. Changes in the view layer can also cause changes in the ViewModel. Of course, a lot of people are going to say,

Of course, this is for simple software development. If you use MVC as an example, large developed applications will eventually evolve into:

So it’s difficult to sort out the relationship between the data flows in the end, but when you convert to MVVM, you find:

It’s not that MVC is bad, of course, but for the front end, maybe MVVM is easier.

(3) from the actual

For vUE, two-way binding is implemented using v-Model. For form components, we can directly use:

<input v-model="modelDate" >
Copy the code

Of course, if you want your components to be responsive, you need a little work:

<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>
Copy the code

Watch: Watch: watch: watch: watch: 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>
Copy the code

Of course, the novice can use the second kind, better understand, like excellence comrades, can like me, choose the first kind. Of course, it’s just a recommendation, not the best answer,

4. To summarize

Relatively simple, I believe we all understand, like can point to like.