Vue2中的计算属性和侦听器的使用

目录

• 计算属性

---

• 侦听器

---

• 计算属性与侦听器的区别

计算属性

关键词:computed
用于通过计算改变原数据得到想要的数据效果

示例1

示例两个
1、反转字符串
2、首字母大写

	<div id="app">
        <h1>计算属性:{{msg}}</h1>
        <h1>{{msg2}}</h1>
        <!-- 首字母大写,其余小写 -->
        <!-- toUpperCase()转大写toLowerCase()转小写 -->
        <h1>原:{{zm}}</h1>
        <h1>{{zh}}</h1>
    </div>

var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello chain",
            zm:"nihaoya"
        },
        computed:{
            msg2:function(){
                return this.msg.split('').reverse().join('');
            },
            zh:function(){
                return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
            }
        }
    })

效果图:

成功~

示例2

写法二:放到方法中

	<div id="app">
        <h1>原:{{zm}}</h1>
        <h1>{{zh}}</h1><h2>{{zh}}</h2>
        <h1>方法:{{msg3()}}</h1><h2>方法:{{msg3()}}</h2>
    </div>

var vm=new Vue({
       el:"#app",
        data:{
            msg:"Hello chain",
            zm:"nihaoya"
        },
        computed:{
            zh:function(){
                console.log("计算中....");
                return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
            }
        },
        methods:{
            msg3:function(){
                console.log("方法运行中....");
                return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
            }
        }
    })

效果图:
区别：一眼便知

---

两者区别

调用方式不同,函数需要加()

放在computed中只会执行一次

放在methods中调用多少次就会执行多少次

相对来讲放在computed效率高!!!

侦听器

关键词:watch
响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

示例

<div id="app">
        <input type="text" v-model="firstName">
        <h2>{{fullName}}</h2>
    </div>

 var vm=new Vue({
        el:"#app",
        data:{
            firstName:"碰",
            lastName:"磕",
            fullName:""
        },
        watch:{
            firstName:function(val){
                this.fullName=val+this.lastName;
            },
            lastName:function(val){
                this.fullName=this.firstName+val;
            }
        }
    })

---

效果图:

通过修改firstName,fullName也会跟着改变~

计算属性与侦听器的区别

1. 计算属性的应用场景是计算的内容需要依赖多个属性的情况 侦听器的应用场景是计算的内容依赖一个属性的情况
2. 计算属性缓存结果时每次都会重新创建变量
   而侦听器是直接计算，不会创建变量保存结果
   也就意味着，数据如果会反复的发生变化，计算很多次的情况下，计算属性的开销将会更大，也就意味着这种情况不适合使用计算属性，适合使用侦听器
   那么，如果一个数据反复会被使用，但是它计算依赖的内容很少发生变化的情况下，计算属性会缓存结果，就更加适合这种情况。
3. computed的结果是通过return返回的，而watch不需要return。
4. watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数