5.Vue计算属性

一、计算属性和方法的区别

1.1 计算属性

1. 计算属性本质上是包含getter和setter的方法，当获取计算属性时，实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖，并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。
2. 计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。

1.2 方法

1. 方法没有缓存，每次调用方法都会导致重新执行。
2. 方法的参数不限。

1.3 总结

1. 由于有以上的这些区别，因此计算属性通常是根据已有数据得到其他数据，并在得到数据的过程中不建议使用异步、当前时间、随机数等副作用操作。
2. 实际上，他们最重要的区别是含义上的区别。

• 计算属性含义上也是一个数据，可以读取也可以赋值，所以计算属性命名一般为名词，如fullName(){}。
• 方法含义上是一个操作，用于处理一些事情，所以方法命名一般为动词，如getFullName()。

二、语法

1. 完整的计算属性书写：

computed: {
  propName: {
    get(){
      // getter
    },
    set(val){
      // setter
    }
  }
}

2. 只包含getter的计算属性简写：

computed: {
  propName(){
    // getter
  }
}

三、写一个图标组件Icon

//Icon.vue
<template>
  <i class="iconfont" :class="fontClass"></i>
</template>

<script>
const classMap = {
  home: "iconzhuye",
  success: "iconzhengque",
  error: "iconcuowu",
  close: "iconguanbi",
  warn: "iconjinggao",
  info: "iconxinxi",
  blog: "iconblog",
  code: "iconcode",
  about: "iconset_about_hov",
  weixin: "iconweixin",
  mail: "iconemail",
  github: "icongithub",
  qq: "iconsign_qq",
  arrowUp: "iconiconfonticonfonti2copy",
  arrowDown: "iconiconfonticonfonti2",
  empty: "iconempty",
  chat: "iconliuyan",
};

export default {
    name:'Icon',
    props:{
        type:{
            type:String,
            required:true
        }
    },
    computed:{
        fontClass(){
            return classMap[this.type];
        }
    }
}
</script>

<style >
@import "//at.alicdn.com/t/font_2164449_nalfgtq7il.css";
.iconfont{
    color: inherit;
    font-size: inherit;
}
</style>

//App.vue
<template>
  <div id="app">
    <Icon type='home'/>
    <Icon type='success'/>
    <Icon type='error'/>
    <Icon type='close'/>
    <Icon type='warn'/>
    <Icon type='info'/>
    <Icon type='blog'/>
    <Icon type='code'/>
    <Icon type='about'/>
    <Icon type='weixin'/>
    <Icon type='mail'/>
    <Icon type='github'/>
    <Icon type='qq'/>
    <Icon type='qrrowUp'/>
    <Icon type='arrowDown'/>
    <Icon type='empty'/>
    <Icon type='chat'/>
  </div>
</template>

<script>
import Icon from './components/Icon'
export default {
  name: 'App',
  components: {
    Icon
  }
}
</script>

<style>

</style>

四、作用域样式对子组件根元素的影响