Vue 生命週期

• beforeCreate (元件例項剛被建立，元件屬性計算之前，如 data 屬性等)
• created (元件例項建立完成， 屬性已繫結，但 DOM 還未生成, $el 屬性不存在)
• beforeMount-比佛毛特兒 (模版編譯/掛載之前)
• mounted-某兒得 (模版編譯/掛載之後-不保證元件已在 document 中)
• beforeUpdate (元件更新之前)
• updated (元件更新之後)
• activated (for keep-alive 元件被啟用時被呼叫)
• deactivated-滴阿克味得 (for keep-alive 元件被移除時呼叫)
• deforeDestory-滴佛絲得瑞 (元件銷燬前呼叫)
• destoryed-滴絲尊兒 (元件銷燬後呼叫)

Vue 鉤子函式

• methods-馬甚絲 (物件中定義方法)
• computed (計算屬性)

Vue 元件通訊

父元件和子元件通訊

• props-破軟絲 (傳值)
• ref-瑞府 （呼叫子元件的方法）

// 子元件
<div>
  <p class="title">{{ title }}</p>
</div>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  methods:{
      show(data){
          console.log('----', data)
      },
  }
};
// 父元件
<MenuNav :title="title" ref="MenuNav"</MenuNav>
<p @click="show">顯示</p>
import MenuNav from "@components/MenuNav/MenuNav.vue";
export default {
    data(){
        return{
            title:"這是父元件得值"
        }
    },
    methods:{
        show(){
            this.$refs.MenuNav.show('id')
        }
    }

}
 

子元件和父元件通訊

• props-破軟絲
• $parent-佩潤特
• $emit 是手動觸發當前例項上的一個指定事件。
• $on 是用來在監聽(註冊)自定義事件的。

// 父元件
<MenuNav :parentHide="parentHide" @getParent3="getParent3"></MenuNav>
import MenuNav from "@components/MenuNav/MenuNav.vue";
export default {
    data(){
        return{
            title:""
        }
    },
    methods:{
        parentShow(){
            console.log('-----父元件的方法1')
        },
        parentHide(){
            console.log('------父元件的方法2')
        },
        getParent3(data){
            console.log("------這是父元件的方法3", data);
        }
    }

}

// 子元件
<div>
  <p class="title"></p>
  <button @click="show"></button>
  <button @click="hide"></button>
  <button @click="getParent3">呼叫父元件的方法3</button>
</div>
export default {
  props: {
    parentHide: {
      type: Function,
      default: ()=>{},
    },
  },
  methods:{
      show(){
         this.$parent.parentShow()
      },
      hide(){
          this.parentHide()
      },
      getParent3() {
          this.$emit("getParent3", "這是子元件的值");
      },
  }
};

 

不相干的元件

使用 vuex

Vuex 使用

第一步在 store 增加方法

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "預設名字",
  },
  // 格的兒絲
  getters: {
    name: (state) => state.name,
  },
  // 莫特甚絲
  mutations: {
    setName(state, data) {
      state.name = data;
    },
  },
  actions: {
    changeName({ commit }, data) {
      commit("setName", data);
    },
  },
  modules: {},
});

第二步 在需要改變的地方監聽

import { mapGetters } from "vuex";
// computed 是計算屬性，只要有值改變就會觸發
computed: {
  ...mapGetters({
    name: "name",
  }),
},

第三步呼叫

<button @click="changeStoreName">改變name</button>

changeStoreName() {
  // dispatch-得絲敗切
  this.$store.dispatch("changeName", "通過vue傳");
},

vue-router 鉤子函式（路由攔截）

全域性的鉤子函式

• (之前)beforeEach（to，from，next） 每次每一個路由改變的時候都得執行一遍。
• (每次之後)afterEach（to，from，next） 每次頁面載入之後

單個的路由鉤子函式

• (之前)beforeEnter （to，from，next）設定單個路由鉤子函式

元件內的導航鉤子

• beforeRouteEnter （to，from，next） 進入這個組建路由之前
• beforeRouteUpdate （to，from，next）離開這個組建路由
• beforeRouteLeave （to，from，next） 再本路由的下級路由切換才會觸發

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件例項 `this`
    // 因為當鉤子執行前，元件例項還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
    // 可以訪問元件例項 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以訪問元件例項 `this`

  }