VUE回顾基础3

1.方法

　　在vue模板里函数被定义为方法来使用，将函数放在methods对象里，作为一个属性，就可以在模板里使用它

　　this：在方法中this指向该方法所属的组件，可以使用this方文档data对象的属性和其他方法。this.属性/方法名  即可

2.计算属性

　　计算属性介于data的对象和方法之间，可以像访问data对象一样访问，但需要函数的方式来定义它

　　  计算属性会被缓存，只会执行一次，之后的每次调用都用的是被缓存的值。只有依赖值发生变化时代码才会被再次执行

　　这种方式可以确保代码只有在必要的时候执行，时候处理一些资源密集型的工作

　　计算属性和方法的另一个区别时，计算属性可以设置值，并在设置过程中做一些操作；实现这一点需要将计算属性由函数改为带有get，set的属性对象

<div id="app">{{numberT}}</div>
    <!-- built files will be auto injected -->
    <script>
      new Vue({
        el:"#app",
        data:{
          number:{
            numbers:[1,2,3]
          }
        },
        computed:{
          numberT:{
            get(){
              return numbers.reduce((sum,val)=>sum+val);
            },
            set(newValue){
              const oldValue = this.numberT;
              const difference = newValue - oldValue;
              this.numbers.push(difference)
            }
          }
        }
      })
    </script>

　　因业务逻辑需要，在实际项目中利用此方法来处理父级传来的数据，并在set中调用父级函数，来控制弹框的开关

/*  子组件 */
//子组件弹框
<el-dialog :title="listTitle" :visible.sync="listShow">、
</el-dialog>
//接收参数
props: [ "dialogTableVisible",]
computed: {
    listShow: {
      get() {
        return this.dialogTableVisible;
      },
      set() {
        this.close();
      }
    },
}
methods: {
    close() {
      this.$emit("closepop");
    },
}
/*  父组件 */
data(){
 return {
        dialogTableVisible: false,
    }
}    
  methods: {
    closepop() {
      this.dialogTableVisible = false;
    }
}

3.使用data对象，方法还是计算属性？

　　data：可以存储字符串，数组，对象等数据。最适合纯粹的数据！

　　方法：存储函数，并在模板中调用

　　计算属性：缓存函数，像访问data对象中的属性一样调用。适用于更加复杂的表达式。需要频繁重复使用，基本像是一个data对象的扩展增强版

　　或许上述不够形象，我们直接看表吧

	可读？	可写？	可就收参数？	需要运算？	有缓存？
data对象	是	是	否	是	无效，无需运算
方法	是	否	是	是	否
计算属性	是	是	否	是	是