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.总结
比较简单,相信大家都懂,喜欢可以点过赞
。