[Vue]computed和watch的区别

computed 和 watch 之间的区别:
  1. computed 能完成的功能，watch 都可以完成。
  2. watch 能完成的功能，computed 不一定能完成，例如: watch 可以进行异步操作。
两个重要的小原则:
  1.所有被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象。
  2.所有不被 Vue 所管理的函数（定时器的回调函数、ajax 的回调函数等），最好写成箭头函数。这样 this 的指向才是 vm 或组件实例对象。

 

复制代码
<body>
    <div id="root">
        姓：<input type="text" v-model="first_name">
        <br>
        名：<input type="text" v-model="last_name">
        <br>
        <p>----&gt; {{ full_name }}</p>
        <p>----&gt; {{ full_name }}</p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#root",
        data: {
            first_name: '',
            last_name: '',
            full_name: ''
        },
        watch: {
            first_name(new_value, old_value) {
                console.log('first_name changed!');
                setTimeout(() => {
                    this.full_name = new_value + '-' + this.last_name
                }, 1000);
            },

            last_name(new_value, old_value) {
                console.log('last_name changed!');
                this.full_name = this.first_name + '-' + new_value
            },
        },
        methods: {
        }
    })
</script>
复制代码

 

posted @   夕苜19  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
· [Vue]计算属性computed
· [Vue]监视属性watch
· Vue-computed和watch的区别
· Vue监视属性和计算属性对比
· Vue watch computed和watch的区别
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