Tricks in Vue

So, how do we solve this? /deep/ or >>>.

They can be used to override child component style. Here is the doc.

Have you ever written code like this:

{
  // ...
  created() {
    this.fetchPostList()
  },
  watch: {
    searchInputValue() {
      this.fetchPostList()
    }
  }
  // ...
}

Actually, you can simplify it by

{
  // ...
  watch: {
    searchInputValue:{
      handler: "fetchPostList",
      immediate: true
    }
  }
  // ...
}

As the doc said:

Passing in immediate: true in the option will trigger the callback immediately with the current value of the expression.

I don"t know if you have used $attrs and $listeners from this. However, I never used those until I met this situation. For example:

It"s obviously tedious to bind every attribute and listener by hand. Actually, this is where $attrs and $listeners will help us. We can write the BaseInput template like:

let BaseInput = {
  name: "base-input",
  template: `
`,
  props: {
    value: {
      type: String
    }
  },
  computed: {
    listeners() {
      const listeners = {
        ...this.$listeners,
        // move `focus` in to `listeners` instead of adding one more `focus` listener.
        focus: this.focusCb
      }
      return listeners
    }
  },
  methods: {
    focusCb(event) {
      console.log("child", event)
    }
  }
}

Have you ever wonder about the relationship between $router and $route? I give you a hint:

this.$router.currentRoute === this.$route //true

We can"t directly mutate state in Vuex. Instead, we have to commit a mutation to mutate the data. However, it would be tedious to write lots of similar mutations like this:

let store = new Vuex.Store({
  modules: {
    // ...
  },
  mutations: {
    updateName(state, data) {
      state.name = data
    },
    updateChildrenCount(state, data) {
      state.children.count = data
    }
    // other similar mutations
  }
})

We can write a public mutation to do this like:

let store = new Vuex.Store({
  modules: {
    // ...
  },
  mutations: {
    replaceProperty(state, { path, data }) {
      if (typeof path !== "string") {
        return
      }
      path = path.split(".")
      let targetObj = path.slice(0, -1).reduce((re, key) => re[key], state)
      targetObj[path.pop()] = data
    }
  }
})

Then we can mutate state in anywhere with only one mutation like:

commit(
  "replaceProperty",
  {
    path: "name",
    data: name
  },
  { root: true }
)
commit(
  "replaceProperty",
  {
    path: "children.count",
    data: data
  },
  { root: true }
)
commit(
  "replaceProperty",
  {
    path: "some.other.deep.path.in.state",
    data: data
  },
  { root: true }
)

It would also work for modules!

Original Post

7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris Fritz

vue-loader/issues/749