寫在前面

1.每一篇文章都希望您有所識訓，每一篇文章都希望您能靜下心來瀏覽、閱讀，每一篇文章都是作者精心打磨的作品，

2.如果您覺得二郎神楊戩有點東西的話，作者希望你可以幫我點亮那個點贊的按鈕，對于二郎神楊戩這個暖男來說，真的真的非常重要，這將是我持續寫作的動力，您只需要小手輕輕一點，帶來的卻是溫暖了這個作者，給予他前進的動力，
3.除了本文案例，結合多年開發經驗我還整理出2020最新企業級高級實戰視頻教程包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！

前言

通過上一篇博客的學習，我們初步入門了Vue.js這個漸進式框架，簡單的了解了一下宣告式渲染、條件與回圈、處理用戶輸入和表單、組件應用構建等相關內容，本篇博客將會延續上一篇博客的內容進行探索Vue.js，那么一起帶著一顆平靜的心和二郎神楊戩一起學習吧！

Vue實體

每個 Vue 應用都是通過用 Vue 函式創建一個新的 Vue 實體開始的：

const vm=new Vue({
 //選項
})
復制代碼

當創建一個 Vue 實體時，你可以傳入一個選項物件，常見的有：

data：物件或者函式
methods：方法，所有需要執行的方法都必須放在methods里面
el：掛載DOM的根元素
computed：計算屬性
Vue生命周期的鉤子函式：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestory、destoryed
watch：監聽屬性

資料和方法

當一個 Vue 實體被創建時，它將 data物件中的所有的 property 加入到 Vue 的回應式系統中，當這些 property 的值發生改變時，視圖將會產生**“回應”**，即匹配更新為新的值，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">

</div>
<script src=https://www.cnblogs.com/chengxuyuanaa/p/"../js/vue.js"></script>
<script>
    //  我們的資料物件
    const data=https://www.cnblogs.com/chengxuyuanaa/p/{
        obj:1
    }
    //  該物件被加入到一個vue實體中
    const vm=new Vue({
        el:'#app',
        data:data
    });
    console.log(vm.obj===data.obj);
    vm.obj=10;
    console.log(data.obj);  //  10
    data.obj=100;
    console.log(vm.obj);    //  100
</script>
</body>
</html>

復制代碼

當這些資料改變時，視圖會重新渲染，

注意：

只有當實體被創建時就已經存在于data中property才是回應式的，如果時創建成功之后再重新添加是無法形成回應式的，

1、添加默認初始值

如果我們后期可能需要用到某些資料、并且這些資料需要回應式的，那么我們就可以在data中先定義一些資料，并設定初始值，

data:{
 name:'',
 age:0,
 sex:''
}
復制代碼

除了資料 property，Vue 實體還暴露了一些有用的實體 property 與方法，它們都有前綴 $，以便與用戶定義的 property 區分開來：

