Vuejs全家桶系列(四)---计算属性

简介

计算属性也是用来存储数据,但具有以下几个特点:
+ a.数据可以进行逻辑处理操作
+ b.对计算属性中的数据进行监视

依赖性

计算属性是基于它的依赖进行更新的,只有在相关依赖发生改变时才能更新变化

<body> <div id="app"> <input type="text" v-model="msg"> <p>{{msg}}p> <p>{{reverseMsg}}p> <button @click="change">改变button> div> <script type="text/javascript"> new Vue({ el:'#app', data:{ msg:'hello world' }, computed:{ reverseMsg:function(){ console.log("computed"); return this.msg.split(' ').reverse().join( ); } }, methods:{ change(){ this.msg = "aaa bbb ccc"; } } }); script> body>

Vuejs全家桶系列(四)---计算属性_第1张图片

点击 “改变”按钮后
Vuejs全家桶系列(四)---计算属性_第2张图片

缓存性

计算属性是缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行

<body> <div id="app"> <input type="text" v-model="msg"> <p>{{msg}}p> <p>{{reverseMsg}}p> <button @click="touch">点击button> div> <script type="text/javascript"> new Vue({ el:'#app', data:{ msg:'hello world' }, computed:{ reverseMsg:function(){ console.log("computed action"); return this.msg.split(' ').reverse().join( ); } }, methods:{ touch(){ console.log(this.reverseMsg); } } }); script> body>

因为一开始触发了一次计算属性reverseMsg,所以打印出了一句computed action
Vuejs全家桶系列(四)---计算属性_第3张图片

点击了7次 “点击”按钮后

Vuejs全家桶系列(四)---计算属性_第4张图片

我们发现computed action没有再执行,只是输出了7次“world hello”

get和set

计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性
默认只有get,如果需要set,要自己添加
<body> <div id="app"> <input type="text" v-model="msg"> <p>{{msg}}p> <p>{{reverseMsg}}p> <button @click="changeGet">改变Getbutton> <button @click="changeSet">改变Setbutton> div> <script type="text/javascript"> new Vue({ el:'#app', data:{ msg:'hello world' }, computed:{ reverseMsg:{ get:function(){ console.log("computed get"); return this.msg.split(' ').reverse().join( ); }, set:function(data){ this.msg = data; } } }, methods:{ changeGet(){ this.msg = "aaa bbb ccc"; }, changeSet(){ this.reverseMsg = "111 222 333"; } } }); script> body>

这里需要注意一点:在set函数里,我们只能改变绑定数据的值,比如这里的this.msg,从而间接改变reverseMsg的值。

探究

应用

你可能感兴趣的:(Vuejs基础)