Vue计算属性

最新推荐文章于 2024-08-29 21:48:39 发布

佳悦

最新推荐文章于 2024-08-29 21:48:39 发布

阅读量456

点赞数

分类专栏： Html+Css+Vue.js+Jquery

本文链接：https://blog.csdn.net/drunkpragrammer/article/details/77718653

版权

Html+Css+Vue.js+Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue计算属性

Vue计算属性是用来代替模板逻辑复杂的表达式的,使模板清晰,利于维护。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>computed</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app-1">
<p>{{message}}</p>
<p>{{reverseMessage}}</p>
</div>
</body>
<script>
    var app1=new Vue({
        el:"#app-1",
        data:{
            message:'hello world'
        },
        computed:{
            reverseMessage:function () {
                return this.message.split(' ').reverse().join(' ')
            }
        }
    })
</script>
</html>
我们在这里提供的函数相当于reverseMessage的getter函数,app1.reverseMessage的值依赖于app1.message
如果在控制台修改app1.message的值,app1.reverseMessage的值也会跟着改变。

同样可以调用method方法达到同样的效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>computed</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app-1">
   <p>{{message}}</p>
   <p>{{reverseMessage()}} </p>
<!--<p>{{reverseMessage}}</p>-->
</div>
</body>
<script>
    var app1=new Vue({
        el:"#app-1",
        data:{
            message:'hello world'
        },
        methods:{
            reverseMessage:function () {
              return this.message.split(' ').reverse().join(' ')
            }
        }
//        computed:{
//            reverseMessage:function () {
//                return this.message.split(' ').reverse().join(' ')
//            }
//        }
    })
</script>
</html>
method方法和computed（计算属性）方法,两者得到的结果是一样的,但是method方法则是每触发页面重新渲染就会被调用执行,而
computed（计算属性）则是当app1.message的值有更新才会调用,如果没有改变,多次调用reverseMessage也是返回原来计算的值,并不会
重新计算,computed是根据依赖关系进行缓存的。

还能使用watch属性方法达到同样的效果。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>computed</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app-1">
    <p>{{message}}</p>
    <!--<p>{{reverseMessage()}} </p>-->
    <p>{{reverseMessage}}</p>
</div>
</body>
<script>
    var app1=new Vue({
        el:"#app-1",
        data:{
            message:'hello world',
            reverseMessage:'world hello'
        },
        watch:{
            message:function (val) {
                this.reverseMessage=val.split(' ').reverse().join(' ')
            }
        }
//        methods:{
//            reverseMessage:function () {
//              return this.message.split(' ').reverse().join(' ')
//            }
//        }
//        computed:{
//            reverseMessage:function () {
//                return this.message.split(' ').reverse().join(' ')
//            }
//        }
    })
</script>
</html>
但是watch属性方法的缺点是：如果是依赖太多数据的时候，是不及computed(计算属性)代码简洁
优点是：如果要处理的数据更新后的操作是异步操作或者占用内存资源过大的时候，watch属性方法比computed方法更有优势。