Common function writing method and set get writing method for calculating attributes

characteristic ：

1. When defining , To be defined as “ Method ”
2. When using calculated attributes , When ordinary attributes are used
3. Calculation properties cache the results of the calculation , Only when the data on which the calculation attribute depends changes , Before the operation is repeated

benefits ：

1. Realize the reuse of code
2. As long as the dependent data source in the calculation attribute changes , The calculated property is automatically re evaluated ！
   Common writing

<template>
  <div>
    <p> And for : {
   { num }}</p>
    <p>{
   { reverseMessage }}</p>
  </div>
</template>

<script> export default {
       data() {
       return {
       a: 10, b: 20, message: " I'm a string ", }; }, computed: {
       num() {
       return this.a + this.b; }, reverseMessage() {
       return this.message.split("").reverse().join(""); }, }, }; </script>

Complex writing

<template>
    <div>
        
        <div> Gender is ：{
    {
    getsex}}</div>
        <button @click="addarr"> add to </button>
        <div> change name Value  {
    {
    getname}}</div>
    </div>
</template>
 
<script>
    export default {
    
        name: "newsdetail",
        data(){
    
            return{
    
               sex:[' male ',' Woman '],
                first: 'wang',
                two: 'kun'
            }
        },
        computed: {
    
            //  Each calculated attribute includes a getter(get) And a setter(set)
            // The function filled in the calculation attribute is equivalent to the abbreviation get
            getsex:function (){
    
                // Calculate the return It can't be less 
                return this.sex[0]
            },
            getname:{
    
                get: function () {
    
                    console.log(' Called fullName Of get Method ');
                    return this.first + ' ' + this.two;
                },
                // Only when getname It can only be triggered when the value in changes set, Value transmitting value yes getname Changed value 
                set: function (value) {
    
                    console.log(' Called fullName Of set Method ',value);
                    const names = value.split(' ');
                    this.first = names[0];
                    this.two= names[1];
                }
 
            }
        },
        methods:{
    
            addarr:function (){
    
                this.getname='jiang ke'
            }
        }
    }
</script>
 
<style scoped>
 
</style>