监听属性watch

静Yu
1,368 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

之前我们介绍了computed是计算属性，今天是一个全新的内容监视属性，也可以叫做监听属性。

修改天气案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h2>今天是个{{info}}</h2>
    <button @click="change">改变天气</button>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            ishot:true
        },
        computed: {
           info(){
               return this.ishot? '晴天' : '雨天'
           }
        },
        methods: {
            change(){
                this.ishot=!this.ishot
            }

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

引入一个新的小案例，实现的效果是点击按钮，可以改变天气是晴天还是雨天。实现方法是引入了computed计算属性和methods方法。计算属性中的返回值是一个三目运算符，返回ishot是晴天还是雨天。 为什么要在前面加this，因为this指的是vm实例。button按钮的点击函数是引入了一个change()函数，函数修改ishot为当前值的相反值。

image.png

还可以修改点击事件为更简单的方法，直接将change函数删掉，将点击事件改为

<button @click="ishot=!ishot">改变天气</button>

监听属性watch的基本含义

引入这个案例之后我们就可以开始学习监视属性了，监视这个案例中的数据变化。监听属性watch也是vue实例的一个选项，使用watch监听器的方法可以检测某个数据是否发生了改变，如果发生改变可以执行一系列业务逻辑操作。

watch:{
    ishot:{
        handler(newValue,oldValue){
            console.log('ishot被修改了',newValue,oldValue)
        }
    }
}

这里的watch就是监听属性，这里监听的是ishot，ishot改变之后，就会在控制台输出‘ishot被修改了’。newValue就是新的值，oldValue就是旧的值。

总结下来，监听属性主要是用来监听某个数据的变化，从而去执行某些具体的回调业务逻辑，但不仅仅局限于返回数据。还有需要注意的点是监视的属性必须存在才能进行监视。

avatar
文章
阅读
粉丝