Vueステップアップ

一般的には、Vueをマスターします.jsの基本的ないくつかのAPIは、フロントエンドのWebサイトを正常に開発することができます.しかし、Vueをより効率的に使用して開発したい場合は、Vueになります.jsマスター、次は私が伝授するこの5つの技を真剣に勉強しなければなりません.
 
第一手:繁を簡にしたWatchers
シーンの復元:
 
1 2 3 4 5 6 7 8 created(){    this .fetchPostList() }, watch: {    searchInputValue(){      this .fetchPostList()    } }
コンポーネントの作成時にリストを取得し、inputボックスを傍受しながら、変化するたびにフィルタされたリストを再取得するシーンがよくありますが、最適化する方法はありませんか?
数式解析:
まずwatchersでは、関数の字面量名を直接使用することができる.次に、immediate:trueを宣言すると、コンポーネントの作成時にすぐに実行されることを示します.
1 2 3 4 5 6 watch: {    searchInputValue:{      handler: 'fetchPostList' ,      immediate: true    } }
第二の手:一労永逸のコンポーネント登録
シーンの復元:
 
1 2 3 4 5 6 7 8 9 10 11 import BaseButton from './baseButton' import BaseIcon from './baseIcon' import BaseInput from './baseInput'   export default {   components: {    BaseButton,    BaseIcon,    BaseInput   } }
1 2 3 4 5 6 7   v-model= "searchText"   @keydown.enter= "search" /> "search" >   "search" />
たちは UIコンポーネントをたくさん いて、それから たちがこれらのコンポーネントを する があるたびに、importを にして、componentsを しなければなりません. です.サボることができるならサボるという を って、 たちは を えて しなければなりません.
:
を りてrequireを う がありますcontext()メソッドは、 requireコンポーネントを するために、 の(モジュール)コンテキストを します.この では、 するフォルダディレクトリ、サブディレクトリを するかどうか、 するファイルの の3つのパラメータが です.
componentsフォルダにglobalというフォルダを しました.jsのファイルは、このファイルでwebpackを して なインフラストラクチャを にパッケージ します.
 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import Vue from 'vue'   function capitalizeFirstLetter(string) {   return string.charAt(0).toUpperCase() + string.slice(1) }   const requireComponent = require.context(   '.' , false , /\.vue$/    // components .vue )   requireComponent.keys().forEach(fileName => {   const componentConfig = requireComponent(fileName)     const componentName = capitalizeFirstLetter(    fileName.replace(/^\.\ //, '').replace(/\.\w+$/, '')    // filename : './baseButton.vue', ，   )     Vue.component(componentName, componentConfig. default || componentConfig) })
に たちはmainにいます.js import'components/global.js'は、 で することなく、これらのインフラストラクチャをいつでもどこでも できます.
の : のrouter key
シーンの :
のシーンは に くのプログラマーの を つけました...まずデフォルトではVue-routerを してルーティングの を します.
もし たちがブログサイトを いているとしたら、 は/post-page/aから/post-page/bにジャンプします.そして くべきことに、ページがジャンプしてデータが されていないことに づきました?!なぜなら、vue-routerは「インテリジェントに」 じコンポーネントであることを し、このコンポーネントを することを したので、created に く は されませんでした. の は、$routeの を してデータを することです. のようにします.
 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 data() {   return {    loading: false ,    error: null ,    post: null   } }, watch: {   '$route' : {    handler: 'resetData' ,    immediate: true   } }, methods: {   resetData() {    this .loading = false    this .error = null    this .post = null    this .getPost( this .$route.params.id)   },   getPost(id){     } }
バグは したが、 このように くのはあまりにも ではないだろうか.サボることができるならサボるという を って、コードをこのように いてほしいと っています.
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 data() {   return {    loading: false ,    error: null ,    post: null   } }, created () {   this .getPost( this .$route.params.id) }, methods () {   getPost(postId) {    // ...   } }
:
では、どうすればこのような を できるのでしょうか. えはrouter-viewにuniqueのkeyを することです.これにより、 コンポーネントでもurlが すれば、 ずこのコンポーネントを します.( を ったが、 のバグは けた). に、keyを ルーティングの なパスに することに して、 です.
 
1 "$route.fullpath" >
: でもできるrender
シーンの :
vueは、 コンポーネントに1つのルート しか しないことを します. のルート がある 、vueはエラーを します.
 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15