zoukankan      html  css  js  c++  java
  • 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>
        var vm = new Vue({
            el: "#app",
            data:{
                datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
                mytext:''
            },
            computed:{
                datalistcom(){
                    return 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  = new Vue({
        el:"#app",
        data:{
            price:100,
            number:1,
            sum:0
        },
        //监听某一个值或者状态发生变化 变化就会触发watch 
        watch:{
            // 监听的参数的名字要一致
            price(){
                console.log(this.price)
                if(this.price*this.number < 1000 && this.price*this.number > 0){
                    this.sum = this.price*this.number + 100
                }else{
                    this.sum = this.price*this.number
                }
            },
            number(){
                console.log(this.price)
                if(this.price*this.number < 1000 && this.price*this.number > 0){
                    this.sum = this.price*this.number + 100
                }else{
                    this.sum = this.price*this.number
                }
            }
        }
    })
    </script>

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

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

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

  • 相关阅读:
    OpenSSL使用1(用OpenSSL生成自签名证书在IIS上搭建Https站点)(用于iOS的https访问)
    dotnet调用node.js写的socket服务(websocket/socket/socket.io)
    Jenkins中deploy插件的deploy war/ear to a container与deploy artifacts to maven reepository区别
    Mac下启动MySQL出现错误“the /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' user”解决
    Mac下配置node.js环境(Mac 10.12)
    brew udpate出现错误“/usr/local is not writable.”的问题解决
    Linux快速查看某条命令的版本和存放的位置(ls -l `which mvn`)
    Mac下node.js卸载方法收集
    Mac下安装包管理平台Homebrew(Mac 10.12)
    Java出现“Error configuring application listener of class...”类似的错误解决
  • 原文地址:https://www.cnblogs.com/treeskyer/p/13456292.html
Copyright © 2011-2022 走看看