Vue的计算属性,方法和监听器

这是我参与更文挑战的第11天,活动详情查看: 更文挑战

1.计算属性

当要相加两个数据时,可能通常会想到要用插值表达式来实现

比如 要显示一个数据的组合

<div id="app">
    {{boy+" "+girl}}
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            boy:"an",
            girl:"quan",
        }
    })
</script>

页面上显示的就是

image-20200924165542164

但是这样会很麻烦,所以在Vue中有一个东西叫计算属性,上代码

在下面的代码中我们引入了计算属性computed 为了方便后面理解我们在计算属性中console.log一个信息“计算了一次”

<div id="app">
    {{boy+" "+girl}}
    <!-- 使用了计算属性 -->
    {{boygirl}}
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            boy:"an",
            girl:"quan",
            age:21
        },
        computed:{
            boygirl: function(){
                console.log("计算了一次");
                return this.boy + " " + this.girl;
            }
        }
    })
</script>           

image-20200925101848802

计算属性非常重要的一点是内置缓存,机制是 当计算属性(boygirl)依赖的属性(boy和girl)不发生变化时,就不会发生变化,会一直使用上一次计算的结果,这样会提高性能,也就是说当你修改变量重新渲染页面时,只要上面代码中的boy和girl没有发生改变,则计算就不会被执行,例子如下,当改变age的时候,页面重新渲染,但是计算属性并没有被触发,只有在改变计算属性依赖的boy属性时计算属性被触发并输出了”计算了一次“

image-20200925102415601

2.方法

用方法实现上面的效果

<div id="app">
    {{boy+" "+girl}}
    <!-- 使用了计算属性 -->
    {{boygirl()}}

</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            boy:"an",
            girl:"quan",
            age:21
        },
        methods:{
            boygirl:function(){
                return this.boy + " " +this.girl;
            }
        }
    })
</script>

这样实现的效果是相同,但是有一个问题是方法是没有缓存的,当重新渲染页面的时候,方法也会再次执行。所以当可以用计算属性完成时优先选择计算属性,因为效率更高

3.监听器

只有设置过侦听的属性发生变化的时候,才会触发计算,和computed计算属性很像,也是有一个缓存在里面,只不过computed计算属性是依赖的变量(也就是计算需要用到的变量)发生变化时计算,而监听器是监听的变量发生变化时计算。

<div id="app">
    {{boy+" "+girl}}
    <!-- 使用了计算属性 -->
    {{boygirl+age}}

</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            boy:"an",
            girl:"quan",
            boygirl:"an quan",
            age:21
        },
        watch: {
            boy: function(){
                console.log("boy计算了一次");
                this.boygirl = this.boy + "" +this.girl;
            },
            girl: function(){
                console.log("girl计算了一次");
                this.boygirl = this.boy + "" +this.girl;
            },
        }	
    })
</script>

image-20200925111628919

watch相对computed方法较复杂,所以如果都能用还是推荐计算属性computed。

计算属性的getter和setter

之前我们说的计算属性默认其实就只有get

每当value改变的时候就执行函数set

值改变时先set后执行get