【Vue基础】监听属性watch

最新推荐文章于 2024-06-12 12:28:10 发布

一颗小梨子吖

最新推荐文章于 2024-06-12 12:28:10 发布

阅读量340

点赞数

分类专栏： Vue基础文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45662637/article/details/121016465

版权

Vue基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue监听属性是 watch，我们可以通过 watch 来响应数据的变化。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch监听</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备容器--> 
<div id="root">
    <h2>今天也是{{mood}}的一天！！！</h2>
    <button @click="changeMood">改变心情</button>
</div>
</body>
<script type="text/javascript">
   Vue.config.productionTip = false //阻止vue生成生产提示。

   //创建实例
  var vm = new Vue({
       el:'#root',
       data:{
           isHappy:true,
       },
       computed:{
           mood(){
               return this.isHappy? '超级开心':'很难过'
           },
        
       },
       methods:{
               changeMood(){
                   this.isHappy = !this.isHappy
               }
           },
        watch:{
            isHappy:{//对isHappy属性进行监听
              handler(newValue,oldValue) {//当isHappy属性发生变化时调用
               console.log('isHappy发生了改变',newValue,oldValue)
              }
           },
           mood:{//watch也可以对计算属性进行监听,对mood属性进行监听
              handler(newValue,oldValue) {
                  console.log('mood发生了改变',newValue,oldValue)
              }
            }
        }
     
   })
</script>
</html>

！ watch可以对原有属性进行监听，也可以对计算属性进行监听。当所监听的属性发生变化时，回调函数被调用，回调函数有变化后的值和变化前的值两个参数。

运行结果：

监视有两种写法：可以通过.new Vue时传入watch配置（如上）；可以通过vm.$watch（如下），效果一样。

 // $watch 是一个实例方法
   vm.$watch('isHappy', function (newValue, oldValue) {
    console.log('isHappy发生了改变',newValue,oldValue)
   }, {
       deep: true,//开启深度监视
       immediate: true,//初始化时立即调用一次回调函数
   });

deep和immediate不需要时可以不配置。

一颗小梨子吖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue基础】监听属性watch

Vue监听属性是watch，我们可以通过 watch 来响应数据的变化。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w...
复制链接

扫一扫