白抹灰

在公司实习时，参与的第一个任务是负责从头搭建某医疗机构的 h5 页面端。h5 端和 pc 端的页面仅供浏览信息使用，不像 app 端有用户注册登录及一系列交互操作的页面，因此整体难度不高。因为上司没有指明要使用何种框架，所以我照搬了公司用来测试前端实习生水平的一个伪项目所用的框架——Nuxt。本文用来梳理在搭建这个 Nuxt 项目时需要了解的一些知识点。

第一次接触 uniapp 项目，同时也是第一次开发 APP，难免会碰到很多问题。发现并解决问题的过程略有艰辛但又带点成就感。在此简要记录所遇到的一些问题和相应解决方案，与君共勉。

一、通过 URL 传递

1. 传递基本类型

1
2
3
4
5
6
7
8
9
10
11
12
13

// 在起始页面 prev.vue 跳转到 next.vue 页面并传递参数
uni.navigateTo({
	url: 'pages/next?id=1&name=uniapp'
});

// 在 next.vue 页面接受参数
export default {
	onLoad: function (option) { // option 为 object 类型，会序列化上个页面传递的参数
		console.log(option.id); // 打印出上个页面传递的参数。
		console.log(option.name); // 打印出上个页面传递的参数。
	}
}

（一）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。

混合 mixins 和继承 extends

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

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

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

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

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

1
2
3

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

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