0
点赞
收藏
分享

微信扫一扫

19.Vue的深度监视

E_topia 2022-09-21 阅读 51
vue.jsjavascript前端html编程语言


目录

​​1.小案例引入​​

​​2.监视多级结构中某个属性的变化​​

​​3.监视多级结构中任意属性的变化​​

​​4.总结​​

这一节我们再讲一下监视中的扩展点，深度监视。

​

19.Vue的深度监视_javascript

​

那么这里说的深度是什么意思呢？我们接下来还是通过小案例的方式帮助大家理解。

1.小案例引入

<!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>天气案例</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <h2>今天天气很{{info}}</h2>
       <button @click = "changeWeather">切换天气</button>
       <hr>
       <h3>a的值是:{{numbers.a}}</h3>
       <button @click="numbers.a++">点我让a+1</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    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:{
            info:{
                immediate:true,
                //handler什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                    console.log('info被修改了',newValue,oldValue)
                }
            }
        }
    })
    
</script>
</html>

实现效果：

19.Vue的深度监视_html_02

2.监视多级结构中某个属性的变化

接下来提出我们的需求，这里希望我们能够监测到numbers中a的变化，而不监测b的变化。

写法如下：

<!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>天气案例_深度监视</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <h2>今天天气很{{info}}</h2>
       <button @click = "changeWeather">切换天气</button>
       <hr>
       <h3>a的值是:{{numbers.a}}</h3>
       <button @click="numbers.a++">点我让a+1</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    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:{
            info:{
                immediate:true,
                //handler什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                    console.log('info被修改了',newValue,oldValue)
                }
            },
            'numbers.a':{
                handler(newValue,oldValue){
                    console.log('a被修改了',newValue,oldValue)
                }
            }

        }
    })
    
</script>
</html>

实现效果：

19.Vue的深度监视_html_03

3.监视多级结构中任意属性的变化

如果我们想让多级结构numbers中的任意一个属性不论a或者b发生变化的时候都能监测到，该怎么做？

刚刚我们监测numbers中的a用的是这样的方式：

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

这时候就会有人说我们可以用刚刚的方式再写一个'numbers.b'。那如果numbers中有几百个属性，我们都想监测的话，我们也写几百个这样的配置嘛？显然这并不是最好的实现方式。

那么这个时候又有人会说，我们如果想监测numbers中的任务属性变化就可以这样做：

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

那这样真的可行嘛？我们可以尝试一下：

<!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>天气案例_深度监视</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <h2>今天天气很{{info}}</h2>
       <button @click = "changeWeather">切换天气</button>
       <hr>
       <h3>a的值是:{{numbers.a}}</h3>
       <button @click="numbers.a++">点我让a+1</button>
       <hr>
       <h3>b的值是:{{numbers.b}}</h3>
       <button @click="numbers.b++">点我让b+1</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    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:{
            info:{
                immediate:true,
                //handler什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                    console.log('info被修改了',newValue,oldValue)
                }
            },
            numbers:{
                handler(newValue,oldValue){
                    console.log('numbers被修改了',newValue,oldValue)
                }
            }

        }
    })
    
</script>
</html>

实现效果：

19.Vue的深度监视_html_04

我们可以看到无论a或者b怎么变化，控制台并没有输出，numbers并没有被监测到。这是为什么呢？

这是因为我们上面的写法确实是在监视numbers,但Vue不会再帮我们去监视numbers里面的东西，他监视的是numbers整个整体。如果想监测到numbers的变化，就需要将整个numbers的值替换掉，才能监测到，我们接下来证明一下：

<!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>天气案例_深度监视</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <h2>今天天气很{{info}}</h2>
       <button @click = "changeWeather">切换天气</button>
       <hr>
       <h3>a的值是:{{numbers.a}}</h3>
       <button @click="numbers.a++">点我让a+1</button>
       <hr>
       <h3>b的值是:{{numbers.b}}</h3>
       <button @click="numbers.b++">点我让b+1</button>
       <button @click="numbers = {a:666,b:999}">彻底替换掉numbers</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    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:{
            info:{
                immediate:true,
                //handler什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                    console.log('info被修改了',newValue,oldValue)
                }
            },
            numbers:{
                handler(newValue,oldValue){
                    console.log('numbers被修改了',newValue,oldValue)
                }
            }

        }
    })
    
</script>
</html>

实现效果：

19.Vue的深度监视_vue.js_05

我们可以看到当numbers被整体修改的时候的确能监测到了。但是我们的需求是希望能检测到numbers里面属性的变化。

其实我们通过一个配置项deep:true就可以实现了，而这个配置默认是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>天气案例_深度监视</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
       <h2>今天天气很{{info}}</h2>
       <button @click = "changeWeather">切换天气</button>
       <hr>
       <h3>a的值是:{{numbers.a}}</h3>
       <button @click="numbers.a++">点我让a+1</button>
       <hr>
       <h3>b的值是:{{numbers.b}}</h3>
       <button @click="numbers.b++">点我让b+1</button>
       <button @click="numbers = {a:666,b:999}">彻底替换掉numbers</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    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:{
            info:{
                immediate:true,
                //handler什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                    console.log('info被修改了',newValue,oldValue)
                }
            },
            numbers:{
                deep:true,
                handler(newValue,oldValue){
                    console.log('numbers被修改了',newValue,oldValue)
                }
            }

        }
    })
    
</script>
</html>

实现效果：

19.Vue的深度监视_javascript_06

我们可以看到加入deep配置后，无论a或者b发生变化都可以监测到。

所以deep:true一配置之后，深度监视就被开启了。

4.总结

深度监视：

        1.Vue中的watch默认不监测对象内部值得改变（一层）

        2.配置deep:true可以监测对象内部值改变（多层）

备注：

        1.Vue自身可以监测对象内部值的改变，只是watch的这种监测默认不可以

        2.使用watch时根据数据的具体结构，决定是否使用深度监视。

        3.为什么Vue默认不开启watch的深度监视呢? 是为了效率问题，如果需要的话，可以手动开启。

举报

相关推荐

Vue-计算属性、监视属性、深度监视、计算属性与监视属性对比

vue.js前端javascript

深度监视（watch）

html多级数据系统/运维

watch监视问题和vue3的监视问题

vue.js

18.Vue的监视属性

vue.jsjavascripthtml前端开发

【Vue2.0】—Vue监视数据的原理（五）

vue.js前端数组监视数据默认值Linux系统/运维

20.Vue监视的简写形式

vue.jsjavascripthtml编程语言

Vue 监视属性-天气案例

vue初始化数据多级系统/运维

【Vue】全系列Vue教程-数据监视

数据Vue响应式Vue.js前端开发

Vue的计算属性和监视属性

回调函数数据赋值Vue.js前端开发

【Vue】基础系列（九）监视属性-天气案例-对methods掌握-语法糖掌握-computed掌握-watch及深度监视

csscss3html初始化vue.jsJava编程语言
0 条评论