vue中的watch和computed之间的区别？

watch和computed之间的区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插值语法--姓名案例</title>

  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
computed与watch之间的区别？
  1。computed能完成的功能，watch都可以完成
  2。watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
  两个重要的原则：
  1。所有vue管理的函数，最好写成普通函数，这样this的指向才是vue或组件实例对象
  2。所欲不被vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数
  这样this的指向才是vm或者组件实例对象。

-->
<div id="root">
  姓：<input type="text" v-model="firstName"><br/>
  名：<input type="text" v-model="lstName"><br/>
  姓名：<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false;

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lstName:'三',
            fullName:'张-三'
        },
        watch:{
            firstName(val){
                setTimeout(()=>{
                    this.fullName=val+'-'+this.lstName;
                },1000);
            },
            lstName(val){
                this.fullName=this.firstName+'-'+val;
            }
        }
    })
</script>
</html>
posted @ 2022-06-08 11:36  King-DA  阅读(30)  评论(0)    收藏  举报