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的结合体；