计算属性与侦听器

北栀໊ღ

已于 2022-05-24 09:31:32 修改

阅读量284

点赞数

分类专栏： VUE 文章标签： vue.js 学习前端

于 2022-05-24 09:13:49 首次发布

本文链接：https://blog.csdn.net/whlovedlw/article/details/124933414

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.计算属性的基本使用

使用语法拼接<h2>{{firstName+ "-" + lastName}}</h2>
使用方法方法<h2>{{getfullName()}}</h2>
使用计算属性<h2>{{fullName}}</h2>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="vm">
			<h2>{{firstName}}-{{lastName}}</h2>
			<h2>{{getfullName()}}</h2>
			<h2>{{fullName}}</h2>
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#vm',
				data: {
					firstName: "zhang",
					lastName: "san",
				},
				methods: {
					getfullName() {
						return this.firstName + "-" + this.lastName
					}
				},
				computed: {
					fullName: function() {
						return this.firstName + "-" + this.lastName
					}
				}
			})
		</script>
	</body>
</html>

例子中计算属性computed看起来和方法似乎一样，只是方法调用需要使用（），而计算属性不用，方法取名字一般是动词见名知义，而计算属性是属性是名词，但这只是基本使用。

2.计算属性的复杂使用

要求计算出所有book的总价格。

1.for循环
2.for.in
3.for.of
4.forEach
5.map
6.filter
7.reducn

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="vm">
			<h2>{{totalPrcie}}</h2>
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#vm',
				data: {
					books: [{
							id: 110,
							name: "JavaScript从入门到入土",
							price: 1
						},
						{
							id: 111,
							name: "Java从入门到放弃",
							price: 8
						},
						{
							id: 112,
							name: "编码艺术",
							price: 2
						},
						{
							id: 113,
							name: "代码大全",
							price: 4
						},
					]
				},
				methods: {
				},
				computed: {
					1.for循环
					totalPrcie(){
						let arr = 0
						for (let a = 0;a < this.books.length; a++){
							arr += this.books[a].price
						}
							return arr
					}
					
					2.for.in
					totalPrcie(){
						let arr = 0
						for(let a in this.books){
						arr +=this.books[a].price
						}
						return arr
					}
					
					3.for.of
					totalPrcie(){
						let arr = 0
						for(let a of this.books){
							arr += a.price
						}
						return arr
					}
					
					4.forEach
					totalPrcie(){
						let arr = 0;
						this.books.forEach(ieam=>{
							arr += ieam.price
						})
							return arr
						}
					
					5.map
					totalPrcie(){
						let arr = 0;
						this.books.map(ieam=>{
							arr += ieam.price
						})
						return arr
					}
					
					6.filter
					totalPrcie(){
						let arr = 0;
						this.books.filter(ieam=>{
							arr +=ieam.price
						})
						return arr
					}
					
					7.reducn
					totalPrcie(){
						return this.books.reduce((total,ieam)=>{
							return total+ieam.price
						},0)
					}
				}
			})
		</script>
	</body>
</html>

3.计算属性的setter和getter

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<h2>{{firstName}}-{{lastName}}</h2>
			<h2>{{fullName}}</h2><!-- 计算属性在页面渲染时 不需要加() -->
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						firstName: 'zhang',
						lastName: 'san'
					}
				},
				computed: { //计算属性
					/* fullName(){ 
						return this.firstName + '-' + this.lastName
					} */
					fullName: {
						get: function() {
							return this.firstName + '-' + this.lastName
						},
						set:function(value){
							console.log(value);
							var list = value.split('-')
							this.firstName = list[0]
							this.lastName = list[1]
						}
					}
				}
			})
		</script>
	</body>
</html>

计算属性一般没有set方法，只读属性，只有get方法，但是上述中newValue就是新的值，也可以使用set方法设置值，但是一般不用。

