vue学习的第四天

最新推荐文章于 2024-10-06 22:38:44 发布

Kuala_

最新推荐文章于 2024-10-06 22:38:44 发布

阅读量118

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/Kuala_/article/details/126073141

版权

本文详细介绍了Vue.js中监视属性（watch）的两种形式，包括基本监视和深度监视，并提供了相应的代码示例。同时，对比了计算属性与监视属性的区别，强调了计算属性在功能上的涵盖性以及watch对于异步操作的支持。此外，还介绍了watch的简写形式以及在处理函数中this指针的注意事项。

摘要由CSDN通过智能技术生成

监视属性

有两种形式

 const vm = new Vue({
         el:'#root',
         data: {
          isHot:true
         },
         computed:{
            info(){
               return this.isHot?"炎热":"凉爽"
            }
         },
         methods: {
           changeWeather(){
            this.isHot = !this.isHot
           }
         },
         watch:{
         isHot:{
               immediate:true,
               handler(newValue,oldValue){
                   console.log('isHot被修改了',newValue,oldValue)
             }
          }
        }
        })

  const vm = new Vue({
         el:'#root',
         data: {
          isHot:true
         },
         computed:{
            info(){
               return this.isHot?"炎热":"凉爽"
            }
         },
         methods: {
           changeWeather(){
            this.isHot = !this.isHot
           }
         },
        })
        vm.$watch('info',{
                immediate:true,
                handler(newValue,oldValue){
                    console.log('info被修改了',newValue,oldValue)
                }
    })
    </script>

深度监视

Vue中的watch默认不监测对象内部值的改变（一层）
配置deep：true可以监测对象内部值改变（多层）

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">点击切换天气</button>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
    <script>
    const vm = new Vue({
         el:'#root',
         data: {
          isHot:true,
          numbers:{
           a:1,
           b:1
          },
         },
         computed:{
            info(){
               return this.isHot?"炎热":"凉爽"
            }
         },
         methods: {
           changeWeather(){
            this.isHot = !this.isHot
           }
         },
         watch:{
            numbers:{
                deep:true,
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            }
         }
        })
       
    </script>
</body>

简写形式

只有一个配置的时候，使用简写形式

有两种简写形式

 正常写法
          watch:{
            numbers:{
                deep:true,
               handler(newValue,oldValue){
                   console.log('isHot被修改了',newValue,oldValue)
               }
           }
        }
         简写
       watch:{
       isHot(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    }

 //正常写法
    //    vm.$watch('isHot',{
    //             deep:true,
    //             handler(newValue,oldValue){
    //                 console.log('isHot被修改了',newValue,oldValue)
    //             }
    //    })
  //简写
       vm.$watch('isHot',function(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
       })