zoukankan html css js c++ java

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

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在首次计算完成之后就不再更新

查看全文

相关阅读:
JavaWeb 项目，更改本地文件需刷新才有效问题（tomcat相关）
java设置项目根目录工作目录 working dictionary
得到JavaWeb项目在Tomcat中的运行路径
 java连接mysql数据库中文乱码问题
 java读utf8 的txt文件，第一个字符为空或问号问题
 java项目连接access数据库
 AJAX POST&跨域解决方案
 MySQL5.6新特性Index conditontion pushdow
MathML转换成OfficeML
.net大型分布式电子商务架构说明(转载来自<头条>)

原文地址：https://www.cnblogs.com/TanSea/p/Vue-Chapter6-Attributes.html

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

computed属性

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