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

女爷i 2024-04-08 13:17 48阅读 0赞

**目录**

一、计算属性--姓名案例

1.函数和插值语法实现

2.计算属性实现

计算属性的简写

二、监视属性---天气案例

1.使用监视属性编写天气案例

方法一：

方法二：

2.深度监视

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

监视多级结构中所有属性的变化（深度监视）

3.监视属性简写

完整版

简写版

三、computed与watch对比

使用watch监听--姓名案例

--------------------

## 一、计算属性--姓名案例 ##

### 1.函数和插值语法实现 ###

![a0a8061e744046018ae5a419e95c7f94.png][]

###  ###

### 2.计算属性实现 ###

计算属性：

定义：要用的属性不存在，要通过已有的属性计算得来

原理：底层借助了Object.defineproperty方法提供的getter和setter

get函数什么时候执行？

初次读取时会执行一次

当依赖的数据发生变化时会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

备注：①计算属性最终会出现在vm上，直接读取使用即可

②如果计算属性要被修改，那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
               
               姓：<input type="text" v-model="firstName"><br/><br/>
               名：<input type="text" v-model="lastName"><br/><br/>
               全名：<span> {
       {fullName}}</span>
            </div>
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
              const vm  =  new Vue({
                    el:'#root',
                    data:{
                        firstName:'张',
                        lastName:'三'
                    },
                   //计算属性 
                    computed:{
                       fullName:{
                        // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就会作为fullName的值
                        //get什么时候调用？1.初次读取fullName时  2.所依赖的数据发生变化时    
                        get(){
                            // 在这里面的this同样指向vm实例对象
                            return this.firstName+'-'+this.lastName
                        },
                        // 一定要有setter函数么？不一定，如果确定数据只需要读的话，不需要setter函数
                        // get什么时候调用？当fullName被修改的时候
                        set(value){
                            const arr=value.split('-')
                            this.firstName=arr[0]
                            this.lastName=arr[1]
                        }
                       }
                    }
                })
    
            </script>   
        </body>
    </html>

![1a5a2153de8f4cb0abf6481f24dc6895.png][]

#### 计算属性的简写 ####

//计算属性 
                    computed:{
                        //简写之后不用再把fullName写成一个配置对象了
                        // 这个函数就当getter用  函数的名就是计算属性的名
                       fullName(){
                   // 在这里面的this同样指向vm实例对象
                            return this.firstName+'-'+this.lastName
                       }
                    }

## 二、监视属性---天气案例 ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
                <h2>今天天气：{
       {info}}</h2>
                <button @click="changeWeather">切换天气</button>
            </div>
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
                new Vue({
                    el:'#root',
                    data:{
                        isHot:true
                    },
                computed:{
                    info(){
                        return this.isHot ? '炎热':'凉爽'
                    }
                },
                methods: {
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                })
    
            </script>   
        </body>
    </html>

最终实现的效果如下，当我们点击“切换天气”的时候，就会改变

![5f0f05edc64d48d298e12bf336f82ec6.png][]

![27a1215e8b4c4c89ab1c29fd6500da22.png][]

### 1.使用监视属性编写天气案例 ###

#### 方法一： ####

//阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
                new Vue({
                    el:'#root',
                    data:{
                        isHot:true
                    },
                computed:{
                    info(){
                        return this.isHot ? '炎热':'凉爽'
                    }
                },
                methods: {
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                watch:{
                    // 监视谁我们就写谁的名字
                    isHot:{
                        // 初始化时让handler函数调用一下
                      immediate:true, 
    
                      // 此函数什么时候被调用？当我们被监视的isHot改变时
                      // 此函数有两个参数，一个参数是新值，另一个参数是老值（之前的值
                      handler(newValue,oldValue){
                            console.log('isHot被修改了')
                      }
                    }
                }

#### 方法二： ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
                <h2>今天天气：{
       {info}}</h2>
                <button @click="changeWeather">切换天气</button>
            </div>
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
               const vm = new Vue({
                    el:'#root',
                    data:{
                        isHot:true
                    },
                computed:{
                    info(){
                        return this.isHot ? '炎热':'凉爽'
                    }
                },
                methods: {
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
    
                vm.$watch('isHot',{
                   immediate: true,
                     handler(newValue,oldValue){
                     console.log('isHot被修改了')
                      }
                })
    
            })
    
            </script>   
        </body>
    </html>

### 2.深度监视 ###

深度监视：

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

配置deep：true可以检测对象内部值改变（多层）

备注：

Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以！

使用watch时根据数据的具体结构，是否采用深度监视

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

监视number中的a的变化

data:{
                        isHot:true,
                        numbers:{
                            a:1,
                            b:1
                        }
                    },

为什么这个地方会有引号？没有行不行？

不行！因为这才是正统的写法，没有引号的那种是简写形式

'numbers.a':{
                        // 如果没有这个函数的话会被警告
                       handler(){
                        console.log('a被改变了！')
                       }
                    }

#### 监视多级结构中所有属性的变化（深度监视） ####

开启深度监视，当number中的任何一个配置变了之后，就会运行handler函数  
deep:true,

watch:{
                    isHot:{
                        immediate:true,  //初始化时让handler调用一下
                        // handler什么时候调用？当isHot发生变化时
                        handler(newValue,oldValue){
                            console.log('isHot被修改了',newValue,oldValue)
                        }
                    },
    
                    numbers:{
                        // 开启深度监视，当number中的任何一个配置变了之后，就会运行handler函数
                        deep:true,
                        handler(){
                            console.log('numbers changes')
                        }
                    }
                }

### 3.监视属性简写 ###

#### 完整版 ####

watch:{
                    isHot:{
                        immediate:true,  //初始化时让handler调用一下
                        // handler什么时候调用？当isHot发生变化时
                        handler(newValue,oldValue){
                            console.log('isHot被修改了',newValue,oldValue)
                        }
                    }
                }

#### 简写版 ####

简写的**代价**就是**不能配置immediate和deep**

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

## 三、computed与watch对比 ##

区别：

computed能完成的功能，watch都可以完成

watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

两个重要原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

2.所有不被vue所管理的函数（定时器的回调函数、AJAX的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

### 使用watch监听--姓名案例 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
               
               姓：<input type="text" v-model="firstName"><br/><br/>
               名：<input type="text" v-model="lastName"><br/><br/>
               全名：<span> {
       {fullName}}</span>
            </div>
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
              const vm  =  new Vue({
                    el:'#root',
                    data:{
                        firstName:'张',
                        lastName:'三',
                        fullName:'张-三'
                    },
                    watch:{
                        firstName:{
                            // 此处的newValue就是我们新输入的姓
                            handler(newValue,oldValue){
                            this.fullName=newValue+'-'+this.lastName
                            }
                        },
                        lastName:{
                            // 此处的newValue就是我们新输入的名
                            handler(newValue,oldValue){
                            this.fullName=this.firstName+'-'+newValue
                            }
                        }
                    }
                })
    
            </script>   
        </body>
    </html>

[a0a8061e744046018ae5a419e95c7f94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ac3e473002ed4551973c78f8de58885b.png
[1a5a2153de8f4cb0abf6481f24dc6895.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/94a568ab87dd4deb9690da7c569a0737.png
[5f0f05edc64d48d298e12bf336f82ec6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3788f48a12954a1a942da38429a9013b.png
[27a1215e8b4c4c89ab1c29fd6500da22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9ce04bdc5527414a945fbb16778c5f91.png