插值表达式-方法-计算属性实现反转

ゞ浴缸里的玫瑰 2021-07-24 22:13 428阅读 0赞

# 一 代码 #

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <p>原始值：{
       {message}}</p>
            
            
            <p>反转字符串：{
       { message.split('').reverse().join('')}}</p>
            
            
            <p>使用方法：{
       { reversed() }}</p>
            <p>使用方法2：{
       { reversed() }}</p>
            
            
            
            <p>使用计算属性：{
       { reversedMessage }}</p>
            <p>使用计算属性2：{
       { reversedMessage }}</p>
        </div>
        <script src="vue.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                // 数据
                data() {
                    return {
                        message: 'hello'
                    }
                },
                // 计算属性
                computed: {
                    reversedMessage() {
                        console.log('计算属性')
                        return this.message.split('').reverse().join('')
                    }
                },
                // 方法
                methods: {
                    reversed() {
                        console.log('方法')
                        return this.message.split('').reverse().join('')
                    }
                }
            })    
        </script>
    </body>
    
    </html>

# 二 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 三 小结 #

> 计算属性缓存 vs 方法

看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？

计算属性基于缓存：在相关依赖发生改变时它们才会重新求值。

方法将总会再次执行。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/5c8444a6e768484396bc985ecc92c7a2.png