Vue：计算属性与监视属性_vue中计算属性和监视-优快云博客

本文链接：https://blog.youkuaiyun.com/2501_90253000/article/details/145230985

        fullName(){

            return this.fistName + this.lastName;

},

})

3、通过计算属性

计算属性就是vue中的computed，这里面存放的是计算属性

而data中的是属性，两者不一样


    <div id="root">

        姓：<input type="text" v-model="fistName"><br><br>

        名：<input type="text" v-model="lastName"><br><br>

        姓名：<span>{{fullName}}</span>

    </div>


const vm = new Vue({

        el:'#root',

        //属性

        data:{

            fistName:'张',

            lastName:'三'

        },

        // 计算属性

        computed:{

            fullName:{

                //当有人读取fullName时，get就会被调用，返回值为fullName的值

                //get调用时机

                //1、初次读取fullName

                //2、所依赖的数据变化时

                get(){

                    //这里的this是指vm

                    return this.fistName + this.lastName;

                },

                //当fullName被调用时候调用

                set(value){

                    const arr = value.split('-')

                    this.fistName = arr[0]

                    this.lastName = arr[1]

                }

            }

        }

    })

计算属性和方法的编写方式有点区别

{{}}中方法是写一个方法的，即带括号

但是计算属性只需要写名字即可，不用带花括号

计算属性中要编写两个方法，一个是get方法，另一个是set方法

当有人读取fullname这个计算属性，get方法就会被调用，返回值是fullname的值
当有人修改fullname这个计算属性，set方法就会被调用

当明确只有get方法，不需要set方法的时候，计算属性可以简写成如下：


            fullName(){

                return this.fistName + this.lastName;

            }

get函数什么时候执行：

初次读取时会执行一次

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

3.1、计算属性的优势

相对于方法来说，计算属性内部有缓存机制（复用），效率更好，调试更方便

简单来说，倘若计算属性不变，计算属性的数据就会存进缓存中，当页面上的其他数据需要读取这个计算属性的话，不再需要从vm获取，直接从缓存里面获取

二、监视属性

=========================================================================

监视属性可以监视某个属性的变化，并且可以获取变化前和变化后的数值

通过关键词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 type="text/javascript" src="../js/vue.js"></script>

  </head>



  <body>

    <div id="root">

      <h2>今天天气很{{info}}</h2>

      <button @click="changgeWeather">切换天气</button>

    </div>

  </body>

  <script>

    Vue.config.productionTip = false;



    const vm = new Vue({

      el: "#root",

      data: {

        isHot: true,

      },

      computed: {

        info() {

          return this.isHot ? "炎热" : "凉爽";

        },

      },

      methods: {

        changgeWeather() {

          this.isHot = !this.isHot;

        },

      },

      // 监视

      //适用于一开始很明确地知道要监视谁

      watch: {

        isHot: {

          //初始化时让handler调用一下

          immediate: true,

          //什么时候调用？当isHost发生改变时

          handler(newValue, oldValue) {

            console.log("isHost被调用", newValue, oldValue);

          }

        },

      // }

    });



  </script>

</html>

例如如上案例，当isHost被修改的时候，监视属性中的isHost中的handler就会被调用

而 immediate: true 的作用是再初始化的时候调用一下这个监视属性

注意的是监视属性必须存在，才可以进行监视

除了以上邪恶写法，还可以通过vm.$watch监视


    vm.$watch("isHost", {

      //初始化时让handler调用一下

      immediate: true,

      //什么时候调用？当isHost发生改变时

      handler(newValue, oldValue) {

        console.log("isHost被调用", newValue, oldValue);

      },

    });

两种的使用场合不同：

第一个则是，一开始就很明确这个属性需要监视，则写在vue里面
第二个则是，一开始不知道这个属性需要被监视，然后后面加上的，就可以用vm.$watch

当监视属性只有handler的时候，可以进行简写


watch: {

        isHot((newValue, oldValue)): {

            console.log("isHost被调用", newValue, oldValue);

        }

}

三、深度监视

=========================================================================

深度监视主要用于监视层次比较高的

data: {

    isHot: true,

    number: {

      a: 1,

      b: 1,

},

例如这个data里面的number，需要监视里面的a和b的变化，则需要用到监视属性


"number.a": {

            handler(newValue, oldValue) {

              console.log("a改变", newValue, oldValue);

            },

          },

监视对象里面的某个属性，就可以如上这也进行操作，“对象.属性”表示监视里面的某一个属性

同时也可以监视number的变化，只需要在在里面开启深度即可


        number:{

          //表示深度开启

          deep:true,

          handler(){

            console.log("number发生改变");

          }

监视对象里面的某个属性，就可以如上这也进行操作，“对象.属性”表示监视里面的某一个属性

同时也可以监视number的变化，只需要在在里面开启深度即可


        number:{

          //表示深度开启

          deep:true,

          handler(){

            console.log("number发生改变");

          }

[

开发者涨薪指南外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

48位大咖的思考法则、工作方式、逻辑体系

       console.log("number发生改变");

      }




监视对象里面的某个属性，就可以如上这也进行操作，“对象.属性”表示监视里面的某一个属性



同时也可以监视number的变化，只需要在在里面开启深度即可

    number:{

      //表示深度开启

      deep:true,

      handler(){

        console.log("number发生改变");

      }




 



[



![](https://img-blog.csdnimg.cn/92aabf6b0d3144eaa7da7155d56e35de.jpeg)



开发者涨薪指南 [外链图片转存中...(img-MPQuLyfS-1737197207879)]



48位大咖的思考法则、工作方式、逻辑体系