个人中心
gpt4 book ai didi

vue 计算属性和侦听器的使用小结

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 34 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue 计算属性和侦听器的使用小结由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1. 计算属性和侦听器

1.1 计算属性

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
< html >
   < head >
     < meta charset = "utf-8" >  
     < script src = "https://cdn.staticfile.org/vue/2.4.2/vue.min.js" ></ script >
   </ head >
   < body >
     < div id = "app" >
             < p >{{ message }}</ p >
             < p >{{ reversedMessage }}</ p >
     </ div >
     < script >
       new Vue({
         el: '#app',
         data: {
                     message: 'hello'
         },
                 computed: {                
                     reversedMessage: function () {
                         return this.message.split('').reverse().join('')
                     }
                     /*
                     // 相当于
                     reversedMessage: {
                         get(){
                             return this.message.split('').reverse().join('')
                         }
                     }
                     */
                 }
       });
     </ script >
   </ body >
</ html >

vue 计算属性和侦听器的使用小结

解释：我们在属性computed中定义了计算属性reversedMessage，这里提供的函数将作为计算属性reversedMessage的getter函数.

1.2 setter

计算属性默认只有getter，不过我们可以提供一个setter.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html >
   < head >
     < meta charset = "utf-8" >  
     < script src = "https://cdn.staticfile.org/vue/2.4.2/vue.min.js" ></ script >
   </ head >
   < body >
     < div id = "app" >
             < p >{{ message }}</ p >
             < p >{{ reversedMessage }}</ p >
             < input type = "text" v-model = "reversedMessage" />
     </ div >
     < script >
       new Vue({
         el: '#app',
         data: {
                     message: 'hello'
         },
                 computed: {
                     reversedMessage: {
                         get(){
                             return this.message.split('').reverse().join('')
                         },
                         set(value){
                             this.message = value.split('').reverse().join('')
                         }
                     }
                 }
       });
     </ script >
   </ body >
</ html >

1.3 缓存

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html >
   < head >
     < meta charset = "utf-8" >  
     < script src = "https://cdn.staticfile.org/vue/2.4.2/vue.min.js" ></ script >
   </ head >
   < body >
     < div id = "app" >
             < p >{{ message }}</ p >
             < p >{{ reversedMessage }}</ p >
             < p >{{ reversedMessage1() }}</ p >
     </ div >
     < script >
       new Vue({
         el: '#app',
         data: {
                     message: 'hello'
         },
                 methods: {
                     reversedMessage1: function(){
                         return this.message.split('').reverse().join('')
                     }
                 },
                 computed: {                
                     reversedMessage: function () {
                         return this.message.split('').reverse().join('')
                     }
                 }
       });
     </ script >
   </ body >
</ html >

vue 计算属性和侦听器的使用小结

注意：虽然通过计算属性和方法，都可以达到同样的效果，但是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值.

1.4 侦听属性

通过Vue实例的watch属性可以侦听数据的变化.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html >
   < head >
     < meta charset = "utf-8" >  
     < script src = "https://cdn.staticfile.org/vue/2.4.2/vue.min.js" ></ script >
   </ head >
   < body >
     < div id = "app" >
             < p >{{ message }}</ p >
             < button @ click = "reverse=!reverse" >反转</ button >
     </ div >
     < script >
       new Vue({
         el: '#app',
         data: {
                     message: 'Vue',
                     reverse: false
         },
                 watch: {
                     // message: function(newVal, oldVal){
                     reverse: function(newVal){
                         console.log(newVal)
                         this.message = this.message.split('').reverse().join('')
                     }
                 },
       });
     </ script >
   </ body >
</ html >

我们可以通过实例属性vm.$watch达到同样的效果.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html >
   < head >
     < meta charset = "utf-8" >  
     < script src = "https://cdn.staticfile.org/vue/2.4.2/vue.min.js" ></ script >
   </ head >
   < body >
     < div id = "app" >
             < p >{{ message }}</ p >
             < button @ click = "reverse=!reverse" >反转</ button >
     </ div >
     < script >
       var vm = new Vue({
         el: '#app',
         data: {
                     message: 'Vue',
                     reverse: false
         }
       });
            
             // vm.$watch('reverse', function (newVal, oldVal) {
             vm.$watch('reverse', function (newVal) {
                 console.log(newVal)
                 this.message = this.message.split('').reverse().join('')
             });
     </ script >
   </ body >
</ html >

以上就是vue 计算属性和侦听器的使用小结的详细内容，更多关于vue 计算属性和侦听器的资料请关注我其它相关文章！ 。

原文链接：https://www.cnblogs.com/gzhjj/p/11759400.html 。

最后此篇关于vue 计算属性和侦听器的使用小结的文章就讲到这里了,如果你想了解更多关于vue 计算属性和侦听器的使用小结的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

34 4 0
文章推荐： ReactRouter的实现方法
文章推荐： Javascript中的奇葩知识,你知道吗?
文章推荐： JavaScript中clientWidth,offsetWidth,scrollWidth的区别
文章推荐： vue keep-alive的简单总结
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com