Vue---监视属性

最新推荐文章于 2023-10-11 21:08:23 发布

菜到极致就是渣

最新推荐文章于 2023-10-11 21:08:23 发布

阅读量180

点赞数 1

分类专栏： Web前端技术文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gaoqiandr/article/details/130611402

版权

Web前端技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、Vue的监视属性

二、深度监视

一、Vue的监视属性

这里我直接使用watch直接监视，其中的handler（）函数表示的是执行

watch：
（1）当监视的属性变化时，回调函数会自动调用，immediate属性为true则未修改之前也会立即执行一次
（2）监视属性必须存在才可以监视
（3）监视的两种写法
1：使用new Vue传入watch配置（例子使用的是这种）
2：通过v.$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>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
      <p>name={{name}}</p>
      <button @click="click">修改name的值</button>
    </div>
    <script>
      const v=new Vue({
        data(){
            return{
                name:true
            }
        },
        methods: {
            click(){
                this.name=!this.name
            }
        },
        //监听属性
        watch:{
            //监听name
            name:{
                //当name的值被调用的时候就会执行handler函数，函数中的newValue表示修改后的值
                //oldValue表示修改前的值
                handler(newValue,oldValue){
                   console.log('修改前的值=',oldValue,'修改后的值=',newValue)
                }
            }
        }
      })
      //Vue实例绑定容器
      v.$mount('#root')
    </script>
</body>
</html>

二、深度监视

深度监视：
（1）Vue的watch默认不监测对象内部的改变也就是多级情况
（2）将deep属性变为true可检测对象内部多级值的改变，deep默认是false

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <p>a={{name.a}}</p><br>
       <button @click="add1">a+1</button>
       <hr>
       <p>b={{name.b}}</p>
       <button @click="add2">b+10</button>
    </div>
    <script>
        const v=new Vue({
            data(){
                return{
                  name:{
                    a:1,
                    b:10
                  }
              }
            },
            methods:{
                add1(){
                    this.name.a+=1
                },
                add2(){
                    this.name.b+=10
                }
            },
            watch:{
                   //监听的是a的值,注意一定要加引号表示字符串
                // 'name.a':{
                //     handler(newValue,oldValue){
                //         console.log('a之前=',oldValue,'现在=',newValue)
                //     }
                // },
                 name:{
                    deep:true,
                    handler(){
                        console.log('name中的值被改变了')
                    }
                 }
            }
        })
        v.$mount("#root")
    </script>
</body>
</html>