使用 Vue.js 框架后的感想

前言

用 Vue 已经有段时间了，把自己的所想所悟写下来，每一个想法都是非常宝贵的，记录成为生活，记录成为习惯。

简化开发

Vue 是可以辅助前端工程师开发 Web App 的一种框架，它节省很多时间，让我们更多的专注于业务代码的编写。它极大地节省 DOM 操作，非常快速地构建用户界面，以组件的形式把界面拆分成一块，达到可拆卸、可复用，相当于零件。

假如，渲染一个列表：

let ul = document.createElement('ul');
for (let i = 0; i < 10; i++) {
	let li = document.createElement('li');
	let p = document.createElement('p');
	p.innerText = `Title${i}`;
	let div = document.createElement('div');
	let p1 = document.createElement('p');
	p1.innerText = `Index: ${i}`;
	let p2 = document.createElement('p');
	p2.innerText = `Hello Vue.js!`;
	div.appendChild(p1);
	div.appendChild(p2);
	li.appendChild(p);
	li.appendChild(div);
	ul.appendChild(li);
}
let root = document.getElementById('root');
root.appendChild(ul);

业务增加，嵌套标签的内容增加，结构也越来越复杂。你希望简单快捷的代码编写步骤吗？终究是人的懒嘛。开发 Web App 最烦的就是 DOM 操作，要一个个地获取。JQuery 可以减少这方面的操作。随着行业的发展，就衍生出更好用的技术。

Vue 渲染列表就是在页面标签中写好基本的结构，用 v-for 依次渲染每一项标签：

<div id="root">
	<ul>
		<li v-for="(item, index) in items" :key="item.index">
			<p>Title: {{ item.title }}</p>
			<div>
				<p>Index: {{ index }}</p>
				<p>{{ item.data }}</p>
			</div>
		</li>
	</ul>
</div>

比起用 JS 添加这些节点和数据，用 Vue 框架来渲染这些节点要简单、快捷、高效得多。

Vue.createApp({
	data() {
		return {
			items: [
				{ title: 'h', data: 'Hello Vue.js!', index: 0 },
				{ title: 'e', data: 'Hello Java!', index: 1 },
				{ title: 'l', data: 'Hello JavaScript!', index: 2 },
				{ title: 'l', data: 'Hello HTML!', index: 3 }
			]
		}
	}
}).mount('#root');

以大化小的组件

Vue 还有一个非常重要的概念——组件，一个页面内容非常地多，如果还是把页面看作是一个整体开发，以后维护起来也非常困难，其他小伙伴后期加入开发理解起来也很困难。还不如把整体拆分成部分，就像是解决问题以大化小，以小化了。

组件的作用就是拆分页面，像是零件组装产品一样，而且零件可以很好地配置到其他地方，零件可以复用。开发过 Flutter 的小伙伴肯定知道，一个页面就是一个 .dart 文件，独立的、单独的。在 Vue 框架开发下，Web App 的一个页面就是一个 .vue 文件；页面中许许多多的一小块，就是一个 Vue 组件，也是以一个 .vue 文件存在，即单文件组件。