vue教程-计算属性(computed) vs 侦听属性(watch)

区别

  • 计算属性(computed)的函数必须有返回值;侦听属性(watch)不需要

  • 计算属性(computed)能实现的功能,侦听属性(watch)都能实现,可能会啰嗦些

  • 侦听属性(watch)能实现的功能,计算属性(computed)不一定能实现,可以实现异步

侦听属性例子

侦听属性可以实现异步功能(计算属性无法实现),如:延时1秒后执行

<div id="app">
    输入出生年份:<input type="text" v-model="birthday"><br>
    年龄:<span>{{age}}</span>(表达式只写监听属性名,会自动调用 监听方法)<br>
    年龄:<span>{{age}}</span><br>
    年龄:<span>{{age}}</span><br>
    年龄:<span>{{age}}</span>(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次监听方法)
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>


<script>
    var vm = new Vue({
        el: '#app',
        data:{
            birthday:'',
            age:''
        },
        watch:{
            birthday:function(newValue,oldValue){
                setTimeout(() => {
                    console.log("birthday值从 "+oldValue+" 改为 "+newValue)
                    this.age=new Date().getFullYear() - this.birthday.substr(0,this.birthday.indexOf("-"))
                }, 1000);
            }
        }
    })

</script>

原文出处:https://malaoshi.top/show_1IX2eveZiMXw.html