Vue的watch和computed屬性

時間 2019-11-16

標籤 vue watch computed 屬性简体版

原文原文鏈接

Vue的watch屬性

Vue的watch屬性能夠用來監聽data屬性中數據的變化javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <script src="lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="firstname" />
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    firstname:"",
                    lastname:""
                },
                methods:{},
                watch:{
                    firstname:function(){
                        console.log(this.firstname)
                    }
                }
            })
        </script>
    </body>
</html>

能夠從上述代碼中實踐得知，輸入框內的值變化多少次，控制檯就會打印多少次css

同時還能夠直接在監聽的function中使用參數來獲取新值與舊值html

watch:{
                    firstname:function(newValue,OldValue){
                        console.log(newValue);
                        console.log(OldValue);
                    }
                }

其中第一個參數是新值，第二個參數是舊值vue

同時Watch還能夠被用來監聽路由router的變化，只是這裏的監聽的元素是固定的java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <script src="lib/vue-router-3.0.1.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <div id="app">
            <!--
                因爲Vue-router的hash匹配原則因此咱們須要在原定義的路徑上加一個#號
            -->
<!--            <a href="#/login">登陸</a>
            <a href="#/register">註冊</a>-->
            <router-link to="/login" tag="span">登陸</router-link>
            <router-link to="/register">註冊</router-link>
            <router-view></router-view>
        </div>
    </body>
    <script>
        var login={
            template:'<h1>登陸組件</h1>'
        }
        var register={
            template:'<h1>註冊組件</h1>'
        }
        var routerObj = new VueRouter({
            routes:[
            //此處的component只能使用組件對象，而不能使用註冊的模板的名稱
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        })
        var vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
                
            },
            router:routerObj,//將路由規則對象註冊到VM實例上
            watch:{
                '$route.path':function(newValue,OldValue){
                        console.log(newValue);
                        console.log(OldValue);
                }
            }
        })
    </script>
</html>

計算屬性Computed的做用

computed屬性的做用與watch相似，也能夠監聽屬性的變化vue-router

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <script src="lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="firstname" />
            <input type="text" v-model="lastname" />
            <input type="text" v-model="fullname" />
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    firstname:"",
                    lastname:""
                },
                methods:{},
/*                watch:{
                    firstname:function(newValue,OldValue){
                        console.log(newValue);
                        console.log(OldValue);
                    }
                }*/
                computed:{
                    fullname:function(){
                        return this.firstname +"-"+this.lastname
                    }
                }
            })
        </script>
    </body>
</html>

只是他會根據他依賴的屬性，生成一個屬性，讓vm對象能夠使用這個屬性緩存

methods,watch,computed的區別

computed屬性的結果會被緩存，除非依賴的響應式屬性變化纔會從新計算。主要看成屬性來使用；
methods方法表示一個具體的操做，主要書寫業務邏輯；
watch一個對象，鍵是須要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操做；能夠看做是computed和methods的結合體；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。