const data=https://www.cnblogs.com/chengxuyuanaa/p/{
    a:1
}
const vm=new VUe({
    el:'#app',
    data:data,
});
console.log(vm.$data=https://www.cnblogs.com/chengxuyuanaa/p/==data); // true
console.log(vm.$el===document.getElementById("#app"));

復制代碼

實體屬性

vm._uid // 自增的id
vm._isVue // 標示是vue物件，避免被observe
vm._renderProxy // Proxy代理物件
vm._self // 當前vm實體

vm.＄parent // 用于自定義子組件中，指向父組件的實體
vm.＄root // 指向根vm實體
vm.＄children // 當前組件的子組件實體陣列
vm.＄refs 

vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false // 標識是否已掛載
vm._isDestroyed = false // 標識是否已銷毀
vm._isBeingDestroyed = false // 標識是否正在銷毀

vm._events // 當前元素上系結的自定義事件
vm._hasHookEvent // 標示是否有hook:開頭的事件

vm.＄vnode // 當前自定義組件在父組件中的vnode，等同于vm.＄options._parentVnode
vm._vnode // 當前組件的vnode
vm._staticTrees // 當前組件模板內分析出的靜態內容的render函式陣列
vm.＄el // 當前組件對應的根元素

vm.＄slots // 定義在父組件中的slots，是個物件鍵為name，值為回應的陣列
vm.＄scopedSlots = emptyObject
// 內部render函式使用的創建vnode的方法
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// 用戶自定義render方法時，傳入的引數
vm.＄createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

vm._props // 被observe的存盤props資料的物件
vm._data // 被observe的存盤data資料的物件
vm._computedWatchers // 保存計算屬性創建的watcher物件
復制代碼

實體方法

vm.$watch // 觀察 Vue 實體上的一個運算式或者一個函式計算結果的變化
vm.$set  // 向回應式物件中添加一個 property，并確保這個新 property 同樣是回應式的
vm.$delete // 洗掉物件的 property，如果物件是回應式的，確保洗掉能觸發更新視圖
vm.$on  // 監聽當前實體上的自定義事件
vm.$once // 監聽一個自定義事件，但是只觸發一次，一旦觸發之后，監聽器就會被移除
vm.$off  // 移除自定義事件監聽器
vm.$emit // 觸發當前實體上的事件，附加引數都會傳給監聽器回呼
vm.$mount // 手動地掛載一個未掛載的實體
vm.$beforcepdate// 迫使 Vue 實體重新渲染
vm.$nextTick // 將回呼延遲到下次 DOM 更新回圈之后執行
vm.$destory  // 
復制代碼

實體引數vm.＄options

vm.＄options其實也就是我們new Vue(options)options這個選項物件可傳入的屬性

declare type ComponentOptions = {
  // data
  data: Object | Function | void;  // 傳入的data資料
  props?: { [key: string]: PropOptions }; // props傳入的資料
  propsData?: ?Object;  // 對于自定義組件，父級通過`props`傳過來的資料
  computed?: {  // 傳入的計算屬性
    [key: string]: Function | {
      get?: Function;
      set?: Function;
      cache?: boolean
    }
  };
  methods?: { [key: string]: Function }; // 傳入的方法
  watch?: { [key: string]: Function | string };  // 傳入的watch

  // DOM
  el?: string | Element;  // 傳入的el字串
  template?: string;  // 傳入的模板字串
  render: (h: () => VNode) => VNode;  // 傳入的render函式
  renderError?: (h: () => VNode, err: Error) => VNode;
  staticRenderFns?: Array<() => VNode>;

  // 鉤子函式
  beforeCreate?: Function;
  created?: Function;
  beforeMount?: Function;
  mounted?: Function;
  beforeUpdate?: Function;
  updated?: Function;
  activated?: Function;
  deactivated?: Function;
  beforeDestroy?: Function;
  destroyed?: Function;

  // assets
  directives?: { [key: string]: Object }; // 指令
  components?: { [key: string]: Class<Component> }; // 子組件的定義
  transitions?: { [key: string]: Object };
  filters?: { [key: string]: Function }; // 過濾器

  // context
  provide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any };
  inject?: { [key: string]: string | Symbol } | Array<string>;

  // component v-model customization
  model?: {
    prop?: string;
    event?: string;
  };

  // misc
  parent?: Component; // 父組件實體
  mixins?: Array<Object>; // mixins傳入的資料
  name?: string; // 當前的組件名
  extends?: Class<Component> | Object; // extends傳入的資料
  delimiters?: [string, string]; // 模板分隔符

  // 私有屬性，均為內部創建自定義組件的物件時使用
  _isComponent?: true;  // 是否是組件
  _propKeys?: Array<string>; // props傳入物件的鍵陣列
  _parentVnode?: VNode; // 當前組件，在父組件中的VNode物件
  _parentListeners?: ?Object; // 當前組件，在父組件上系結的事件
  _renderChildren?: ?Array<VNode>; // 父組件中定義在當前元素內的子元素的VNode陣列（slot）
  _componentTag: ?string;  // 自定義標簽名
  _scopeId: ?string;
  _base: Class<Component>; // Vue
  _parentElm: ?Node; // 當前自定義組件的父級dom結點
  _refElm: ?Node; // 當前元素的nextSlibing元素，即當前dom要插入到_parentElm結點下的_refElm前
}
復制代碼