4.计算属性和methods的对比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			--计算属性--
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			--方法--
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						firstName: 'zhang',
						lastName: 'san'
					}
				},
				methods: {
					getFullName() {
						console.log("调用了方法getFullName");
						return this.firstName + '-' + this.lastName
					}
				},
				computed: { //计算属性
					fullName() {
						console.log("调用了计算属性fullName");
						return this.firstName + '-' + this.lastName
				},
			})
		</script>
	</body>
</html>

           1.计算属性是一个属性必须要有返回值 methods不一定
           2.计算属性在页面渲染时不需要加括号 methods必须要加
           3.计算属性有缓存 methods没有缓存从性能上来讲计算属性更具有优势

5.侦听器

(1)概念:

1.Vue提供了一个watch选项，提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步代码或者开销比较大的操作时，这个方式是最有用的。

(2)普通监听

普通监听是简单的数据类型：数字，布尔值，字符串

写法一：设有两个参数，一个是新的数据，一个是旧的数据

el:
data:
watch:{
要监听的变量名称:function(newVal,oldVal){},
要监听的变量名称N(newVal,oldVal){
	...
	}
}

写法二：在监听器中，被监听的变量除了可以写成函数，还可以是一个对象

  el:
data:
watch:{
要监听的变量名称:{
	handler:function(newVal,oldVal){
		...
	  }
  	}
 }

watch:{
msg:{
handler(new,old){
console.log('msg 被改变了，原来的值是：'+old+'，新的值是'+new)
}}}

(3).深度监听

watch里面msg（）{ }这种形式只是浅监听，只适合监听一层，如果想监听对象或者数组内部的值，这种形式就不适合了，这个时候需要深度监听，deep属性，它的默认值是false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<div>
				FullName: {{person.fullname}}
			</div>
             <div>
             	Firstname:<input type="text"  v-model="person.firstname"/>
             </div>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						person: {
							firstname: 'Menghui',
							lastname: 'Jin',
							fullname:''
						}
					}
				},
				methods: {

				},
				computed: {

				},
				watch:{
					person:{
						handler:function(n,o){
							console.log(n);
							console.log(o);
							this.person.fullname = n.firstname + this.person.lastname 
						},
						immediate:true,
						deep:true
					}
				}
			})
			/* 1.watch无法直接监听复杂数据类型 */
		</script>
	</body>
</html>

(4).解决watch监听复杂数据类型中新值和老值相同问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<p>FullName: {{person.fullname}}</p>
			<p>FirstName: <input type="text" v-model="person.firstname"></p>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						person: {
							firstname: 'Menghui',
							lastname: 'Jin',
							fullname: ''
						}
					}
				},
				methods: {

				},
				computed: {
					person2() {
						return JSON.parse(JSON.stringify(this.person));
					} //解决深度监听新老值同源问题
				},
				watch: {
					person2: {
						handler(n, o) {
							console.log(this.person);
							console.log(n.firstname);
							console.log(o.firstname);

							/* this.person.fullname = this.person.firstname + this.person.lastname */
						},
						/* immediate: true, */
						deep: true // 可以深度检测到 person 对象的属性值的变化
					}
				}
			})
		</script>
	</body>
</html>

6.计算属性与监听的区别：

因为计算属性也是实时变化，那么监听和它什么区别呢

1.监听是在数据发生变化时才会触发对应的函数

2.计算属性在页面中使用了其结果或者依赖的数据发生变化的时候就会触发对应的函数

3.计算属性是基于变量的值进行缓存的，只要在他关联的变量值发生变化时计算属性就会重新执行，这意味着只要价格和数量信息不发生变化，计算属性就会返回之前的计算结果，而不必再次执行函数，而methods没有缓存，所以每次访问都会重新执行。

北栀໊ღ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
计算属性与侦听器

1.计算属性的基本使用使用语法拼接<h2>{{firstName+ "-" + lastName}}</h2> 使用方法方法<h2>{{getfullName()}}</h2> 使用计算属性<h2>{{fullName}}</h2><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>&lt
复制链接

扫一扫