FCAT

Appearance

计算属性与 methods 的区别 ​

  1. 调用方式不同,函数需要加()
  2. 放在computed中只会执行一次
  3. 放在methods中调用多少次就会执行多少次
  4. 相对来讲放在computed效率高

计算属性与 watch 的区别 ​

  1. 计算属性的应用场景是计算的内容需要依赖多个属性的情况 侦听器的应用场景是计算的内容依赖一个属性的情况
  2. 计算属性缓存结果时每次都会重新创建变量，而侦听器是直接计算，不会创建变量保存结果，也就意味着，数据如果会反复的发生变化，计算很多次的情况下，计算属性的开销将会更大，也就意味着这种情况不适合使用计算属性，适合使用侦听器，那么，如果一个数据反复会被使用，但是它计算依赖的内容很少发生变化的情况下，计算属性会缓存结果，就更加适合这种情况。
  3. computed的结果是通过return返回的，而watch不需要return。
  4. watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数

1. 放到computed中 ​

html
<h1>原数据：{{msg}}</h1>
<h1>计算属性后{{computed_msg}}</h1>
<h1>原数据：{{zm}}</h1>
<h1>计算属性后：{{computed_zm}}</h1>
<h1>原数据：{{msg}}</h1>
<h1>计算属性后{{computed_msg}}</h1>
<h1>原数据：{{zm}}</h1>
<h1>计算属性后：{{computed_zm}}</h1>
js
export default {
    data:{
        msg : "Hello chain",
        zm : "nihaoya"
    },
    computed:{
        computed_msg:function() {
            // 反转字符串
            return this.msg.split('').reverse().join('');
        },
        computed_zm:function() {
            // 首字母大写,其余小写
            // toUpperCase()转大写toLowerCase()转小写
            return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
        }
    }
}
export default {
    data:{
        msg : "Hello chain",
        zm : "nihaoya"
    },
    computed:{
        computed_msg:function() {
            // 反转字符串
            return this.msg.split('').reverse().join('');
        },
        computed_zm:function() {
            // 首字母大写,其余小写
            // toUpperCase()转大写toLowerCase()转小写
            return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
        }
    }
}

2. 放到method中 ​

html
<h1>原数据：{{zm}}</h1>
<h1>计算属性后：{{computed_zm}}</h1>
<h1>methods后：{{methods_zm()}}</h1>
<h1>原数据：{{zm}}</h1>
<h1>计算属性后：{{computed_zm}}</h1>
<h1>methods后：{{methods_zm()}}</h1>
js
export default {
    data:{
        msg:"Hello chain",
        zm:"nihaoya"
    },
    computed:{
        computed_zm:function(){
            return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
        }
    },
    methods:{
        method:function(){
            return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
        }
    }
}
export default {
    data:{
        msg:"Hello chain",
        zm:"nihaoya"
    },
    computed:{
        computed_zm:function(){
            return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
        }
    },
    methods:{
        method:function(){
            return this.zm.substring(0,1).toUpperCase()+this.zm.substring(1).toLowerCase();
        }
    }
}

3. 应用场景：data数据访问data中另一个数据 ​

  1. 使用计算属性
  • 不可实时修改
js
  1. mounted() 中完成赋值
  • 不可实时修改
js
  1. 使用侦听属性
  • 实时访问修改
js

计算属性之setter ​