【Vue核心】8.计算属性

news2024/10/5 18:31:36

1. 定义:

要用的属性不存在,要通过已有属性计算得来。

2. 原理

底层借助了objcet.defineproperty方法提供的getter fllsetter.

3. get两数什么时候执行?

(1),初次读取时会执行一次。
(2),当依赖的数据发生改变时会被再次调用。

4. 优势

与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

5. 备注

1,计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set所数去响应修改,Hset中要引起计算时依赖的数据发生改变。

6. 完整写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<!-- 引入vue.js -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br /><br />
			名：<input type="text" v-model="lastName"> <br /><br />
			姓名：<span>{{fullName()}}</span>
			姓名：<span>{{fullName()}}</span>
			姓名：<span>{{fullName1}}</span>
			姓名：<span>{{fullName1}}</span>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false;
		new Vue({
			el: '#root',
			data: {
				firstName: "张",
				lastName: "三",
				//fullName: ""
			},
			computed: {

				//get有什么作用?
				//当有人读取fullNamell, get就会被调用,且返回值就作为fullName的值
				//get什么时候调用?1.初次读取fullName时.2.所依赖的数据发生变化时
        
				fullName1: {
          
					get() {
						console.log("get被调用了")
						return this.firstName + "-" + this.lastName;
					},
					set(value) {
						console.log("set", value)
						const arr = value.split('-');
						this.firstName = arr[0];
						this.lastName = arr[1];
					}
				},

		
			},
			methods: {
				fullName() {
					console.log("methods")
					return this.firstName + "-" + this.lastName;
				}
			},

		})
	</script>
</html>

7. 简写方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<!-- 引入vue.js -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br /><br />
			名：<input type="text" v-model="lastName"> <br /><br />
			姓名：<span>{{fullName}}</span>
			姓名：<span>{{fullName}}</span>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false;

		new Vue({
			el: '#root',
			data: {
				firstName: "张",
				lastName: "三",
			},
			computed: {
				//简写
				fullName() {
					return this.firstName
				}
			},
		
		})
	</script>
</html>