Vue2.0思考一

（原創）此文章是本人初步理解關於Vue的MVVM模式、父子組件通訊、生命週期、計算屬性、方法及偵聽器的記錄筆記。

MVVM模式

• m（模型層）v（視圖層）p（控制器）

• m（模型層）v（視圖層）vm（ViewModel）

• 與mvp區別，沒有p層
• 方便操做數據
• 重點在模型層
• 面向數據進行開發
• 關於ViewModel
• 虛擬DOM
• object.defineproperties()

前端組件化思惟及通訊

• 父組件向子組件傳值

// 父組件
<template>
  ...
  <todo-item :content="item" v-for="(item,index) in list" :key="index"></todo-item>
  ...
</template>

<script>
import TodoItem from './comps/TodoItem'
...
  components: {
    TodoItem,
  },
  data () {
    return {
      todoValue: '',
      list: []
    }
  },
  methods: {
    handleBtnClick() {
      this.list.push(this.todoValue)
      this.todoValue = ''
    }
  }
}
</script>

// 子組件
<template>
  <li>{{content}}</li>
</template>

<script>
export default {
  name:'TodoItem',
  props: ["content"]
}
</script>

• 子組件向父組件傳值

// 父組件
<template>
....
  <todo-item :content="item"
    :index = "index"
    v-for="(item,index) in list"
    :key="index"
    @delete="handleItemDelete">
  </todo-item>
  ...
</template>

<script>
import TodoItem from './comps/TodoItem'
export default {
  name: 'app',
  components: {
    TodoItem,
  },
  data () {
    return {
      todoValue: '',
      list: []
    }
  },
  methods: {
    ....
    handleItemDelete(index) {
      console.log(index)
      this.list.splice(index, 1)
    }
  }
}
</script>

<template>
  <li @click="handleItemClick">{{content}}</li>
</template>

<script>
export default {
  name:'TodoItem',
  props: ["content", 'index'],
  methods: {
    handleItemClick () {
      this.$emit("delete", this.index) // 子向父
    }
  }
}
</script>

模板語法

• 插值表達式
• v-html（識別html片斷），指令
• v-text
• 等其餘v-(= js表達式)指令

計算屬性，方法，偵聽器

• 計算屬性

<template>
  <div>
    {{fullName}}{{age}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28
    };
  },
  // 計算屬性，內置緩存
  computed: {
    fullName() {
      console.log("計算了一次");
      return this.firstName + this.lastName;
    }
  }
};
</script>

• 緩存機制

若依賴值未發生改變，則不會從新計算

<template>
  <div>
    {{fullName}}{{age}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28
    };
  },
  // 計算屬性，內置緩存
  computed: {
    fullName() {
      console.log("計算了一次");
      return this.firstName + this.lastName;
    }
  }
};
</script>

• 方法

缺點：無緩存機制，性能低

<template>
  <div>{{fullName}}{{age}}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28,
      fullName: ""
    };
  },
  // 偵聽器
  watch: {
    firstName() {
      console.log("計算了一次");
      this.fullName = this.firstName + this.lastName;
    },
    lastName() {
      console.log("計算了一次");
      this.fullName = this.firstName + this.lastName;
    }
  }
};
</script>

• 偵聽器
• 不相關內容發生改變，不會觸發

• 監聽內容改變，會觸發

<template>
  <div>{{fullName}}{{age}}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28,
      fullName: ""
    };
  },
  // 偵聽器
  watch: {
    firstName() {
      console.log("計算了一次");
      this.fullName = this.firstName + this.lastName;
    },
    lastName() {
      console.log("計算了一次");
      this.fullName = this.firstName + this.lastName;
    }
  }
};
</script>

• 計算屬性的setter和getter

<template>
  <div>
    {{fullName}}{{age}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Guo",
      lastName: "Han",
      age: 28
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + this.lastName;
      },
      set(value) {
        const arr = value.split(" ");
        this.firstName = arr[0];
        this.lastName = arr[1];
      }
    }
  }
};
</script>