经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue计算属性与监视属性实现方法详解
来源：jb51　　时间：2022/8/23 11:27:04　　对本文有异议

一、计算属性

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

1、插值语法实现

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

  1.     <div id="root">
  2.         姓：<input type="text" v-model="fistName"><br><br>
  3.         名：<input type="text" v-model="lastName"><br><br>
  4.         姓名：<span>{{fistName + lastName}}</span>
  5.     </div>

2、通过方法实现

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

  1.     <div id="root">
  2.         姓：<input type="text" v-model="fistName"><br><br>
  3.         名：<input type="text" v-model="lastName"><br><br>
  4.         <!-- 只要数据发生改变，这个方法就会再被调用一次 -->
  5.         姓名：<span>{{fullName()}}</span>
  6.     </div>
  1.     new Vue({
  2.         el:'#root',
  3.         data:{
  4.             fistName:'张',
  5.             lastName:'三'
  6.         },
  7.         methods: {
  8.             fullName(){
  9.                 return this.fistName + this.lastName;
  10.             }
  11.         },
  12.     })

3、通过计算属性

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

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

  1.     <div id="root">
  2.         姓：<input type="text" v-model="fistName"><br><br>
  3.         名：<input type="text" v-model="lastName"><br><br>
  4.         姓名：<span>{{fullName}}</span>
  5.     </div>
  1. const vm = new Vue({
  2.         el:'#root',
  3.         //属性
  4.         data:{
  5.             fistName:'张',
  6.             lastName:'三'
  7.         },
  8.         // 计算属性
  9.         computed:{
  10.             fullName:{
  11.                 //当有人读取fullName时，get就会被调用，返回值为fullName的值
  12.                 //get调用时机
  13.                 //1、初次读取fullName
  14.                 //2、所依赖的数据变化时
  15.                 get(){
  16.                     //这里的this是指vm
  17.                     return this.fistName + this.lastName;
  18.                 },
  19.                 //当fullName被调用时候调用
  20.                 set(value){
  21.                     const arr = value.split('-')
  22.                     this.fistName = arr[0]
  23.                     this.lastName = arr[1]
  24.                 }
  25.             }
  26.         }
  27.     })

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

  • {{}}中方法是写一个方法的，即带括号
  • 但是计算属性只需要写名字即可，不用带花括号

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

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

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

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

get函数什么时候执行：

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

计算属性的优势

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

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

二、监视属性

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

通过关键词watch实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <script type="text/javascript" src="../js/vue.js"></script>
  9.   </head>
  10.   <body>
  11.     <div id="root">
  12.       <h2>今天天气很{{info}}</h2>
  13.       <button @click="changgeWeather">切换天气</button>
  14.     </div>
  15.   </body>
  16.   <script>
  17.     Vue.config.productionTip = false;
  18.     const vm = new Vue({
  19.       el: "#root",
  20.       data: {
  21.         isHot: true,
  22.       },
  23.       computed: {
  24.         info() {
  25.           return this.isHot ? "炎热" : "凉爽";
  26.         },
  27.       },
  28.       methods: {
  29.         changgeWeather() {
  30.           this.isHot = !this.isHot;
  31.         },
  32.       },
  33.       // 监视
  34.       //适用于一开始很明确地知道要监视谁
  35.       watch: {
  36.         isHot: {
  37.           //初始化时让handler调用一下
  38.           immediate: true,
  39.           //什么时候调用？当isHost发生改变时
  40.           handler(newValue, oldValue) {
  41.             console.log("isHost被调用", newValue, oldValue);
  42.           }
  43.         },
  44.       // }
  45.     });
  46.   </script>
  47. </html>

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

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

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

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

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

两种的使用场合不同：

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

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

  1. watch: {
  2.         isHot((newValue, oldValue)): {
  3.             console.log("isHost被调用", newValue, oldValue);
  4.         }
  5. }

三、深度监视

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

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

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

  1. "number.a": {
  2.             handler(newValue, oldValue) {
  3.               console.log("a改变", newValue, oldValue);
  4.             },
  5.           },

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

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

  1.         number:{
  2.           //表示深度开启
  3.           deep:true,
  4.           handler(){
  5.             console.log("number发生改变");
  6.           }

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

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

  1.         number:{
  2.           //表示深度开启
  3.           deep:true,
  4.           handler(){
  5.             console.log("number发生改变");
  6.           }

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号