更多內容請參考Vue檔案之API

Vue的生命周期和鉤子函式

每一個Vue實體在創建時都需要經過一系列的初始化程序，例如：設定資料監聽、模板編譯、將實體掛載到DOM并在資料變化時更新DOM等，同時也會運行一些叫做生命周期鉤子的函式，

如果有些朋友學過Java的話，那么對于Servlet的生命周期應該不陌生吧！(扯遠了)，沒有學過的朋友也沒有關系，畢竟我們主要講的Vue的生命周期和在它生命周期里的一些鉤子函式，

為了更好的講解Vue的生命周期，我從官網偷了一張圖獻給大家，

這張圖對于Vue的生命周期和鉤子函式說的非常的明白，下面我們看一張關于Vue生命周期中出現的鉤子函式示意圖，

在這里我主要講解常用的八個生命周期的鉤子函式，其它的了解一下就可以了

beforeCreate(實體創建前)

實體組件剛開始創建，元素dom和資料都還沒有初始化
應用場景：可以在這加個loading事件

created(實體創建后)

資料data已經初始化完成，方法也已經可以呼叫，但是dom為渲染，在這個周期里面如果進行請求是可以改變資料并渲染，由于dom未掛載，請求過多或者占用時間過長會導致頁面線上空白
應用場景：在這結束loading，還做一些初始化，實作函式自執行

beforeMoute(元素掛載前)

dom未完成掛載，資料初始化完成，但是資料的雙向系結還是{{}}，這是因為vue采用了虛擬dom技術

mouted(元素掛載后)

資料和dom都完成掛載，在上一個周期占位的資料把值渲染進去，一般請求會放在這個地方，因為這邊請求改變資料之后剛好能渲染

beforeUpdate(實體更新前)

只要是頁面資料改變了都會觸發，資料更新之前，頁面資料還是原來的資料，當你請求賦值一個資料的時候就會執行這個周期，如果沒有資料改變不執行

updated(實體更新后)

只要是頁面資料改變了都會觸發，資料更新完畢，頁面的資料是更新完成的

beforeUpdated和updated要謹慎使用，因為頁面更新資料的時候都會觸發，在這里操作資料很影響性能和死回圈

beforeDestory(實體銷毀前)

實體銷毀之前呼叫，在這一步，實體仍然完全可用

destory(實體銷毀后)

Vue實體銷毀后呼叫，呼叫后，Vue實體指示的所有內容都會解除系結，所有的事件監聽器都會被移除，所有的子實體也會被銷毀

講一下開發者經常會犯的錯誤，就是關于Vue的鉤子函式中使用箭頭函式的問題，這個問題覺得有必要提出來，畢竟自己在開發程序中，經常會踩這些坑，

生命周期鉤子的 this 背景關系指向呼叫它的 Vue 實體

不要在選項 property 或回呼上使用箭頭函式，比如

