经验首页 前端设计 程序设计 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!

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

本站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号