Skip to content

理解 Vue 的组件和 MVVM 模型

组件化基础

  • “很久以前”就有组件化
  • 组件化的创新:数据驱动视图(MVVM,setState)

“很久以前”的组件化

  • asp jsp php 已经有组件化了
  • nodejs 中也有类似的组件化

举个例子,不同用户:组件一样的,信息不一样

js
<!--个人信息-->
<div>
    <% include('widgets/user-info',{userInfo:userInfo}) %>
</div>
<!--粉丝-->
<div>
    <% include('widgets/fans',{count:count}) %>
</div>
<!--关注-->
<div>
    <% include('widgets/followers',{count:count}) %>
</div>

数据驱动视图

  • 传统组件,只是静态渲染,更新还要依赖于操作 DOM
  • 数据驱动视图 - Vue MVVM,React setState

Vue 的 MVVM => Model,View 和 ViewModel

js
<!--MVVM 代码说明-->
<template>
    <!--View-->
    <div id="app">
        <!--// click 也是 ViewModel-->
        <p @click="changeName">{{name}}</p>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                {{item}}
            </li>
        </ul>
        <!--// click 也是 ViewModel-->
        <button @click="addItem">添加一项</button>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data() {
            // model
            return {
                name: 'vue',
                list: ['a', 'b', 'c']
            }
        },
        methods: {
            // ViewModel
            changeName() {
                this.name = '张三'
            },
            addItem() {
                this.list.push(`${Date.now()}`)
            }
        }
    }
</script>

基于 MIT 许可发布