vue2[初级]监听属性

最新推荐文章于 2024-04-22 10:59:28 发布

ejokovic

最新推荐文章于 2024-04-22 10:59:28 发布

阅读量591

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u011664286/article/details/126978589

版权

VUE 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

本节内容

vue的监听属性 computed

computed 与 methods效果是完全相同的不同的是computed 是实时监听某个值的变化当这个值没有发生变化时则在缓存中取只有发生了变化才会重新计算，而methods则是每次都重新计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<div id="app">
    <!--
    模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
    -->
    <hr>
    <h2>计算属性 - 在模板中直接进行业务计算</h2>
    <div id="example">
        {{ message.split('').reverse().join('') }}
    </div>

    <hr>
    <!--
        在这个地方，模板不再是简单的声明式逻辑。
        你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理
        {{ message.split('').reverse().join('') }}
        所以，对于任何复杂逻辑，你都应当使用计算属性

        计算属性的取值需要使用computed中定义的function函数名字
    -->
    <h2>计算属性 - 抽取计算的业务到computed中</h2>
    <div id="example2">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <button @click="change">动态改变值</button>
    </div>

    <hr>
    <!--
    其实我们可以在表达式中通过调用方法(method)来达到同样的计算效果，为什么还需要计算属性呢？
    虽然计算属性缓存和方法最终效果是完全相同的 然而计算属性是基于他们的响应式以来进行缓存的，只有在相关响应的依赖发生改变时才会重新请求值
    这就意味着只要message值没有发生改变 多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必在次执行函数进行计算
    方法则是每次访问reversedMessage时都会去执行一次

    计算属性 - 值不发生改变的情况下 直接在缓存取
    方法 - 实时执行

    *** 注意 ***  计算属性直接使用reversedMessage 但如果访问的是方法必须加小括号
    -->
    <h2>计算属性和方法</h2>
    <div id="example3">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <p >Method reversed message: "{{ reversedMessageASD() }}"</p>
        <p >Method reversed message: "{{ reversedMessageASD() }}"</p>
    </div>

</div>
<script type="text/javascript" src="../js/vue2.6.js"></script>
<script type="text/javascript">
    let count=0;
    new Vue({
        el:'#app',
        data:{
            message:'Hello'
        },
        methods:{
            change(){
                this.message='etjava'
            },
            reversedMessageASD () {
                count++;
                return this.message.split('').reverse().join('')+'--'+count
            }
        },
        computed:{
            // 计算属性的取值
            reversedMessage(){
                count++;
                // this.message 指向的是data中定义的message
                return this.message.split('').reverse().join('')+'--'+count
            }
        }
    });
</script>
</body>
</html>