Vue.js系列（六）： Vue的数据状态及函数！

最新推荐文章于 2023-11-24 16:18:46 发布

陈永佳

最新推荐文章于 2023-11-24 16:18:46 发布

阅读量653

点赞数 2

分类专栏： Vue系列文章标签： Vue的数据状态及函数

本文链接：https://blog.csdn.net/Mrs_chens/article/details/101294899

版权

Vue系列专栏收录该内容

14 篇文章 3 订阅

订阅专栏

Vue.js系列（六）： Vue的数据状态及函数！

前言

注意本次用cdn形式引入js学习，有node.js的玩家可以用node.js。CDN下载地址：https://vuejs.org/js/vue.min.js以及Node.js：Vue系列: windows下npm安装vue

今天博主将为大家分享Vue.js系列（六）： Vue的数据状态及函数！不喜勿喷，如有异议欢迎讨论！

有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！

目标

学习使用methods对象
学习使用computed对象
学习使用watch对象

1.1.1 methods对象

methods是一个包含了{key:function}的对象.通过实例可直接访问这些函数.也可以在指令的表达式中调用.

methods 将被混入到 Vue实例中。可以直接通过 VM实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为Vue 实例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例，Vue的数据状态及函数！</title>
		<script src="js/Vue.min.js"></script>
	</head>
	<body>
		<div id="app">

		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					a: 1,
					b: 2
				},
				methods: {
					plus: function() {
						//这里的this指向 vue的实例 vm
						this.a++;

					}

				}
			});
			//可以通过 Vue 对象的实例,调用 methods 中定义的函数
			vm.plus();
			console.log(vm.a); //2
		</script>
</html>

可以通过vue对象的实例直接调用methods中的函数.

1.1.2 computed对象

计算属性将被混入到 Vue实例中。所有 getter和 setter的 this 上下文自动地绑定为 Vue实例。

和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。

methods : 只要调用它，函数就会执行。

computed : 计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求值。只要相关依赖未改变，只会返回之前的结果，不再执行函数。

computed中的对象可以是key:function 也可以是 key:{ get:function,set:function }

<script type="text/javascript">
			var vm = new Vue({
				data: {
					a: 1
				},
				computed: {
					// 只读
					aDouble: function() {
						return this.a * 2
					},
					// 读取和设置
					aPlus: {
						get: function() {
							return this.a + 1
						},
						set: function(newValue) {
							this.a = newValue - 1
						}
					}
				}
			});
			console.log(vm.aPlus); // => 2
			vm.aPlus = 3 console.log(vm.a); // => 2
			//computed 仅在依赖项发生变化时才重新计算.
			//vm.aDouble依赖于vm.a,所以当vm.a发生变化时,vm.aDouble才会发生变化.
			console.log(vm.aDouble); // => 4
		</script>

1.1.3 watch对象

watch是一个对象{ key: string | Function | Object | Array }，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch对象的每一个属性。

<div id="app">
			<h3>Watch对象</h3>
			<p>
				请输入搜索关键词:
				<input v-model="key">
			</p>
			<p v-text="result"></p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					key: '',
					result: '请先输入查询条件...',
					i: 0,
					obj: {
						a: 1
					}
				},
				watch: {
					key: function(newKey, oldKey) {
						this.result = '请稍后,正在查询中...';
						this.search();
					},
					obj.a: function(nValue, oValue) {
						//当对象obj中的属性a发生变化时触发
					}
				},
				methods: {
					search: function() {
						var vm = this;
						setTimeout(function() {
							vm.result = "第:" + vm.i + "次搜索完毕.";
						}, 500);
					}
				}
			});
		</script>

watch对应一个对象，键是观察表达式，值是对应回调.当被观察的对象发生变化时,触发回调函数.

总结

在本次学习中:

1. 掌握vue示例中的methods,computed,watch对象的使用

2. methods对象内定义函数并调用

3. 掌握computed对象的使用,并理解methods和computed的区别

4. 学习watch对象的使用

5. 关于methods,computed,watch三者区别:
    methods:只有被调用才会执行.
    computed:相关依赖发生改变时才会重新求值.
    watch:当被观察对象的值变化时触发.

勇于尝试（做练习）：第二天博主会贴出答案！

    1. 在vue实例创建完成后,调用函数计算当前浏览器窗体的宽度
    2. 使用计算属性对data对象中的一个Number类型数组求和
    3. 使用watch观察一个数字,当数字小于1时禁用按钮.
    4. 例如:模拟一个商品详情页,点击购买数量即减少1,当商品库存小于1时将购买按钮禁用

到这里Vue.js系列（六）： Vue的数据状态及函数！各位小伙伴快去试试吧！