created()=>console.log('a')或者vm.$watch('a',newValue=https://www.cnblogs.com/chengxuyuanaa/p/>this.myMethod())，因為箭頭函式并沒有this，this會作為變數一直向上級詞法作用域查找，直至找到為止，

經常出現如下錯誤

Uncaught TypeError: Cannot read property of undefined
Uncaught TypeError: this.myMethod is not a function

這一點需要非常注意，

控制臺輸出福利

console.log支持的格式標志有:

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
   const tom={name:"楊戩", age:18}
    console.group("開始");
    console.group("第一組");
    console.log("%c%s%o","background:red;color:yellow;",'物件是：',tom);
    console.groupEnd();

    console.group("第二組");
    console.log("%c%s%o","background:red;color:yellow;",'物件是：',tom);
    console.groupEnd();

    console.group("第三組");
    console.log("%c%s%o","background:red;color:yellow;","物件是:",tom)
</script>
</body>
</html>
復制代碼

結果：

接下來通過兩個示例對Vue的生命周期進行決議

Vue生命周期示例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    {{msg}}

</div>
<button onclick="destroy()">銷毀</button>
<script src=https://www.cnblogs.com/chengxuyuanaa/p/"../js/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            msg:"Vue"
        },
        beforeCreate:function () {
            console.log("Vue實體創建前："+this.msg,this.$el);
            //  資料data和dom都沒有初始化
        },
        created:function () {
            console.log("Vue實體創建后:"+this.msg,this.$el);
            //  資料data初始化完成，dom還沒有初始化完成

        },
        beforeMount:function () {
            console.log("Vue實體掛載前"+this.msg,this.$el);

        },
        mounted:function () {
            console.log("Vue實體掛載后:"+this.msg,this.$el);

        },
        beforeUpdate:function () {
            console.log("Vue實體更新前:"+this.msg,this.$el);
        },
        updated:function () {
            console.log("Vue實體更新后:"+this.msg,this.$el);
        },
        beforeDestroy:function () {
            console.log("Vue實體銷毀前:"+this.msg,this.$el);
        },
        destroyed:function () {
            console.log("Vue實體銷毀后:"+this.msg,this.$el);
        }

    })
    function destroy() {
        vm.$destroy();
    }
</script>
</body>
</html>

復制代碼

Vue生命周期示例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{name}}
</div>
<button onclick="destroy()">銷毀</button>
<script src=https://www.cnblogs.com/chengxuyuanaa/p/"../js/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            name:"楊戩",
            age:18
        },
        beforeCreate:function () {
            console.group("Vue實體創建前");
            console.log("資料是:"+this.$data);
            console.log("掛載的元素是:"+this.$el);
            console.groupEnd();
        },
        created:function () {
            console.group("Vue實體創建后");
            console.log("資料是:"+JSON.stringify(this.$data));
            console.log("掛載的元素是:"+this.$el);
            console.groupEnd();

        },
        beforeMount:function () {
            console.group("Vue實體掛載前");
            console.log("資料是:"+JSON.stringify(this.$data));
            console.log(this.$el);
            console.groupEnd();

        },
        mounted:function () {
            console.group("Vue實體掛載后");
            console.log("資料是:"+JSON.stringify(this.$data));
            console.log(this.$el);
            console.groupEnd();

        },
        beforeUpdate:function () {
            console.group("Vue實體更新前");
            console.log("資料是:"+JSON.stringify(this.$data));
            console.log(this.$el);
            console.groupEnd();
        },
        updated:function () {
            console.group("Vue實體更新后");
            console.log("資料是:"+JSON.stringify(this.$data));
            console.log(this.$el);
            console.groupEnd();
        },
        beforeDestroy:function () {
            console.group("Vue實體銷毀前");
            console.log("資料是:"+JSON.stringify(this.$data));
            console.log(this.$el);
            console.groupEnd();
        },
        destroyed:function () {
            console.group("Vue實體銷毀后");
            console.log("資料是:"+JSON.stringify(this.$data));
            console.log(this.$el);
            console.groupEnd();
        }
    });
    function destroy() {
        vm.$destroy();
    }
</script>
</body>
</html>

復制代碼

通過兩個實體的學習，對Vue的生命周期有一定的了解，可能有些朋友沒有領悟到其精髓，但是隨著深入學習，我想大家會慢慢領悟到的，

接下來總結一下：

beforeCreate()：此時$el、data 的值都為undefined，即el 和 data 并未初始化
created()：此時可以拿到data的值，但是$el依舊為undefined，即data完成了資料的初始化，el沒有
beforeMount()：$el的值為“虛擬”的元素節點，dom未完成掛載，資料初始化完成，但是資料的雙向系結還是{{}},這是因為vue采用了虛擬dom技術
mounted()：資料和dom都完成掛載，在上一個周期占位的資料把值渲染進去，一般請求會放在這個地方，因為這邊請求改變資料之后剛好能渲染

