Vue的ngInit

AngularJS是小編踏入前端的第一個語言，雖然目前已經幾乎是時代的眼淚了，所以小編後來轉戰了vue，在渲染效能及編寫習慣上各方面小編都比較喜歡，但有個功能是我踏入vue至今難忘的功能就是ngInit，不知道各位有沒有遇過：一個變數只出現在某個tag中，但我又不想宣告再data裡面，且變數常出現，這時ngInit就可以幫助你少寫很多code。

小編以前都用這方法達成類似功能，但相較之下顯得攏長

<div v-for="a in ['ABC']" :key="a">

  {{ a }}

</div>

我也曾經查過directive:"v-init"、"vue ngInit"，等相關資料，但始終找不到有相關功能，但就在今天，在幫一個同事解決效能問題時，無意中看到他寫了:set屬性，經同事一番解釋，沒想到這就是我夢寐以求的功能，廢話不多說我們直接來看怎麼使用

<div :set="a = 'ABC'">

  {{ a }}

</div>

就是這麽簡單，變數a無須註冊在data裡面，就可以在set的tag裡面重複使用，這功能在很多情境都非常好用。

2021/01/08補充

今天再查詢找到了一個挺有趣的解法，因為還牽扯到大小寫，所以我認為不夠直觀，對我來說這並不是最佳解法，但也有紀錄的價值

// js

Vue.directive('init', {

  bind: function(el, binding, vnode) {

    // convert kebab-case to camelCase

    let arg = binding.arg.split('-').map((arg, index) => {

      return (index > 0) ? arg[0].toUpperCase() + arg.substring(1) : arg;

    }).join('');

    vnode.context[arg] = binding.value;

  }

});

// template 

<div v-init:my-var="'a'">

    {{ myVar }}

</div>