vue中waiting for update signal from wds_10个vue快捷开发技巧助你成为中级前端工程师！(二)...
前言
先贊再看，養成習慣~
優雅更新props
更新 prop 在業務中是很常見的需求，但在子組件中不允許直接修改 prop，因為這種做法不符合單向數據流的原則，在開發模式下還會報出警告。因此大多數人會通過 $emit 觸發自定義事件，在父組件中接收該事件的傳值來更新 prop。
child.vue:
parent.vue:
<child :title="title" @change-title="changeTitle"></child> export default {data(){return {title: 'title'} },methods: {changeTitle(title){this.title = title}} }這種做法沒有問題，我也常用這種手段來更新 prop。但如果你只是想單純的更新 prop，沒有其他的操作。那么 sync 修飾符能夠讓這一切都變得特別簡單。
parent.vue:
<child :title.sync="title"></child>child.vue:
export defalut {props: {title: String },methods: {changeTitle(){this.$emit('update:title', 'hello')}} }只需要在綁定屬性上添加 .sync，在子組件內部就可以觸發 update:屬性名 來更新 prop。可以看到這種手段確實簡潔且優雅，這讓父組件的代碼中減少一個“沒必要的函數”。
參考文檔
在學習web前端的過程中，往往因為沒有資料或者沒人指導從而導致自己不想學，因此我特意準備了個qun，整理了一份最全面前端學習資料,從最基礎的HTML+CSS+JS 到移動端HTML5的項目實戰的學習資料都有整理，想學習的都可以申請加入
前端開發?jq.qq.com送給每一位前端小伙伴, 有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小伙伴歡迎加入學習。
provide/inject
這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在其上下游關系成立的時間里始終生效。
簡單來說，一個組件將自己的屬性通過 provide 暴露出去，其下面的子孫組件 inject 即可接收到暴露的屬性。
App.vue:
這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在其上下游關系成立的時間里始終生效。
簡單來說，一個組件將自己的屬性通過 provide 暴露出去，其下面的子孫組件 inject 即可接收到暴露的屬性。
App.vue:
在 2.5.0+ 版本可以通過設置默認值使其變成可選項:
export default {inject: {app: {default: () => ({})}},created() {console.log(this.app) } }如果你想為inject的屬性變更名稱，可以使用from來表示其來源：.
export default {inject: {myApp: {// from的值和provide的屬性名保持一致from: 'app',default: () => ({})}},created() {console.log(this.myApp) } }需要注意的是 provide 和 inject 主要在開發高階插件/組件庫時使用。并不推薦用于普通應用程序代碼中。但是某些時候，或許它能幫助到我們。
參考文檔
小型狀態管理器
大型項目中的數據狀態會比較復雜，一般都會使用 vuex 來管理。但在一些小型項目或狀態簡單的項目中，為了管理幾個狀態而引入一個庫，顯得有些笨重。
在 2.6.0+ 版本中，新增的 Vue.observable 可以幫助我們解決這個尷尬的問題，它能讓一個對象變成響應式數據：
使用：
<div @click="setCount">{{ count }}</div> import {state} from '../store.js'export default {computed: {count() {return state.count}},methods: {setCount() {state.count++}} }當然你也可以自定義mutation來復用更改狀態的方法：
import Vue from 'vue'export const state = Vue.observable({ count: 0 })export const mutations = {SET_COUNT(payload) {if (payload > 0) {state.count = payload} } }使用：
import {state, mutations} from '../store.js'export default {computed: {count() {return state.count}},methods: {setCount() {mutations.SET_COUNT(100)}} }參考文檔
卸載watch觀察
通常定義數據觀察，會使用選項的方式在 watch 中配置：
export default {data() {return {count: 1 }},watch: {count(newVal) {console.log('count 新值：'+newVal)}} }除此之外，數據觀察還有另一種函數式定義的方式：
export default {data() {return {count: 1 }},created() {this.$watch('count', function(){console.log('count 新值：'+newVal)})} }它和前者的作用一樣，但這種方式使定義數據觀察更靈活，而且$watch會返回一個取消觀察函數，用來停止觸發回調：
let unwatchFn = this.$watch('count', function(){console.log('count 新值：'+newVal) }) this.count = 2 // log: count 新值：2 unwatchFn() this.count = 3 // 什么都沒有發生...$watch第三個參數接收一個配置選項：
this.$watch('count', function(){console.log('count 新值：'+newVal) }, {immediate: true // 立即執行watch })參考文檔
巧用template
相信 v-if 在開發中是用得最多的指令，那么你一定遇到過這樣的場景，多個元素需要切換，而且切換條件都一樣，一般都會使用一個元素包裹起來，在這個元素上做切換。
<div v-if="status==='ok'"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p> </div>如果像上面的 div 只是為了切換條件而存在，還導致元素層級嵌套多一層，那么它沒有“存在的意義”。
我們都知道在聲明頁面模板時，所有元素需要放在 <template> 元素內。除此之外，它還能在模板內使用，<template> 元素作為不可見的包裹元素，只是在運行時做處理，最終的渲染結果并不包含它。
同樣的，我們也可以在<template>上使用v-for指令，這種方式還能解決v-for和v-if同時使用報出的警告問題。
<template v-for="item in 10"><div v-if="item % 2 == 0" :key="item">{{item}}</div> </template>template使用v-if， template使用v-for
過濾器復用
過濾器被用于一些常見的文本格式化，被添加在表達式的尾部，由“管道”符號指示。
<div>{{ text | capitalize }}</div> export default {data() {return {text: 'hello'} },filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}} }試想一個場景，不僅模板內用到這個函數，在 method 里也需要同樣功能的函數。但過濾器無法通過 this 直接引用，難道要在 methods 再定義一個同樣的函數嗎？
要知道，選項配置都會被存儲在實例的 $options 中，所以只需要獲取 this.$options.filters 就可以拿到實例中的過濾器。
除了能獲取到實例的過濾器外，還能獲取到全局的過濾器，因為 this.$options.filters 會順著 __proto__ 向上查找，全局過濾器就存在原型中。
自定義指令獲取實例
有的情況下，當需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。像是項目中常用的權限指令，它能精確到某個模塊節點。大概思路為獲取權限列表，如果當前綁定權限不在列表中，則刪除該節點元素。
自定義指令鉤子函數共接收3個參數，包括 el (綁定指令的真實dom)、binding (指令相關信息)、vnode (節點的虛擬dom)。
假設現在業務發生變化，applist 存儲在 vuex 里， 但指令內想要使用實例上的屬性，或者是原型上的 $store。我們是沒有辦法獲取到的，因為鉤子函數內并沒有直接提供實例訪問。vnode 作為當前的虛擬dom，它里面可是綁定到實例上下文的，這時候訪問 vnode.context 就可以輕松解決問題。
優雅注冊插件
插件通常用來為 Vue 添加全局功能。像常用的 vue-router、vuex 在使用時都是通過 Vue.use 來注冊的。Vue.use 內部會自動尋找 install 方法進行調用，接受的第一個參數是 Vue 構造函數。
一般在使用組件庫時，為了減小包體積，都是采用按需加載的方式。如果在入口文件內逐個引入組件會讓 main.js 越來越龐大，基于模塊化開發的思想，最好是單獨封裝到一個配置文件中。配合上 Vue.use，在入口文件使用能讓人一目了然。
vant.config.js：
main.js:
import Vue from 'vue' import vantCompoents from '@/config/vant.config'Vue.config.productionTip = falseVue.use(vantCompoents)new Vue({render: h => h(App) }).$mount('#app')參考文檔
自動化引入模塊
在開發中大型項目時，會將一個大功能拆分成一個個小功能，除了能便于模塊的復用，也讓模塊條理清晰，后期項目更好維護。
像 api 文件一般按功能劃分模塊，在組合時可以使用 require.context 一次引入文件夾所有的模塊文件，而不需要逐個模塊文件去引入。每當新增模塊文件時，就只需要關注邏輯的編寫和模塊暴露，require.context 會幫助我們自動引入。
需要注意 require.context 并不是天生的，而是由 webpack 提供。在構建時，webpack 在代碼中解析它。
require.context 參數：
只要是需要批量引入的場景，都可以使用這種方法。包括一些公用的全局組件，只需往文件夾內新增組件即可使用，不需要再去注冊。如果還沒用上的小伙伴，一定要了解下，簡單實用又能提高效率。
參考文檔
路由懶加載(動態chunkName)
路由懶加載作為性能優化的一種手段，它能讓路由組件延遲加載。通常我們還會為延遲加載的路由添加“魔法注釋”(webpackChunkName)來自定義包名，在打包時，該路由組件會被單獨打包出來。
上面這種寫法沒問題，但仔細一看它們結構都是相似的，作為一名出色的開發者，我們可以使用map循環來解決這種重復性的工作。
const routeOptions = [{path:'/login',name:'login',},{path:'/index',name:'index',},{path:'/detail',name:'detail',}, ]const routes = routeOptions.map(route => {if (!route.component) {route = {...route,component: () => import(`@/views/${route.name}.vue`)}}return route })let router = new Router({routes })在書寫更少代碼的同時，我們也把“魔法注釋”給犧牲掉了。總所周知，代碼中沒辦法編寫動態注釋。這個問題很尷尬，難道就沒有兩全其美的辦法了嗎？
強大的 webpack 來救場了，從 webpack 2.6.0 開始，占位符 [index] 和 [request] 被支持為遞增的數字或實際解析的文件名。我們可以這樣使用“魔法注釋”：
參考文檔， 參考文章
最后
往期相關文章：
我很酷：前端20個真正靈魂拷問，吃透這些你就是中級前端工程師！?zhuanlan.zhihu.com我很酷：10個vue快捷開發技巧助你成為中級前端工程師！?zhuanlan.zhihu.com喜歡本文的還請點個star~有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小伙伴歡迎加入我的前端開發群學習。
前端開發?jq.qq.com原文鏈接：https://juejin.im/post/5f179100f265da22e27a9833總結
以上是生活随笔為你收集整理的vue中waiting for update signal from wds_10个vue快捷开发技巧助你成为中级前端工程师！(二)...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： M1芯片CAD如何安装？M1 mac怎么
- 下一篇： vue编写to-do list源码