Vue實體的手動掛載和呼叫事件

vm.＄mount( [elementOrSelector] ) 如果 Vue 實體在實體化時沒有收到 el 選項，則它處于“未掛載”狀態，沒有關聯的 DOM 元素，可以使用 vm.＄mount() 手動地掛載一個未掛載的實體，學習手動掛載和呼叫事件之前，我提取了一些vue實體常用的屬性和方法，帶有前綴＄便于與代理的data區分

vm.＄el：型別（HTMLElement）掛載元素，Vue實體的DOM根元素，即vm.$el===document.getElementById('節點')，注意：相等的情況必須是實體創建之后才行，也就是created之后
vm.＄data：型別（Object），Vue實體觀察的資料物件
vm.＄props：型別（Object），當前組件接收到的 props 物件，Vue 實體代理了對其 props 物件屬性的訪問，
vm.＄options：型別（Object），用于當前 Vue 實體的初始化選項，需要在選項中包含自定義屬性時會有用處
vm.＄parent：型別（Vue實體），父實體，如果當前實體有的話
vm.＄root：型別（Vue實體），當前組件樹的根 Vue 實體，如果當前實體沒有父實體，此實體將會是其自己，
vm.＄children：型別（Array(Vue實體)），當前實體的直接子組件，需要注意 $children 并不保證順序，也不是回應式的，如果你發現自己正在嘗試使用 $children 來進行資料系結，考慮使用一個陣列配合 v-for 來生成子組件，并且使用 Array 作為真正的來源，

手動掛載

接下來是介紹手動掛載和呼叫事件的常用方法，共有三個

var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})

// 創建并掛載到 #app (會替換 #app)
new MyComponent().＄mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在檔案之外渲染并且隨后掛載
var component = new MyComponent().＄mount()
document.getElementById('app').appendChild(component.＄el)
復制代碼

實體：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<button onclick="handleMount1()">手動掛載方式一</button>
<button onclick="handleMount2()">手動掛載方式二</button>
<button onclick="handleMount3()">手動掛載方式三</button>
<script src=https://www.cnblogs.com/chengxuyuanaa/p/"../js/vue.js"></script>
<script>
    const vm=new Vue({
        data:{
            name:'楊戩'
        },
        template: "<h2>{{name}}</h2>"
    });
    //  呼叫手動掛載方式一
    function handleMount1() {
        //  手動掛載到指定DOM元素
        vm.$mount("#app")
    }
    //  呼叫手動掛載方式二
    function handleMount2() {
        //  手動掛載，觸發編譯
        vm.$mount();
        //將編譯要生成的內容元素添加到要掛在的DOM元素中，作為子元素
        document.getElementById("app").appendChild(vm.$el);

    }
    //  呼叫手動掛載方式三
    function handleMount3() {
        //  擴展出一個新的Vue構造器
        const Component=Vue.extend({
            template:"<h2>{{name}}</h2>"
        });
        const vm01=new Component({
            el:'#app',
            data:{
                name:"楊戩"
            }
        })

    }
</script>
</body>
</html>

復制代碼

大家可以嘗試點擊按鈕試試，看下實體是否掛載成功，

銷毀實體

vm.＄destroy() 完全銷毀一個實體，清理它與其它實體的連接，解綁它的全部指令及事件監聽器，

這是實體的時候有寫的到這個方法，大家可以回過頭去看，

強制更新

vm.＄forceUpdate() 迫使 Vue 實體重新渲染，注意它僅僅影響實體本身和插入插槽內容的子組件，而不是所有子組件，
最后注意

除了vue案例，結合多年開發經驗我還整理出2020最新企業級高級實戰視頻教程包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72124.html

標籤：JavaScript

上一篇：Koa原始碼決議，帶你實作一個迷你版的Koa

下一篇：Nodejs中ES Modules如何操作運用？本文詳解

Vue學習總結之Vue的生命周期是怎么運用操作的？本文詳解