文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue计算属性与监视属性实现方法详解

2024-04-02 19:55

关注

一、计算属性

在开发中,可以有这样的需求,在属性(date)中,有fistName和lastName两个属性,需要将两个属性拼接起来,这种需求也很简单,有以下实现方式

1、插值语法实现

直接在body中将两个数据拼接

    <div id="root">
        姓:<input type="text" v-model="fistName"><br><br>
        名:<input type="text" v-model="lastName"><br><br>
        姓名:<span>{{fistName + lastName}}</span>
    </div>

2、通过方法实现

编写一个方法,返回值为两者拼在一起的字符串

    <div id="root">
        姓:<input type="text" v-model="fistName"><br><br>
        名:<input type="text" v-model="lastName"><br><br>
        <!-- 只要数据发生改变,这个方法就会再被调用一次 -->
        姓名:<span>{{fullName()}}</span>
    </div>
    new Vue({
        el:'#root',
        data:{
            fistName:'张',
            lastName:'三'
        },
        methods: {
            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方法

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

            fullName(){
                return this.fistName + this.lastName;
            }

get函数什么时候执行:

计算属性的优势

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

简单来说,倘若计算属性不变,计算属性的数据就会存进缓存中,当页面上的其他数据需要读取这个计算属性的话,不再需要从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);
      },
    });

两种的使用场合不同:

当监视属性只有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发生改变");
          }

到此这篇关于Vue计算属性与监视属性实现方法详解的文章就介绍到这了,更多相关Vue计算属性与监视属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