Vue watch和computed对比

2022 年 07 月 30 日

1041 次浏览

暂无评论

892字数

Vue

用前面文章的姓名案例, 但是以watch来实现, 以此来对比

通过watch来监视first和last
当first和last发生改变时修改full的值

在计算属性中是通过retrurn返回值的形式来实现的

假设有一个需求是: 延时1秒后再显示, 这里就不能用计算属性了, 就必须使用watch

<body>
    <div id="root">
        姓:<input type="text" v-model="first"></input>
        名:<input type="text" v-model="last"></input><br>
        姓名:<span>{{full}}</span>
    </div>
</body>
<script type="text/javascript">

    new Vue({
        el:"#root",
        data:{
            first:"张",
            last:"三",
            full:'张-三'
        },
        watch:{
            first(newValue){
                this.full = newValue + '-' + this.last
            },
            last(newValue){
                this.full = this.first + '-' + newValue
            }

        }
        

    })


</script>

总结

computed和watch之间的区别:

computed能完成的功能,watch都可以完成
watch能完成的功能,computed不一定能完成. 例如: watch可以进行异步操作
两个重要的小原则
所有被vue管理的函数, 最好写成普通函数, 这样this的指向才是vm或组件实例对象
所有不被vue所管理的函数 (定时器的回调函数, ajax的回调函数 , promise的回调函数等) 最好写成箭头函数,这样this的指向才是vm 或组件实例对象