[JavaScript知识库] Vue计算属性和侦听器

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue计算属性和侦听器 -> 正文阅读

[JavaScript知识库]Vue计算属性和侦听器

一、计算属性

computed：vue通过computed选项提供计算属性处理
对依赖属性赋值时才会触发计算函数
擅长处理场景：一个数据受多个数据影响

二、侦听器

watch：vue通过watch选项提供侦听处理
擅长处理场景：一个数据影响多个数据

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue计算属性和侦听器</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="vueDiv">
			<!-- 一、计算属性 -->
			firstStr:<input v-model="firstStr" />
			lastStr:<input v-model="lastStr" />
			<h1>{{fullStr}}</h1>
			<!-- 二、侦听器 -->
			<h1>{{count}}</h1>
		</div>
	</body>
	<script>
		new Vue({
			el: '#vueDiv',
			data: {
				firstStr: '', //计算属性的依赖属性
				lastStr: '', //计算属性的依赖属性
				count: 0 //侦听器count
			},
			computed: { //计算函数，对依赖属性赋值时才会触发计算函数
				//擅长处理场景：一个数据受多个数据影响
				//计算属性getter
				fullStr: function() {
					return this.firstStr + this.lastStr;
				}
			},
			watch: { //vue通过watch选项提供侦听处理，侦听某一个数据是否改变
				//擅长处理场景：一个数据影响多个数据
				fullStr: function(newStr, oldStr) {
					this.count++;
				}
			}
		})
	</script>
</html>