weex基礎(chǔ)知識(shí)

weex學(xué)習(xí)最開始的時(shí)候應(yīng)該多理解核心概念和運(yùn)作方式，關(guān)鍵的組件要記牢，達(dá)到一出現(xiàn)這個(gè)組件就知道涵義，如果臨時(shí)去翻閱文檔才回到意思的話效率就太低了，基礎(chǔ)很重要。
還有一些核心概念一定要了解清楚，包括以下幾點(diǎn)：

一、數(shù)據(jù)綁定機(jī)制

1.單向綁定

單向數(shù)據(jù)綁定的實(shí)現(xiàn)思路：

  • 所有數(shù)據(jù)只有一份

  • 一旦數(shù)據(jù)變化，就去更新頁面(只有data-->DOM，沒有DOM-->data)

  • 若用戶在頁面上做了更新，就手動(dòng)收集(雙向綁定是自動(dòng)收集)，合并到原有的數(shù)據(jù)中。


<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '單向綁定示例'
            }
        });
    </script>
</body>

2.雙向綁定

數(shù)據(jù)的雙向綁定是vue實(shí)現(xiàn)的一大功能。

使用v-model指令，實(shí)現(xiàn)視圖和數(shù)據(jù)的雙向綁定。

所謂雙向綁定，指的是vue實(shí)例中的data與其渲染的DOM元素的內(nèi)容保持一致，無論誰被改變，另一方會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(shè)置屬性訪問器實(shí)現(xiàn)的。

v-model主要用在表單的input輸入框，完成視圖和數(shù)據(jù)的雙向綁定。

v-model只能用在<input>、<select>、<textarea>這些表單元素上。

雙向綁定的缺點(diǎn)：不知道data什么時(shí)候變了，也不知道是誰變了，變化后也不會(huì)通知，當(dāng)然可以watch來監(jiān)聽data的變化，但這復(fù)雜，還不如單向綁定。

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>

二、組件通訊

組件通訊包括：父子組件間的通信和兄弟組件間的通信。在組件化系統(tǒng)構(gòu)建中，組件間通信必不可少的。

1.父組件 --> 子組件

  • 屬性設(shè)置
    父組件關(guān)鍵代碼如下
<template>
    <Child :child-msg="msg"></Child>
</template>

子組件關(guān)鍵代碼如下

export default {
  name: 'child',
  props: {
    child-msg: String
  }
};

child-msg 為父組件給子組件設(shè)置的額外屬性值，屬性值需在子組件中設(shè)置props，子組件中可直接使用child-msg變量。

  • 子組件調(diào)用父組件
    子組件通過 parent 獲得父組件，通過root 獲得根父組件。

2.子組件--> 父組件

  • 發(fā)送事件/監(jiān)聽事件
    子組件中某函數(shù)內(nèi)發(fā)送事件：
this.$emit('toparentevent', 'data');

父組件監(jiān)聽事件：

<Child :msg="msg" @toparentevent="todo()"></Child>

toparentevent 為子組件自定義發(fā)送事件名稱，父組件中@toparentevent為監(jiān)聽事件，todo為父組件處理方法。

3. 父組件直接獲取子組件屬性或方法

給要調(diào)用的子組件起個(gè)名字。將名字設(shè)置為子組件 ref 屬性的值。

<child-component ref="aName"></child-component>

父組件中通過 $refs.組件名 來獲得子組件，也就可以調(diào)用子組件的屬性和方法了。

var child = this.$refs.aName
child.屬性
child.方法()

父組件通過 $children 可以獲得所有直接子組件（父組件的子組件的子組件不是直接子組件）。

  • Bus中央通信
    目前中央通信是解決兄弟間通信，祖父祖孫間通信的最佳方法，不僅限于此，也可以解決父組件子組件間的相互通信。如下圖：
Bus中央通信

各組件可自己定義好組件內(nèi)接收外部組件的消息事件即可，不用理會(huì)是哪個(gè)組件發(fā)過來；而對(duì)于發(fā)送事件的組件，亦不用理會(huì)這個(gè)事件到底怎么發(fā)送給我需要發(fā)送的組件。

先設(shè)置Bus

//bus.js 
import Vue from 'vue'
export default new Vue();

