1 vue.js - MVVM模式

本文对比了Vue.js和jQuery在实现功能时的区别,指出Vue.js通过MVVM模式实现了数据与视图的分离,提高了代码可维护性和可读性。在jQuery中,业务逻辑和DOM操作混合,而Vue.js则通过数据绑定和指令简化了DOM操作。Vue.js的实现更加清晰地展示了数据与视图的关系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 什么是 Vue.js

Vue.js 是一套用于构建用户界面的渐进式框架。它有以下2个特征:

  • 简单小巧:vue.js压缩后的文件非常小,例如经压缩后的 vue.js2 仅仅90KB。
  • 渐进式:Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

2 Vue.js 与 传统的 Javascript 开发有什么不同

下面,我们分别使用 JQuery 及 vue.js 实现这样一个效果:

  • 点击 add 按钮,向 id 为 app 的 div 插入一个 div,并把 add 按钮设置为 disabled,remove 按钮设置为 enable。
  • 点击remove按钮,移除 id 为 app 的 div 里的 div,并把 add 按钮设置为enable, remove 设置为disabled.

2.1 JQuery 的实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JQuery实现</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
	<script type="text/javascript">
	    function addDiv(operator) {
		    if (operator === 'add') {
				$('#app').append(
					$('<p style="padding: 8px; margin-top: 12px; font-size: 1.2em; border: solid 1px #f2f2f2">Hello, I am a p element.</p>')
				);
				$('#app button:nth-child(1)').attr('disabled', 'disabled');
				$('#app button:nth-child(2)').removeAttr('disabled');
			} else {
				$('#app p').remove();
				$('#app button:nth-child(1)').removeAttr('disabled');
				$('#app button:nth-child(2)').attr('disabled', 'disabled');
			}
		}
	</script>
</head>
<body>
  <div id="app" style="background-color: #fefefe; font-size: 14px">
      <button onclick="addDiv('add')">Add p</button>
	  <button onclick="addDiv('remove')" disabled>Remove p</button>
  </div>
</body>
</html>

用 JQuery 实现功能并不复杂,直接利用 JQuery 强大的选择器即可以方便地插入删除修改 页面上的 DOM 元素。但,这样写有以下两个缺点:

  • 1: 业务逻辑代码 跟 操作DOM的 视图代码 混在一起,当功能越来越复杂的时候,代码将会越来越难维护及难读。
  • 2: html 代码无法直观地体现 idappp 里面会有一个内容为 Hello, I am a p element.p 元素,我们不得不先看 add button 的 onclick 调用了什么函数,然后再看该函数进行了什么操作。

2.2 Vue.js 的实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Vue.js 实现</title>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app" style="background-color: #fefefe; font-size: 14px">
      <button v-on:click="add" :disabled="showP">Add p</button>
	  <button v-on:click="remove" :disabled="!showP">Remove p</button>
	  <div  v-if="showP"
		style="padding: 8px; margin-top: 12px; font-size: 1.2em; border: solid 1px #f2f2f2">Hello, I am p element.</div>
  </div>
</body>
	<script type="text/javascript">
	    new Vue({
			el: '#app',
			data: {
				showP: false
			},
			methods: {
				add: function() {
					this.showP = true;
				},
				remove: function() {
					this.showP = false;
				}
			}
		});
	</script>
</html>

从上面的代码可以看到,使用 Vue.js 把 视图数据 进行了分离。视图 中通过 Vue 指令清晰地表示了 DOM元素表现行为数据 的关系,如 p 元素 上的指令的 v-if="showP" 表明了:该 p 元素 是否插入,是通过 数据model 中的 showP 变量控制。

addremove 方法中,并没有直接操作 DOM,而是通过改变与 p 元素 绑定的变量 showP 间接地控制了 p 元素 是否插入。

2.3 MVVM 模式

Vue.js 使用了 MVVM (Model-View-ViewModel) 设计模式,这种设计模式的特点是,当 View 层发生变化时,会自动更新到 ViewModel 中;而当ViewModel 中的 数据 发生变化时,View 也会自动发生变化。

如上面例子,new Vue(....) 生成了 ViewModel,该 ViewModelidappdiv 进行了绑定,当 ViewModel 中的数据中的 showP 发生变化时,会自动更新 p 元素是否插入。

3 总结

本文分别用 JQuery 和 Vue.js 实现了一个简单的功能,说明了 JQuery 与 Vue.js 在实现功能过程中的区别,并简单地描述了 MVVM 模式。

### Vue.js 实现 MVVM 架构的方式和原理 Vue.js 通过其核心机制实现了高效的 MVVM 架构,主要体现在以下几个方面: #### 数据绑定机制 Vue.js 使用虚拟 DOM 和依赖追踪系统来实现数据的双向绑定。每当数据发生变化时,Vue 能够自动检测到这些变化并更新相应的视图[^1]。 ```javascript new Vue({ el: '#app', data() { return { message: 'Hello Vue!' } }, methods: { changeMessage() { this.message = 'Message changed!'; } } }); ``` 当 `message` 发生改变时,页面上的相应内容会立即得到更新,无需手动操作 DOM。 #### 组件化开发 组件是 Vue.js 的重要组成部分,允许开发者将应用拆分成多个可重用的小型模块。每个组件都有自己的模板、样式以及行为逻辑,这有助于提高代码的可维护性和复用性[^3]。 ```html <template> <div class="component"> {{ localData }} </div> </template> <script> export default { name: "MyComponent", props: ['initialValue'], data() { return {localData: this.initialValue}; } } </script> ``` #### 视图模型 (ViewModel) 在 Vue 中,实例对象充当了 ViewModel 的角色,负责连接 View 层与 Model 层的数据流动。通过定义响应式的属性,在任何地方修改该属性都会触发 UI 更新;反之亦然——用户的交互也会同步反映回数据层[^2]。 #### 响应式系统 Vue 内部采用了一个基于观察者模式的响应式引擎,它可以监听 JavaScript 对象的变化,并通知给订阅者去执行对应的渲染函数。这种设计让开发者可以更直观地管理状态变更及其影响范围。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值