Vue.js 计算属性computed

最新推荐文章于 2024-07-28 19:41:36 发布

黄宝康

最新推荐文章于 2024-07-28 19:41:36 发布

阅读量340

点赞数

分类专栏： VUE 文章标签： Vue.js 计算属性computed

本文链接：https://blog.csdn.net/huangbaokang/article/details/100527942

版权

VUE 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="gbk">
<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>VUE 计算属性computed</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <div>
        {{ message.split('').reverse().join('') }}
    </div>
    <h2>计算属性</h2>
    <div>
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <button @click="change()">改变</button>
    </div>
    <h2>计算属性缓存 vs 方法</h2>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Reversed message: "{{ reversedMessage2() }}"</p>
    <p>Reversed message: "{{ reversedMessage2() }}"</p>

</div>
<script>
    let count=1;
    let vm=new Vue({
        el:'#app',
        data:{
            message: 'Hello'
        },
        computed:{
            // 计算属性的 getter
            reversedMessage(){
                count++;
                // `this` 指向 vm 实例
                return count+''+this.message.split('').reverse().join('')
            }
        },
        methods:{
            change(){
                this.message="fdafdafsda";
            },

            reversedMessage2() {
                count++;
                return count+''+this.message.split('').reverse().join('')
            }
        }
    })

</script>

</body>
</html>

总结：computed多了一层缓存。
在这里插入图片描述