vue中的计算属性computedt与侦听器watch

写vue也有一段时间了，今天和大家分享一下vue中的计算属性和侦听器watch

1.什么是计算属性
计算属性就是当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。来看图一的代码。你也可以简单理解为vue主要注重于视图层，尽可能不在插值表达式添加复杂的逻辑。

<div id="app">
            {{firstName+lastName}}
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    firstName:"huang",
                    lastName:"kafei"
                }

            })
        </script>

在上述的代码中,我们在插值表达式写了一元运算符，
这是不符合VUE的预期的，所以我们在这里需要用到计算属性computed。
其实一般情况，我也会把一些关于逻辑的代码都写在computed中。

<div id="app">
            {{fullName}}
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    firstName:"huang",
                    lastName:"kafei"
                },
                computed:{
                    fullName:function(){
                        return this.firstName+" "+this.lastName
                    }
                }

            })
        </script>

我们在vue实例中，添加了computed属性，它显示出来结果还是"huangkafei",但这种实现方式是vue官方推荐的做法。

2.计算属性与methods不同。

我们修改一下上述代码。

<div id="app">
            {{fullName()}}
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    firstName:"huang",
                    lastName:"kafei"
                },
                methods:{
                    fullName:function(){
                        return this.firstName+this.lastName
                    }
                }   
            })
        </script>

我们在这里就不采用computed这个属性，而是使用methods这个属性，我们也发现，
这时候的显示效果是一样的。但真的一样吗？
我们在fullName函数内部添加console.log(1)和在data属性中添加age="25";代码如下。

<div id="app">
            {{fullName()}}
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    firstName:"huang",
                    lastName:"kafei",
                    age:25
                },
                methods:{
                    fullName:function(){
                        console.log(1)
                        return this.firstName+this.lastName
                    }
                }

            })
        </script>

我们现在打开控制台,输入vm.age=30

这个是我们发现,就是我是不改变,"firstName"和"lastName"的值，它都会输出1，
因为我们的methods放的是函数,这里就相当于函数执行的一个过程。

因为这是一个函数执行，你刷新一次当然会输出。OK，那么我们换成computed.

<div id="app">
            {{fullName}}
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    firstName:"huang",
                    lastName:"kafei",
                    age:25
                },
                computed:{
                    fullName:function(){
                        console.log(1)
                        return this.firstName+this.lastName
                    }
                }


            })
        </script>

我们在输入vm.age=30，这时候我们发现，控制台并没有输出1
这是因为，我们的computed中有个计算属性缓存的说法。它只有在"firstName"和"lastName"其中一个发生改变才会输出1。
所以我们在平时写VUE的时候，能用computed的尽量使用。

3.侦听属性(watch)

Vue提供了一种更统一的方式来观察和响应Vue实例上的数据变动：侦听属性。
当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时，建议使用watch

<div id="app">
            {{fullName}}
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    firstName:"huang",
                    lastName:"kafei",
                    fullName:"huangkafei",
                    age:28
                },
                watch:{
                    firstName:function(){
                        this.fullName = this.firstName+this.lastName
                    },
                    lastName:function(){
                        this.lastName = this.firstName+this.lastName
                    }
                }
            })
        </script>

通过控制台的调试,我们可以发现watch与computed是有共同的特点，都是可以实现计算属性的缓存。
但是，watch方式比较啰嗦，我们一般首选还是computed。

vue中的计算属性computedt与侦听器watch

猜你喜欢