回首Vue3之指令篇（一）｜8月更文挑戰

這是我參與8月更文挑戰的第1天，活動詳情查看：8月更文挑戰

v-text指令是咱們在項目中常常用到的指令之一，那麼這個指令它是怎麼實現的呢，在Vue3和Vue2中它們的使用方式是否有差別呢，下面讓咱們一探究竟。

如何使用

v-text是用於綁定數據的指令。

最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值或者直接使用v-text指令。

假定一個Vue實例中有個數據title='hello world',那把它顯示在文本中，能夠用如下方法：

<h1>{{ title }}</h1>
或
<h1 v-text="title"></h1>
複製代碼

從上述雖然能夠看出，在Vue3中和Vue2中使用v-text是沒有什麼差別的，可是Vue3的初始化數據是和Vue2有些差別的，咱們可使用setup函數初始化數據，此篇文章setup函數不加以延伸，後面文章會提到，下面讓咱們看看Vue3中是怎麼初始化數據的。

<div id="app">
    <h1>{{title}}</h1>
</div>

<script src="../dist/vue.global.js"></script>
<script> const { createApp, ref } = Vue createApp({ setup() { const title = ref('hello world') return { title } } }).mount("#app") </script>
複製代碼

vue.global.js是Vue3打包後的依賴文件，須要的能夠本身打包一下，上述代碼中顯示了Vue3的基本初始化，與Vue2的初始化方式徹底不同，對裏面的方法就不解釋了，後面文章會加以闡述，在此須要瞭解的能夠看下官網。

自定義指令

Vue3中如何自定義一個指令？

在Vue3中仍是使用directive方法來自定義指令，對比Vue2裏面的生命週期發生了一點變化。 下面是模仿v-text指令的功能自定義的一個簡易的指令v-ctext。

<div id="app">
    <h1>{{title}}</h1>
    <h1 v-ctext="title"></h1>
</div>

<script src="../dist/vue.global.js"></script>
<script> const { createApp, ref } = Vue const app = createApp({ setup() { const title = ref('hello world') return { title } } }) // 自定義v-ctext綁定數據 app.directive('ctext',{ mounted(el,{value}){ el.textContent=value; } }) app.mount("#app") </script>
複製代碼

以上事例，運行結果與v-text的功能同樣，可是還有不少未考慮的狀況，好比監聽數據變化，有無標籤銷燬等狀況，你們根據本身的需求能夠去嘗試一下。

textContent

從上述代碼中el.textContent=value能夠看出，咱們在改變el的文本變化時用的是textContent，而不是innerText，雖然平時咱們在用的時候感受不到他們的差別，可是他們仍是有必定差別性的。

1. textContent獲取全部元素的內容，包括 script和style元素。相比之下， innerText只顯示「人類可讀」的元素。
2. textContent返回節點中的每一個元素。相反， innerText知道樣式而且不會返回「隱藏」元素的文本。

須要查看更多的差別性

總結

1. Vue3中v-text的使用與Vue2中沒有什麼差別，可是數據初始化發生了改變。

2. 在咱們學習中，咱們能夠先學會使用，再學會模擬實現對應的功能，最後再深刻了解源碼，相應你必定會有收穫，固然學習方法因人而異。