組件內(nèi)監(jiān)聽事件

import bus from '@/bus';

export default {
  name: 'childa',
  methods: {
  },
  created() {
    bus.$on('childa-message', function(data) {
      console.log('I get it');
    });
  }
};

發(fā)送事件的組件

import bus from '@/bus';
//方法內(nèi)執(zhí)行下面動(dòng)作
bus.$emit('childa-message', this.data);

三、生命周期

1.生命周期鉤子函數(shù)

首先，每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個(gè)過程就是vue的生命周期。首先看一張官方文檔上的圖片


Vue生命周期

可以看到在vue一整個(gè)的生命周期中會(huì)有很多鉤子函數(shù)提供給我們?cè)趘ue生命周期不同的時(shí)刻進(jìn)行操作, 所有的鉤子函數(shù)如下

生命周期鉤子 組件狀態(tài) 最佳實(shí)踐
beforeCreate 實(shí)例初始化之后，this指向創(chuàng)建的實(shí)例，不能訪問到data、 computed、watch、methods上的方法和數(shù)據(jù) 常用于初始化非響應(yīng)式變量
created 實(shí)例創(chuàng)建完成，可訪問data、computed、watch、methods上的方法和數(shù)據(jù)，未掛載到DOM，不能訪問到el屬性，ref屬性內(nèi)容為空數(shù)組 常用于簡(jiǎn)單的ajax請(qǐng)求，頁面的初始化
beforeMount 在掛載開始之前被調(diào)用，beforeMount之前，會(huì)找到對(duì)應(yīng)的template，并編譯成render函數(shù) -
mounted 實(shí)例掛載到DOM上，此時(shí)可以通過DOM API獲取到DOM節(jié)點(diǎn)，$ref屬性可以訪問 常用于獲取VNode信息和操作，ajax請(qǐng)求
beforeUpdate 響應(yīng)式數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前 適合在更新之前訪問現(xiàn)有的DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器
updated 虛擬 DOM 重新渲染和打補(bǔ)丁之后調(diào)用，組件DOM已經(jīng)更新，可執(zhí)行依賴于DOM的操作 避免在這個(gè)鉤子函數(shù)中操作數(shù)據(jù)，可能陷入死循環(huán)
beforeDestroy 實(shí)例銷毀之前調(diào)用。這一步，實(shí)例仍然完全可用，this仍能獲取到實(shí)例 常用于銷毀定時(shí)器、解綁全局事件、銷毀插件對(duì)象等操作
destroyed 實(shí)例銷毀后調(diào)用，調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀 -

注意： vue2.0之后主動(dòng)調(diào)用$destroy()不會(huì)移除dom節(jié)點(diǎn)，作者不推薦直接destroy這種做法，如果實(shí)在需要這樣用可以在這個(gè)生命周期鉤子中手動(dòng)移除dom節(jié)點(diǎn)

2.單個(gè)組件的生命周期

  • 初始化組件時(shí)，僅執(zhí)行了beforeCreate/Created/beforeMount/mounted四個(gè)鉤子函數(shù)
  • 當(dāng)改變data中定義的變量（響應(yīng)式變量）時(shí)，會(huì)執(zhí)行beforeUpdate/updated鉤子函數(shù)
  • 當(dāng)切換組件（當(dāng)前組件未緩存）時(shí)，會(huì)執(zhí)行beforeDestory/destroyed鉤子函數(shù)
  • 初始化和銷毀時(shí)的生命鉤子函數(shù)均只會(huì)執(zhí)行一次，beforeUpdate/updated可多次執(zhí)行

3.父子組件的生命周期

  • 僅當(dāng)子組件完成掛載后，父組件才會(huì)掛載
  • 當(dāng)子組件完成掛載后，父組件會(huì)主動(dòng)執(zhí)行一次beforeUpdate/updated鉤子函數(shù)（僅首次）
  • 父子組件在data變化中是分別監(jiān)控的，但是在更新props中的數(shù)據(jù)是關(guān)聯(lián)的（可實(shí)踐）
  • 銷毀父組件時(shí)，先將子組件銷毀后才會(huì)銷毀父組件

