Vue中 watch 和 computed 之间的对比

watch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.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>
        var vm =new Vue({
            el:'#app',
            data:{
                firstName:'',
                lastName:'',
                fullName:''
            },
            methods:{
                
            },
            watch:{//使用这个 属性 可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数
                firstName:function(newVal,oldVal){
                    this.fullName = newVal + this.lastName
                },
                lastName(newVal){
                    this.fullName = this.firstName + '~' + newVal
                }
            }
        })
    </script>
</body>
</html>

一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某个特定数据的变化，从而进行业务逻辑操作
使用这个 属性 可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数

computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstName"/>+
        <input type="text" v-model="lsatName"/>=
        <input type="text" v-model="fullName"/>
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                firstName:'',
                lsatName:'',
                
            },
            methods:{
              
                
            },
            computed:{//在 computed 中，可以定义一些属性，这些属性叫做计算属性，计算属性的本质就是一个方法
            //只不过，我们在使用这些计算属性的时候，是把他们的名称直接当作属性来使用的，并不会把计算属性当作方法去调用
                
                //1注意：计算属性，在引用的时候，一定不要加（）去调用，直接把他当属性去使用 就好
                //2注意：只要计算属性这个function内部，所用到的任何data中的数据 发生了变化，就会立即重新计算 这个计算属性的值
                //3注意：计算属性的求职结果，会被缓存起来，方便下次直接使用；如果计算属性方法中以来的任何数据都没有发生过变化，则不会对计算属性求值                
                fullName:function(){
                    return this.firstName +'-'+ this.lsatName
                }

            }
        })
    </script>
</body>
</html>

在 computed 中，可以定义一些属性，这些属性叫做计算属性，计算属性的本质就是一个方法只不过，我们在使用这些计算属性的时候，是把他们的名称直接当作属性来使用的，并不会把计算属性当作方法去调用
     1注意：计算属性，在引用的时候，一定不要加（）去调用，直接把他当属性去使用 就好
     2注意：只要计算属性这个function内部，所用到的任何data中的数据 发生了变化，就会立即重新计算 这个计算属性的值
     3注意：计算属性的结果，会被缓存起来，方便下次直接使用；如果计算属性方法中以来的任何数据都没有发生过变化，则不会对计算属性求值

Vue中 watch 和 computed 之间的对比

watch

computed

猜你喜欢