Vue组件的计算属性和普通属性的区别说明

目录

• 计算属性和普通属性的区别说明
• 计算属性关键词: computed
• computed vs methods
• 总结

计算属性和普通属性的区别说明

计算属性关键词: computed

计算属性模板：

computed:{
        tyPE:{
                get(){
                        //getter                }
,                set(value){
                        //setter                }
        }
}
    @H_304_34@
1.计算属性本质是包含getter和setter的方法。
2.当获取计算属性时，实际上是在调用getter方法。vue会收集计算属性的依赖，并缓存计算属性返回的结果。只有当依赖变化的时候才会重新进行计算。
3.方法没有缓存，每次调用方法都会导致重新执行。
4.计算属性的getter和setter参数固定：getter没有参数，setter只有一个参数。而方法的参数不限。
5.最重要的区别是含义上面的区别：计算属性也是一个数据，可以读取也可以赋值。而方法含义上是一个操作用于处理一些事情。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
!DOCTYPE htML>
    html>
    head>
    meta charset="utf-8">
    tITle>
    例子/title>
    script src="https://unpkg.COM/vue@next">
    /script>
    /head>
    body>
    div id="app">
    {
{
 message.split('').reverse().join('') }
}
    /div>
        script>
const app = {
  data() {
    return {
      message: 'ILOVEVUE!!'    }
  }
}
     Vue.createApp(app).mount('#app')/script>
    /body>
    /html>
    
运行结果：
！！EUVEVOLI
上例中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    title>
    例子/title>
    script src="https://cdn.statiCFile.org/vue/3.0.5/vue.global.js">
    /script>
    /head>
    body>
    div id="app">
      p>
原始字符串: {
{
 message }
}
    /p>
      p>
计算后反转字符串: {
{
 reversedMessage }
}
    /p>
    /div>
        script>
const app = {
  data() {
    return {
      message: 'ILOVEVUE!!'    }
  }
,  computed: {
    // 计算属性的 getter    reversedMessage: function () {
      // `this` 指向 vm 实例      return this.message.split('').reverse().join('')    }
  }
}
     Vue.createApp(app).mount('#app')/script>
    /body>
    /html>
    
运行结果：
原始字符串: ILOVEVUE!!
计算后反转字符串: !!EUVEVOLI
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
                                                                                        您可能感兴趣的文章:

• Vue.js中的计算属性、监视属性与生命周期详解
• VUE 组件的计算属性详解
• Vue中监视属性和计算属性区别解析

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！