Vue.js学习笔记第六篇内置属性

最新推荐文章于 2023-06-05 21:49:57 发布

dongjiang4949

最新推荐文章于 2023-06-05 21:49:57 发布

阅读量132

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/TanSea/p/Vue-Chapter6-Attributes.html

版权

computed属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app-1">
        <p>初始字符串：{{ content }}</p>
        <p>计算后字符串：{{ reversedContent }}</p>
    </div>
    <script type="text/javascript">
        var vm1 = new Vue({
            el: '#app-1',
            data: {
                content: 'TanSea'
            },
            computed: {
                reversedContent: function() {
                    return this.content.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

Vue对象实例化时，之前接触过了el、data、methods，这里再介绍一个computed

computed的定义和methods的定义是一样的，但是在理解上可以理解为methods是类的方法，computed是类的属性

但是，computed默认是没有set方法的，我们可以显式的给他定义一个

<div id="app-2">
    <p>初始字符串：{{ content }}</p>
    <p>计算后字符串：{{ reversedContent }}</p>
</div>
<script type="text/javascript">
    var vm2 = new Vue({
        el: '#app-2',
        data: {
            content: 'TanSea'
        },
        computed: {
            reversedContent: {
                get: function() {
                    return this.content.split('').reverse().join('')
                },
                set: function(newValue) {
                    this.content = newValue
                }
            }
        }
    })
</script>

这时，我们就可以在浏览器的控制台输入vm2.reversedContent = 'Hello, World'给他重新赋值了

在大部分情况下，computed和methods是可以互换的，那么他们的区别是什么？

computed 属性会基于它所依赖的数据进行缓存，只有在依赖的数据发生变化时，才会重新取值

methods总是再次执行函数

<div id="app-3">
    <p>初始字符串：{{ nowDate }}</p>
    <p>methods：{{ mNowDate() }}</p>
    <!-- Date.now()是非响应式的依赖数据，computed属性永远不会更新 -->
    <p>computed：{{ cNowDate }}</p>
</div>
<script type="text/javascript">
    var vm3 = new Vue({
        el: '#app-3',
        data: {
            nowDate: Date.now()
        },
        methods: {
            mNowDate: function() {
                return Date.now()
            }
        },
        computed: {
            cNowDate: function() {
                return Date.now()
            }
        }
    })
</script>

例子使用了Date.now()这种非响应式数据，computed在首次计算完成之后就不再更新

转载于:https://www.cnblogs.com/TanSea/p/Vue-Chapter6-Attributes.html

dongjiang4949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记第六篇内置属性

computed属性<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script>...
复制链接

扫一扫