computed和watch区别和应用场景

computed：计算属性不需要在data中定义，而且必须有return

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
    <div id ="root">
        姓：<input type="text" v-model:value="firstName"><br/><br/>
        名：<input type="text" v-model:value="secondName"><br/><br/>
        姓名:<span>{
   
   {fullName}}</span>
    </div>

   <script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时产生提示

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            secondName:'三',
        },
        computed:{
            // 简写
            fullName(){
                return this.firstName+'-'+this.secondName
            }
        }
    })
    
    /*
    	    计算属性具有缓存，计算属性是基于他们的依赖进行缓存的，
        只有它的相关依赖发生改变时，才会重新求值，只要计算属性的依赖没有改变，
        那么调用它就会直接返回之前的缓存，同时computed对其中变量的依赖是多个时，
        只要其中一次发生了变化就会触发这个函数
    	    应用场景：当一个变量的值受多个变量的影响
    */
   </script>
</body>
</html>

watch:监听器watch中的值需要在data中定义，且函数有参数，newValue和oldValue

  <script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时产生提示

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            secondName:'三',
            fullName:'张-三'
        },
        watch:{
            firstName(newValue){
                setTimeout(()=>{
                    this.fullName = newValue+'-'+this.secondName
                },1000)//监听watch可以异步进行
            },
            secondName(newValue){
                this.fullName = this.firstName+'-'+newValue
            },
            immediate:true,//代表watch里面声明了firstName之后立即先去执行其他的函数
            deep:true//深度监听
        }
    })
   </script>
    //watch的依赖是单个的，它每次只可以对一个变量进行监控，并且对于computed属性，watch可以异步的而computed不可以

watch和computed都是以vue的依赖追踪机制为基础

computed:计算属性是依赖的值改变会重新执行函数，取返回值做最新的结果，所以里面不能异步返回结果。计算属性基于响应式依赖进行缓存，如果任意一个值发生变化，它调用的就是上次计算缓存的数据。

watch:computed和watch都是依赖数据发生变化后而执行的操作，但是计算属性初始化的时候就可以被监听到并且计算，但是watch是发生改变的时候才会触发。当需要在数据变化时执行异步或开销较大，可以用watch。

computed能完成的功能，watch都能完成;watch能完成的，computed不一定能完成

computed和watch区别和应用场景

猜你喜欢