白抹灰

（一）MVVM 模式

1. MVVM 是什么

MVVM（Model-View-ViewModel）是一种软件架构模式，它可以将图形用户界面（GUI）的开发（视图）与业务逻辑或后端逻辑（模型）的开发分离，使视图不依赖于任何特定的后端逻辑。这种模式的核心思想是将视图与模型分离，以便在不影响视图的情况下修改模型。在 MVVM 中，视图和模型之间的通信是通过一个称为“绑定”的机制实现的。绑定机制允许视图自动更新，而无需编写大量的代码来处理这些更新。

你可以将 MVVM 看作是 MVC（Model-View-Controller）模式的变体，其中控制器被视图模型（ViewModel）替换。在 MVC 中，控制器负责处理用户输入并更新模型和视图。在 MVVM 中，ViewModel 负责处理用户输入并更新模型和视图。它萌芽于 2005 年微软推出的基于 Windows 的用户界面框架 WPF，前端最早的 MVVM 框架 knockout 在 2010 年发布。

渲染真实 DOM（Document Object Model）的开销是很大的。有时修改某个数据，如果直接渲染到真实 DOM 上会引起整个 DOM 树的重绘和重排。而 diff 算法可以只更新修改的那一小块 DOM，而非更新整个 DOM。

需求：父组件通过 props 传递给子组件 caseList 数组，这里需要遍历该数组来展示每个 case 元素的一些属性，其中就包括创建时间 create_time 和图片地址 cover。但父组件传过来的 create_time 是一个时间戳，我们希望时间以年 - 月 - 日的形式来呈现。而 cover 的格式是 ["http:/xxxxxx.jpg"]，直接赋给图片 src 是不行的。所以子组件需要想办法修改 props 值。

混合 mixins 和继承 extends

看看官方文档怎么写的，其实两个都可以理解为继承，mixins 接收对象数组（可理解为多继承），extends 接收的是对象或函数（可理解为单继承）。

只要涉及到 MVVM 框架就不得不提到双向绑定，毕竟它是 Vue 的三要素之一。

• 响应式：例如如何监听数据变化，其中的实现方法就是双向绑定
• 模板引擎：如何解析模板
• 渲染：Vue 如何将监听到的数据变化和解析后的 HTML 进行渲染

如下图所示，要求循环滚动一系列文本信息。

1
2
3

let vue = new Vue({
    render: h => h(App)
}).$mount('#app')

vue-cli 配置齐全，大家也都习惯于使用 vue-cli 开发，因此可能会忽略了入口文件中 Vue 实例是怎么去 new 的，以及 #app 元素是怎么渲染到页面的。

Component Injected 属性

这些属性通过调用 app.use(router) 注入到每个子组件中。

参考文档：

1. Vim 入坑指南

2. 在 VSCode 里面配置 Vim 的正确姿势

参考文档

一、前置条件

uni-forms 需要绑定 model 属性，值为表单的 key/value 组成的对象。uni-form-item 需要设置 name 属性为当前字段名，字段为 String|Array 类型。

1
2
3
4
5
6
7
8

<uni-forms :modelValue="formData">
	<uni-forms-item label="姓名" name="name">
		<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
	</uni-forms-item>
	<uni-forms-item required :name="['data','hobby']" label="兴趣爱好">
		<uni-data-checkbox multiple v-model="formData.data.hobby" :localdata="hobby"/>
	</uni-forms-item>
</uni-forms>