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

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

1.函数和插值语法实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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
            
            new Vue({
                el:'#root',
                data:{
                    firstName:'张',
                    lastName:'三'
                },
                methods:{
                    fullName(){
                        return this.firstName+'-'+this.lastName
                    }
                }
            })
        </script>   
    </body>
</html>

2.计算属性实现

计算属性：

     定义：要用的属性不存在，要通过已有的属性计算得来
     原理：底层借助了Object.defineproperty方法提供的getter和setter

get函数什么时候执行？

  初次读取时会执行一次
  当依赖的数据发生变化时会被再次调用

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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>

计算属性的简写

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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>

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

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>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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>

标签： vue.js 前端 javascript

本文转载自: https://blog.csdn.net/weixin_51351637/article/details/126573593
版权归原作者 我爱布朗熊 所有，如有侵权，请联系我们删除。