1. v-model 原理

• 原理：v-model本質上是一個語法糖。例如應用在輸入框上，就是 value屬性 和 input事件 的合寫。
• 作用：提供數據的雙向綁定。① 數據變，視圖跟著變 :value；② 視圖變，數據跟著變 @input
• 注意：$event 用于在模板中，獲取事件的形參

<template>
<div id="app" >
<input v-model="msg" type="text">
<input :value="msg" @input="msg = $event.target.value" type="text">
</div>
</template>

2. 表單類組件封裝 & v-model 簡化代碼

• 1.表單類組件 封裝 → 實現 子組件 和 父組件數據 的雙向綁定
  ① 父傳子：數據 應該是父組件 props 傳遞 過來的，拆解 v-model 綁定數據
  ② 子傳父：監聽輸入，子傳父傳值給父組件修改
  （下拉菜單監聽事件：@change）

//父組件使用
//$event拿到當前時間的形參
<BaseSelect :cityId="selectId" @事件名="selecteId = $event" />

<select :value="cityId" @change="handleChange">...</select>
//子組件封裝，子組件不能寫v-model是因為數據是父組件的，而不是自己的，所以不能使用v-model
props: {
cityId: String
},
methods: {
handleChange (e) {
//e為觸發的事件 e.target為觸發事件的事件源
this.$emit('事件名', e.target.value)
}
}

• 父組件 v-model 簡化代碼，實現 子組件 和 父組件數據 雙向綁定
  ① 子組件中：props 通過 value 接收，事件觸發 input
  ② 父組件中：v-model 給組件直接綁數據 (:value + @input )

//父組件使用
//:value="selectId"和@input="selectId = $event"
<BaseSelect v-model="selectId"></BaseSelect>

//子組件封裝
<select :value="value" @change="handleChange">...</select>
props: {
value: String
},
methods: {
handleChange (e) {
this.$emit('input', e.target.value)
}
}

3 .sync 修飾符

• 作用：可以實現 子組件 與 父組件數據 的 雙向綁定，簡化代碼
• 特點：prop屬性名，可以自定義，非固定為 value
• 場景：封裝彈框類的基礎組件， visible屬性 true顯示 false隱藏
• 本質：就是 :屬性名 和 @update:屬性名 合寫

//父組件使用
BaseDialog :visible.sync="isShow" />
<BaseDialog
:visible="isShow" 
@update:visible="isShow = $event"
/>

//子組件封裝
props: {
visible: Boolean
},
this.$emit('update:visible', false)

4. ref 和 $refs

• 作用：利用 ref 和 $refs 可以用于 獲取 dom 元素, 或 組件實例
• **特點：**查找范圍 → 當前組件內 (更精確穩定)
• ① 獲取 dom：
  1.目標標簽 – 添加 ref 屬性

<div ref="chartRef">我是渲染圖表的容器</div>

2.恰當時機, 通過 this.$refs.xxx, 獲取目標標簽

mounted () {
console.log(this.$refs.chartRef)
},

（注：querySelector 查找范圍 → 整個頁面）

// 基于準備好的dom，初始化echarts實例
const myChart = echarts.init(document.querySelector('.box'));

echarts的安裝：
npm install echarts --save

• ② 獲取組件：
  1.目標組件 – 添加 ref 屬性
  <BaseForm ref="baseForm"></BaseForm>

2.恰當時機, 通過 this.$refs.xxx,獲取目標組件，就可以??調用組件對象里面的方法??‘this.$refs.baseForm.組件方法()`

5. Vue異步更新、$nextTick

• Vue 是 異步更新 DOM (提升性能)
• $nextTick：等 DOM 更新后, 才會觸發執行此方法里的函數體
• 語法: this.$nextTick(函數體)

this.$nextTick(() => {
this.$refs.inp.focus()
})

6、打包發布

• 命令npm run build
  結果：在項目的根目錄會自動創建一個文件夾’dist’,dist中的文件就是打包后的文件，只需要放到服務器中即可。
• 在vue.config.js里的defiConfig對象中加入publicPath: './

7、打包優化：路由懶加載

說明：為了防止打包構建應用時，JavaScript包會變得非常大，影響頁面加載。所以我們要把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了

• 異步組件改造（找到路由index.js）
  用戶頻繁訪問到的首頁等，就讓它進行默認加載；除了首頁的所有內容，按需加載

//導入，變成變量要往下放
const Login = () => import('@/views/login')
const Search = () => import('@views/search')
...

• 路由中的應用

const rount = new VueRouter({routes: [...{ path: '/login/:id', component: Login },{ path: '/search', component: Search }...]
})