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

    目录

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

       1.函数和插值语法实现

    2.计算属性实现

       计算属性的简写

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

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

     方法一：

    方法二：

    2.深度监视

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

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

    3.监视属性简写

        完整版

    简写版

    三、computed与watch对比

        使用watch监听--姓名案例

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

       1.函数和插值语法实现

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.            
    12.            姓：<input type="text" v-model="firstName"><br/><br/>
    13.            名：<input type="text" v-model="lastName"><br/><br/>
    14.            全名：<span> {{fullName()}}span>
    15.         div>
    16.  
    17.         <script type="text/javascript">
    18.             //阻止vue在启动时生成生产提示
    19.             Vue.config.productionTip=false
    20.             
    21.             new Vue({
    22.                 el:'#root',
    23.                 data:{
    24.                     firstName:'张',
    25.                     lastName:'三'
    26.                 },
    27.                 methods:{
    28.                     fullName(){
    29.                         return this.firstName+'-'+this.lastName
    30.                     }
    31.                 }
    32.             })
    33.  
    34.         script>   
    35.     body>
    36. html>

    2.计算属性实现

       计算属性：

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

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

             

    get函数什么时候执行？

          初次读取时会执行一次

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

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

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

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

         

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.            
    12.            姓：<input type="text" v-model="firstName"><br/><br/>
    13.            名：<input type="text" v-model="lastName"><br/><br/>
    14.            全名：<span> {{fullName}}span>
    15.         div>
    16.  
    17.         <script type="text/javascript">
    18.             //阻止vue在启动时生成生产提示
    19.             Vue.config.productionTip=false
    20.             
    21.           const vm  =  new Vue({
    22.                 el:'#root',
    23.                 data:{
    24.                     firstName:'张',
    25.                     lastName:'三'
    26.                 },
    27.                //计算属性 
    28.                 computed:{
    29.                    fullName:{
    30.                     // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就会作为fullName的值
    31.                     //get什么时候调用？1.初次读取fullName时  2.所依赖的数据发生变化时    
    32.                     get(){
    33.                         // 在这里面的this同样指向vm实例对象
    34.                         return this.firstName+'-'+this.lastName
    35.                     },
    36.                     // 一定要有setter函数么？不一定，如果确定数据只需要读的话，不需要setter函数
    37.                     // get什么时候调用？当fullName被修改的时候
    38.                     set(value){
    39.                         const arr=value.split('-')
    40.                         this.firstName=arr[0]
    41.                         this.lastName=arr[1]
    42.                     }
    43.                    }
    44.                 }
    45.             })
    46.  
    47.         script>   
    48.     body>
    49. html>

       计算属性的简写

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

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

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <h2>今天天气：{{info}}h2>
    12.             <button @click="changeWeather">切换天气button>
    13.         div>
    14.  
    15.         <script type="text/javascript">
    16.             //阻止vue在启动时生成生产提示
    17.             Vue.config.productionTip=false
    18.             
    19.             new Vue({
    20.                 el:'#root',
    21.                 data:{
    22.                     isHot:true
    23.                 },
    24.             computed:{
    25.                 info(){
    26.                     return this.isHot ? '炎热':'凉爽'
    27.                 }
    28.             },
    29.             methods: {
    30.                 changeWeather(){
    31.                     this.isHot = !this.isHot
    32.                 }
    33.             },
    34.             })
    35.  
    36.         script>   
    37.     body>
    38. html>

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

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

     方法一：

    1.             //阻止vue在启动时生成生产提示
    2.             Vue.config.productionTip=false
    3.             
    4.             new Vue({
    5.                 el:'#root',
    6.                 data:{
    7.                     isHot:true
    8.                 },
    9.             computed:{
    10.                 info(){
    11.                     return this.isHot ? '炎热':'凉爽'
    12.                 }
    13.             },
    14.             methods: {
    15.                 changeWeather(){
    16.                     this.isHot = !this.isHot
    17.                 }
    18.             },
    19.             watch:{
    20.                 // 监视谁我们就写谁的名字
    21.                 isHot:{
    22.                     // 初始化时让handler函数调用一下
    23.                   immediate:true, 
    24.  
    25.                   // 此函数什么时候被调用？当我们被监视的isHot改变时
    26.                   // 此函数有两个参数，一个参数是新值，另一个参数是老值（之前的值
    27.                   handler(newValue,oldValue){
    28.                         console.log('isHot被修改了')
    29.                   }
    30.                 }
    31.             }

    方法二：

    1.    DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <h2>今天天气：{{info}}h2>
    12.             <button @click="changeWeather">切换天气button>
    13.         div>
    14.  
    15.         <script type="text/javascript">
    16.             //阻止vue在启动时生成生产提示
    17.             Vue.config.productionTip=false
    18.             
    19.            const vm = new Vue({
    20.                 el:'#root',
    21.                 data:{
    22.                     isHot:true
    23.                 },
    24.             computed:{
    25.                 info(){
    26.                     return this.isHot ? '炎热':'凉爽'
    27.                 }
    28.             },
    29.             methods: {
    30.                 changeWeather(){
    31.                     this.isHot = !this.isHot
    32.                 }
    33.             },
    34.  
    35.             vm.$watch('isHot',{
    36.                immediate: true,
    37.                  handler(newValue,oldValue){
    38.                  console.log('isHot被修改了')
    39.                   }
    40.             })
    41.  
    42.         })
    43.  
    44.         script>   
    45.     body>
    46. html>

    2.深度监视

      深度监视：

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

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

      备注：

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

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

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

        监视number中的a的变化

    1.                 data:{
    2.                     isHot:true,
    3.                     numbers:{
    4.                         a:1,
    5.                         b:1
    6.                     }
    7.                 },

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

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

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

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

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

    1.             watch:{
    2.                 isHot:{
    3.                     immediate:true,  //初始化时让handler调用一下
    4.                     // handler什么时候调用？当isHot发生变化时
    5.                     handler(newValue,oldValue){
    6.                         console.log('isHot被修改了',newValue,oldValue)
    7.                     }
    8.                 },
    9.  
    10.                 numbers:{
    11.                     // 开启深度监视，当number中的任何一个配置变了之后，就会运行handler函数
    12.                     deep:true,
    13.                     handler(){
    14.                         console.log('numbers changes')
    15.                     }
    16.                 }
    17.             }

    3.监视属性简写

        完整版

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

    简写版

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

    1.             watch:{
    2.  
    3.                 isHot(newValue,oldValue){
    4.                     console.log('isHot被修改了',newValue,oldValue)
    5.                 }
    6.             }

    三、computed与watch对比

        区别：

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

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

    两个重要原则：

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

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

        使用watch监听--姓名案例

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.            
    12.            姓：<input type="text" v-model="firstName"><br/><br/>
    13.            名：<input type="text" v-model="lastName"><br/><br/>
    14.            全名：<span> {{fullName}}span>
    15.         div>
    16.  
    17.         <script type="text/javascript">
    18.             //阻止vue在启动时生成生产提示
    19.             Vue.config.productionTip=false
    20.             
    21.           const vm  =  new Vue({
    22.                 el:'#root',
    23.                 data:{
    24.                     firstName:'张',
    25.                     lastName:'三',
    26.                     fullName:'张-三'
    27.                 },
    28.                 watch:{
    29.                     firstName:{
    30.                         // 此处的newValue就是我们新输入的姓
    31.                         handler(newValue,oldValue){
    32.                         this.fullName=newValue+'-'+this.lastName
    33.                         }
    34.                     },
    35.                     lastName:{
    36.                         // 此处的newValue就是我们新输入的名
    37.                         handler(newValue,oldValue){
    38.                         this.fullName=this.firstName+'-'+newValue
    39.                         }
    40.                     }
    41.                 }
    42.             })
    43.  
    44.         script>   
    45.     body>
    46. html>

  • 相关阅读:
    深度学习分析NASA电池数据（1 数据读取）
    MT2096 数列分段
    HoloLens 2上使用Azure空间定位点
    Java面向对象编程
    鸿蒙应用服务开发【华为支付服务】客户端
    社区型商场、购物中心与会员管理
    Vue基础知识点 — 组件
    数据仓库的流程
    论文笔记：SAITS: SELF-ATTENTION-BASED IMPUTATION FOR TIMESERIES
    纯CSS打造酷炫霓虹灯loading bar特效
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126573593