Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别

发布时间:2021-02-25 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、 计算属性(computed

1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。

  例如:

<div id="app">
        {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
 </div>

  运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写。

  因此可改写为:

<body>
    <div id="app">
        {{ changewords }} // 渲染 不用写()
    </div>
</body>
<script>
    var vm = new Vue({
            el: "#app",data:{},     // 计算属性
            computed:{
                changewords(){
                    return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
                }
            }
     })
</script>

总结:

  1.变量不在 data中定义,而是定义在computed中,写法跟写方法一样,有返回值。函数名直接在页面模板中渲染,不加小括号 。

  2.根据传入的变量的变化 进行结果的更新。

  3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次 计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。

计算属性模糊查询的例子:

<body>
    <div id="app">
        <input type="text" v-model="mytext">
        <ul>
            <li v-for="data in datalistcom" :key="data">
                {{ data }}
            </li>
        </ul>
    </div>
</body>
<script>
     Vue({
        el: "#app"],mytext:''
        },computed:{
            datalistcom(){
                this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
            }
        }
    })
</script>

二、监听属性(watch)

上面说到计算属性的时候  初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。

当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch。

例子 :

 

<body>
    <div id="app">
        <p>单价:<input type="text" v-model="price"></p>
        <p>数量:<input type="text" v-model="number"></p>
        <p>计算金额:{{sum}}</p>
    </div>
</body>
<script>
var vm  =  Vue({
    el:"#app"1
    },//监听某一个值或者状态发生变化 变化就会触发watch 
    watch:{
         监听的参数的名字要一致
        price(){
            console.log(this.price)
            if(this.price*this.number < 1000 && this.number > 0){
                this.sum = this.number + 100
            }else{
                .number
            }
        },number(){
            console.log(.number
            }
        }
    }
})
</script>

 

计算属性 和属性监听的区别:

1.计算属性变量在computed中定义,属性监听在data中定义。

2.计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。

 

总结


以上是前端之家为你收集整理的Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别全部内容,希望文章能够帮你解决Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。