4.兄弟組件的生命周期

  • 組件的初始化（mounted之前）分開進(jìn)行，掛載是從上到下依次進(jìn)行
  • 當(dāng)沒有數(shù)據(jù)關(guān)聯(lián)時(shí)，兄弟組件之間的更新和銷毀是互不關(guān)聯(lián)的

此外還有一些點(diǎn)需要我們?cè)趯W(xué)習(xí)時(shí)注意：（變量的標(biāo)識(shí)、方法調(diào)用、如何對(duì)應(yīng)關(guān)系、模板指令、特殊屬性、以及命名規(guī)則等）

vue基礎(chǔ)題目：

1. v-show和v-if指令的共同點(diǎn)和不同點(diǎn)?
v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏
v-if指令是直接銷毀和重建DOM達(dá)到讓元素顯示和隱藏的效果

2.如何讓CSS只在當(dāng)前組件中起作用
將當(dāng)前組件的<style>修改為<style scoped>

3.父、子組件間是如何通信的？
在Vue中，每個(gè)組件實(shí)例的作用域是孤立的。這也意味著不能（也不應(yīng)該）在子組件的模板內(nèi)直接飲用父組件的數(shù)據(jù)。父組件通過Props向子組件傳遞數(shù)據(jù)，而子組件通過Events向父組件傳遞數(shù)據(jù)

4.請(qǐng)列舉出3個(gè)Vue中常用的生命周期鉤子函數(shù)?
BeforeCreate、Created、BeforeMount、Mounted、BeforeUpdate、Update、beforeDestory、Destory.

5.Vue的雙向數(shù)據(jù)綁定原理是什么？
Vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

6.說出至少4種vue當(dāng)中的指令和它的用法？
v-if：判斷是否隱藏；v-for：數(shù)據(jù)循環(huán)出來；v-bind:class：綁定一個(gè)屬性；v-model：實(shí)現(xiàn)雙向綁定

7.delete和Vue.delete刪除數(shù)組的區(qū)別？
delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。 Vue.delete直接刪除了數(shù)組 改變了數(shù)組的鍵值。


8.下列關(guān)于vue的組件說法不正確的是（ BC ）
A.不一定要寫style
B.template視圖里可以寫多個(gè)div容器
C.父組件給子組件傳值需定義props屬性
D.子組件與父組件通信需定義$emit屬性

9.下面關(guān)于vue的聲明周期說法不正確的是（ D ）
A.總共分為8個(gè)階段:創(chuàng)建前/后、載入前/后、更新前/后、銷毀前/后、
B.updated和beforeUpdate分別是更新完成和更新前
C.創(chuàng)建后this才可以獲取屬性、mounted時(shí)$el節(jié)點(diǎn)才被渲染
D.created創(chuàng)建后$el就不是undefined了

10.下面關(guān)于js框架說法正確的是（ ABCD ）
A.Vue是一個(gè)MVVM框架
B.Vue 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件
C.Vue中可以使用 v-for 指令來循環(huán)對(duì)象
D.在 input 輸入框中我們可以使用 v-model 指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定

參考：

1.vue官網(wǎng)教程

2.vue官網(wǎng)API

3.vue生命周期深入

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 組件（Component）是Vue.js最核心的功能，也是整個(gè)架構(gòu)設(shè)計(jì)最精彩的地方，當(dāng)然也是最難掌握的。...
    六個(gè)周閱讀 5,761評(píng)論 0贊 32
  • 一：什么是閉包？閉包的用處？ （1）閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上，閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 10,031評(píng)論 1贊 52
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性：var data = { a:...
    云之外閱讀 2,369評(píng)論 0贊 6
  • VUE介紹 Vue的特點(diǎn)構(gòu)建用戶界面，只關(guān)注View層簡(jiǎn)單易學(xué)，簡(jiǎn)潔、輕量、快速漸進(jìn)式框架 框架VS庫(kù)庫(kù)，是一封裝...
    多多醬_DuoDuo_閱讀 2,855評(píng)論 1贊 17
  • 走在路上，我瞥見了 那一雙冷漠自傲的眼神 像深澗里潛藏的劍 射出的冷光，讓我逃離 可我又分明記起，在暗處 虎王讓他...
    止文閱讀 183評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容