vue 计算属性和监听器

一、计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div>
    {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

<div id = 'com'>
        <h3>{{msg}}</h3>
        <p>{{currentMsg}}</p>
        <button @click='clickHandler'>更改</button>
</div>

var com = new Vue({
            el:'#com',
            data:{
                msg:'学习computed'
            },
            methods:{
                clickHandler(){
                    this.msg = '我更改了数据'
                }

            },
            computed:{
                currentMsg(){
                    // computed方法中默认只有getter

                    return this.msg
                 }
            }
        })

computed是计算属性,vue会一直监听着里面的变量,如果你的变量发生了变化,computed会立刻执行getter方法

重新渲染到页面上.

这也是vue的核心思想数据驱动视图

计算属性默认只有getter,当然如果你需要也可以设置setter

  var com = new Vue({
            el:'#com',
            data:{
                msg:'学习computed'
            },
            methods:{
                clickHandler(){
                    this.currentMsg = '我更改了数据'
                }
            },
            computed:{
                currentMsg:{
                   set : function(newValue){
                      this.msg = newValue;
                   },
                   get : function(){
                     return this.msg;
                   }
                 }
            }
        })   

示例一:轮播图:

<div id="app">
    <div>
        <img :src="currentImg" alt="" @mouseenter="stoplunbo()" @mouseleave="startlunbo()">
        <ul>
            <li v-for="(item,index) in ImgAttr" @click="liChangeImg(item)">{{index+1}}</li>
        </ul>
    </div>
    <button @click="nextImg()">下一张</button>
    <button @click="prevImg()">上一张</button>

</div>

   var app = new Vue({
        el:'#app',
        //所有的数据都放在数据属性里
        data:{
            currentNum:0,
            currentImg:'./1.jpg',
            str:'<p>哈哈哈</p>',
            ImgAttr:[
                {id:1,src:'./1.jpg'},
                {id:2,src:'./2.jpg'},
                {id:3,src:'./3.jpg'},
                {id:4,src:'./4.jpg'}
            ],
            Timer:null,

        },
        created(){
            this.Timer = setInterval(this.nextImg,2000)
        },
        methods:{
            //单体模式
            clickHandler(){
                //this 就是app实例化对象
                this.show=!this.show;
            },
            ChangeColor(){
                this.isRed=!this.isRed;
            },
            nextImg(){
                if (this.currentNum==this.ImgAttr.length-1 ){
                    this.currentNum=-1;
                }
                this.currentNum++;
                this.currentImg=this.ImgAttr[this.currentNum].src;
            },
            liChangeImg(item){

                this.currentNum=item.id-1;
                this.currentImg=item.src;
            },
            stoplunbo(){
                clearInterval(this.Timer);
            },
            startlunbo(){
            this.Timer = setInterval(this.nextImg,2000)
            },
            prevImg(){
                if (this.currentNum == 0){
                    this.currentNum=this.ImgAttr.length-1;
                }
                this.currentNum--;
                this.currentImg=this.ImgAttr[this.currentNum].src;

            }
        }
    })

当然这里没有用到计算属性,如果用到了计算属性,也可以进行优化:

示例二:

<div id="app">
    <div>{{showli}}</div>
    <ul>
        <li v-for="(item,index) in songs" @click="changename(index)">
            <p>name:{{item.name}} author:{{item.author}}</p>
        </li>
    </ul>
    <button @click="additem()">additem</button>
</div>

<script>
    var songs=[
        {'id':1,'src':'1.mp3','author':'chen1','name':'桃花朵朵开1'},
        {'id':2,'src':'2.mp3','author':'chen2','name':'桃花朵朵开2'},
        {'id':3,'src':'3.mp3','author':'chen3','name':'桃花朵朵开3'},
        {'id':4,'src':'4.mp3','author':'chen4','name':'桃花朵朵开4'}
    ];

    var app=new Vue({
        el:'#app',
        data:{
            songs:songs,
            currentIndex:0,
        },
        methods:{
            changename(index){
                this.currentIndex=index;
            },
            additem(){
                this.songs.push({'id':5,'src':'5.mp3','author':'chen5','name':'桃花朵朵开5'})
            }
        },
        computed:{
            showli(){
                return this.songs[this.currentIndex].name
            }
        }
    })
</script>

这里需要说的是,在computed里面的变量,如果发生了改变,那么就会执行相应的getter,在驱动视图的改变.