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 }
      ...
  ]
  })