vue.js2.0学习(二)——计算属性和监听属性

最新推荐文章于 2024-10-08 10:40:56 发布

原创最新推荐文章于 2024-10-08 10:40:56 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue的计算属性和监听属性

vue2.0学习之旅专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨Vue.js中计算属性的概念及使用方式，包括缓存机制、setter应用以及侦听属性的功能对比。通过实例展示了如何利用计算属性提高前端开发效率。

计算属性(computed)

实例:
<div id="example">
	<p>Orginal message:"{{message}}"</p>
	<p>Computed reversed message:"{{reversedMessage}}"</p>
<div>
var vm = new Vue({
	el:"#example",
	data:{
		message:"hello"
	},
	computed:{
		reversedMessage:function(){
			//'this'指向vm实例
			return this.message.split(''),reverse().join();
			
			//该方法的执行依赖于this.message的值是否发生改版,这里不能设置message的值,
			//例如:this.message="改变了"
			//但是获得message的值并进行一些操作
		}
	}
});

//data中的message的值一旦发生改变,计算属性(computed)中的reversedMessage方法就会执行

计算属性的缓存与方法(methods)

比较

  1.计算属性是基于他们的依赖关系进行缓存的,只有在依赖关系发生改变时他们才能更新变化.
  这意味着只要message没有发生变化,多次访问reverseMessage计算属性会立即返回之前的缓存结果,
  而不必再次执行函数,但是计算属性在页面渲染后就会执行一次

  2.方法总会在每次触发重新渲染时调用函数

计算属性的 setter

computed 属性默认只有get,不过在需要是也可以提供一个set
博主个人理解:计算属性可以有多个依赖属性

get: 获取依赖的属性值
set:设置依赖的属性值

//部分代码
computed:{
	num2:{
		get:function(){
			return this.num-1;
		},
		set:function(val){		//接收设置的值,这里的val是一个形参,可以自己设置成别的
			this.num = val;
		}
	}
}

vm.num = 111;          //这里会先执行set函数进行赋值,然后再执行get函数,结果为110
注意:set函数肯定是给其依赖的属性赋值

侦听属性(watch)

通过watch来响应数据的变化,适用于异步加载数据或开销较大的操作

var vm = new Vue({
  el:"#test",
  data:{
   name:"lk",
   user:{
      id:1001,
      name:"刘凯",
      age:23,
   }
  },
  watch:{
     name:function(newValue,oldValue){              //监视name属性
        console.log("修改之前的值:" + newValue,"修改之后的值:" + oldValue);
     },
     user:{                     //监视user对象
      handler:function(newValue,oldValue){     //注意这里的两个参数是对象
		//由于user是一个对象,是按引用访问的,所以这里的newValue和oldValue是两个对象
        console.log("修改之前的值:" + newValue.name,"修改之后的值:" + oldValue.name);
      },
      deep:true        //用来检测对象内部的属性变化,如果不加就是监测对象引用地址的改变
  }
 }
});
注意:此用法不能监视对象里具体的一个属性
	如果监视的是一个对象的话,那么回调函数里的参数就是监视的对象了