1、watch

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性

html:

            <div>
                <input type="text" v-model="firstAge" />
                <input type="text" v-model="lastAge" />
                <input type="text" v-model="sumAge" />
            </div>

js:

return{
            firstAge:'10',
            lastAge:'20',
            sumAge:'10 20'
}

watch:{
        firstAge: function(val){
            this.sumAge = val + this.lastAge;
        },
        lastAge: function(val){
            this.sumAge = this.firstAge + val;
        }
      }

2、computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。

js:

computed:{
        sumAge:function(){
                return this.firstAge + ' ' + this.lastAge;
            
        }
 }


总结:

计算属性是计算属性(computed),观察是观察( watch )。

计算属性顾名思义就是通过其他变量计算得来的另一个属性,fullName在它所依赖firstName,lastName这两个变量变化时重新计算自己的值。

另外,计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。

而观察watch是观察一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以检测页码执行获取数据的函数。

详细查看文档,多研究文档资料  https://cn.vuejs.org/





Logo

前往低代码交流专区

更多推荐