深海游弋的鱼 – 默默的点滴

从Vue 2到Vue 3组织代码的思维转变

到了Vue 3，当我们看完组合式 API相关文档，蠢蠢欲动立马上手把业务代码挪到setup内时，竟发现无法在setup()内部通过 this 获取当前组件实例了(this 是 undefined)！

其实想要变相获取“this”可以用 getCurrentInstance ，比如像这样访问全局属性：

import { getCurrentInstance } from 'vue'

const MyComponent = {
  setup() {
    const user = ref('aizawasayo')
    const internalInstance = getCurrentInstance()
    console.log(this) // undefined
    // 1. 访问 globalProperties
    console.log(internalInstance.appContext.config.globalProperties)
    // 2. 当前组件实例真正内容
    console.log(internalInstance.ctx, internalInstance.proxy)
    return {
      user
    }
  }
}

import { getCurrentInstance } from 'vue'

const MyComponent = {

setup() {

const user = ref('aizawasayo')

const internalInstance = getCurrentInstance()

console.log(this) // undefined

// 1. 访问 globalProperties

console.log(internalInstance.appContext.config.globalProperties)

// 2. 当前组件实例真正内容

console.log(internalInstance.ctx, internalInstance.proxy)

return {

user

}

真正属于组件的内容是ctx和proxy，proxy就是对ctx包装了一层 Proxy。目前看来属实没用，就不展开来说了。

getCurrentInstance 只能在 setup 或生命周期钩子中调用。不仅使用起来麻烦，且只适用于开发环境。官方都告知我们日常开发中不要用：

貌似到头来this的问题还是无解。Vue 3 Composition API 的设计初衷也是为了减少对组件实例的依赖，避免this指向的困扰。包括一些全局方法也可以提取到 composables 组合函数中，无需再通过当前组件的原型链获得。我们动不动就通过this获取组件实例的思想该转变了。

怎么个直接使用法？我们先看一眼简易版 选项式 API 和 组合式 API 的对比。再用例子来捋：

API 对比

1. 读写数据

Vue 2的做法，或者说Option API更准确 (后面就简写成Vue 2)

data中定义，this.xxx获取
<template>模版中不需要用this

<script>
import { getUsers } from '@/api/user'
export default {
  name: 'User',
  data: {
    return {
      listLoading: false,
      list: [],
      total: 0,
      queryInfo: {
        query: '',
        page: 1,
        pageSize: 10
      },
      emptyText: '没有相关数据',
    }
  },
  mounted() {
    this.listLoading = true
    getUsers(this.queryInfo).then(response => {
      this.list = response.data.list
      this.total = response.data.total
      this.listLoading = false
    })
  }  
}
</script>

import { getUsers } from '@/api/user'

export default {

data: {

return {

listLoading: false,

list: [],

total: 0,

queryInfo: {

query: '',

page: 1,

pageSize: 10

emptyText: '没有相关数据',

}

mounted() {

this.listLoading = true

getUsers(this.queryInfo).then(response => {

this.list = response.data.list

this.total = response.data.total

this.listLoading = false

})

}

</script>

Vue 3 的 Composition API (后面就简写成 Vue 3)

用ref reactive定义。
通过ref方法定义的属性在 setup 函数内需要通过.value去访问它的值 (template 模版内不用)， reactive则不用。我们可以简单地把 ref(obj) 理解为 reactive({ value: obj })。
详细请看 ➡️ 【Vue 3 之：弄清 ref reactive toRef toRefs】

如何选择 ref 和 reactive？建议：

基础类型值(String、Number、Boolean等) 或单值对象(类似{ count: 3 }这样只有一个属性值的对象) 使用 ref
引用类型值(Object、Array)使用 reactive
对于 ref 对象可以使用 unref 语法糖来免去.value访问的困扰

<script>
import { ref, reactive, onMounted } from 'vue'
export default {
  name: 'User',
  setup() {
    const listLoading = ref(false)
    const list = ref([]),
    const total = ref(0),
    const queryInfo = reactive({
      query: '',
      page: 1,
      pageSize: 10
    })
    const emptyText = ref('没有相关数据')

    onMounted(() => {
      listLoading.value = true
      getUsers(queryInfo).then(response => {
        list.value = response.data.list
        total.value = response.data.total
        listLoading.value = false
      })  
    })

    return {
      listLoading, 
      list,
      total,
      queryInfo,
      emptyText
    }
  }
}
</script>

import { ref, reactive, onMounted } from 'vue'

export default {

setup() {

const listLoading = ref(false)

const list = ref([]),

const total = ref(0),

const queryInfo = reactive({

query: '',

page: 1,

pageSize: 10

})

const emptyText = ref('没有相关数据')

onMounted(() => {

listLoading.value = true

getUsers(queryInfo).then(response => {

list.value = response.data.list

total.value = response.data.total

listLoading.value = false

})

return {

listLoading,

list,

total,

queryInfo,

emptyText

}

</script>

2. 定义/调用方法

Vue 2：`methods`

继续上面的例子，我们把请求列表数据的操作提取成一个方法。(略去重复的代码)

<!--模版中调用 methods 方法-->
<template>
  <button @click="show('🐸')">触发 show</button>
</template>
<script>
export default {
  methods: {
    async getList(params) { // 1.定义
      this.listLoading = true
      const response = await getUsers(params)
      this.list = response.data.list
      this.total = response.data.total
      this.listLoading = false
    },
    show(msg){
      console.log('helo', msg)
    }
  },
  mounted() {
    this.getList(this.queryInfo) // 2. 使用
  }  
}
</script>

</template>

export default {

methods: {

async getList(params) { // 1.定义

this.listLoading = true

const response = await getUsers(params)

this.list = response.data.list

this.total = response.data.total

this.listLoading = false

show(msg){

console.log('helo', msg)

}

mounted() {

this.getList(this.queryInfo) // 2. 使用

}

</script>

Vue 3

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    const getList = async (params) => { // 1.定义
      listLoading.value = true
      const response = await getUsers(params)
      list.value = response.data.list
      total.value = response.data.total
      listLoading.value = false
    }

    onMounted(() => {
      getList(queryInfo) // 2. 使用
    })
  }
}
</script>

import { onMounted } from 'vue'

export default {

setup() {

const getList = async (params) => { // 1.定义

listLoading.value = true

const response = await getUsers(params)

list.value = response.data.list

total.value = response.data.total

listLoading.value = false

}

onMounted(() => {

getList(queryInfo) // 2. 使用

})

}

</script>

3. 获取模版DOM元素/或组件实例的引用

Vue 2

直接整上 element-plus Form 表单的的例子，<el-form>是我们写的DemoForm组件的一个子组件，通过为它添加一个refattribute，就能使用使用this.$refs[ref值]直接访问子组件以及它的所有属性/方法了。
这边只放相对实际的场景用例，给 DOM 元素添加 ref 引用的例子看这里：【模板引用】。

<template>
  <el-form :model="formData" ref="formRef">
    <el-form-item label="年龄" prop="age" :rules="formRules">
      <el-input type="age" v-model.number="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'DemoForm',
  data() {
    return {
      formData: {
        age: '',
      },
      formRules: [
        { required: true, message: '年龄不能为空' },
        { type: 'number', message: '年龄必须为数字值' },
      ],
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.formRef.resetFields()
    },
  },
}
</script>

<el-form :model="formData" ref="formRef">

<el-form-item label="年龄" prop="age" :rules="formRules">

<el-input type="age" v-model.number="formData.age"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm">提交</el-button>

<el-button @click="resetForm">重置</el-button>

</el-form-item>

</el-form>

</template>

export default {

data() {

return {

formData: {

age: '',

formRules: [

{ required: true, message: '年龄不能为空' },

{ type: 'number', message: '年龄必须为数字值' },

}

methods: {

submitForm() {

this.$refs.formRef.validate(valid => {

if (valid) {

alert('submit!')

} else {

console.log('error submit!!')

return false

}

})

resetForm() {

this.$refs.formRef.resetFields()

}

</script>

Vue 3

我们来修改成 Composition API 版本：
别忘了 ref 创建的变量要用.value获取值
详细文档请阅：【在组合式 API 中使用 template refs】

<template>
  <el-form :model="formData" ref="formRef">
    <el-form-item label="年龄" prop="age" :rules="formRules">
      <el-input type="age" v-model.number="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
export default {
  setup() {
    const formRef = ref(null) // 1.用 ref 创建一个空引用
    const formData = reactive({
      age: '',
    })
    const formRules = [
      { required: true, message: '年龄不能为空' },
      { type: 'number', message: '年龄必须为数字值' },
    ]
    onMounted(() => {
      // 2.组件实例将在初始渲染后分配给 ref
      console.log(formRef.value)
    })
    const submitForm = () => {
      //  别忘了 ref 创建的变量要用`.value`获取值
      formRef.value.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    const resetForm = () => {
      formRef.value.resetFields()
    }
    return {
      formRef,
      formData,
      formRules,
      submitForm,
      resetForm,
    }
  },
}
</script>

<el-form :model="formData" ref="formRef">

<el-form-item label="年龄" prop="age" :rules="formRules">

<el-input type="age" v-model.number="formData.age"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm">提交</el-button>

<el-button @click="resetForm">重置</el-button>

</el-form-item>

</el-form>

</template>

import { reactive, ref } from '@vue/reactivity'

export default {

setup() {

const formRef = ref(null) // 1.用 ref 创建一个空引用

const formData = reactive({

age: '',

})

const formRules = [

{ required: true, message: '年龄不能为空' },

{ type: 'number', message: '年龄必须为数字值' },

]

onMounted(() => {

// 2.组件实例将在初始渲染后分配给 ref

console.log(formRef.value)

})

const submitForm = () => {

// 别忘了 ref 创建的变量要用`.value`获取值

formRef.value.validate(valid => {

if (valid) {

alert('submit!')

} else {

console.log('error submit!!')

return false

}

})

}

const resetForm = () => {

formRef.value.resetFields()

}

return {

formRef,

formData,

formRules,

submitForm,

resetForm,

}

</script>

4. 父组件向子组件传值

文档：Props
使用 DOM 模板时，camelCase (驼峰命名法) 的 props 需要使用等价的 kebab-case (短横线分隔命名) 命名。

说明：第 4-8 点 都会结合同一个 Tabs 标签页的例子，循序渐进梳理这几个属性或方法。依然用了element-plus 的组件(Tabs和TabPane)。

Vue 2

父组件：📃src/views/design/indexV2.vue

// src/views/design/indexV2.vue
<template>
  <div style="padding: 15px">
    <!-- 可以动态赋予一个变量的值 -->
    <!-- 也可以不用`:`传入一个静态的值 -->
    <design-tabs
      :tab-options="tabOptions"
      :active-tab="activeName"
    ></design-tabs>
  </div>
</template>
<script>
import DesignTabs from './DesignTabsV2.vue'
export default {
  name: 'DesignV2',
  components: { DesignTabs },
  data() {
    return {
      tabOptions: [
        { label: '衣服', key: 'clothingDesign', icon: 'cherry' },
        { label: '帽子', key: 'hatDesign', icon: 'cold-drink' },
        { label: '图案', key: 'patternDesign', icon: 'lollipop' },
      ],
      activeName: 'clothingDesign',
    }
  },
}
</script>

// src/views/design/indexV2.vue

<design-tabs

:tab-options="tabOptions"

:active-tab="activeName"

></design-tabs>

</div>

</template>

import DesignTabs from './DesignTabsV2.vue'

export default {

components: { DesignTabs },

data() {

return {

tabOptions: [

{ label: '衣服', key: 'clothingDesign', icon: 'cherry' },

{ label: '帽子', key: 'hatDesign', icon: 'cold-drink' },

{ label: '图案', key: 'patternDesign', icon: 'lollipop' },

activeName: 'clothingDesign',

}

</script>

子组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
<template>
  <el-tabs v-model="activeName">
    <el-tab-pane
      v-for="item in tabOptions"
      :label="item.label"
      :name="item.key"
    >
      <template #label>
        <span>
          <i :class="`el-icon-${item.icon}`" />
          {{ item.label }}
        </span>
      </template>
      <template #default>
        假设这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong
        >列表的子组件
      </template>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  name: 'DesignTabsV2',
  // 表示接收的 props
  // 如果定义成对象而不是数组，可以设置 prop 类型、默认值、是否必须
  props: ['tabOptions', 'activeTab'],
  data() {
    return {
      // 如果 prop 用来传递一个初始值
      // 子组件希望将其作为一个本地的数据来使用：
      activeName: this.activeTab,
    }
  }
}
</script>

// src/views/design/components/DesignTabsV2.vue

<el-tabs v-model="activeName">

<el-tab-pane

v-for="item in tabOptions"

:label="item.label"

:name="item.key"

<span>

</span>

</template>

假设这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong

>列表的子组件

</template>

</el-tab-pane>

</el-tabs>

</template>

export default {

// 表示接收的 props

// 如果定义成对象而不是数组，可以设置 prop 类型、默认值、是否必须

props: ['tabOptions', 'activeTab'],

data() {

return {

// 如果 prop 用来传递一个初始值

// 子组件希望将其作为一个本地的数据来使用：

activeName: this.activeTab,

}

</script>

Vue 3

转化成 Composition API 后的子组件：(一贯省略重复代码)
📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
<script>
import { ref, toRefs } from 'vue'
export default {
  name: 'DesignTabsV3',
  props: ['tabOptions', 'activeTab'],
  setup(props) {
    const { tabOptions, activeTab } = toRefs(props)
    const activeName = ref(activeTab)
    const handleClick = (tab, event) => {
      console.log(tab, event)
    }
    return {
      tabOptions,
      activeTab,
      activeName,
      handleClick,
    }
  },
}
</script>

// src/views/design/components/DesignTabsV3.vue

import { ref, toRefs } from 'vue'

export default {

props: ['tabOptions', 'activeTab'],

setup(props) {

const { tabOptions, activeTab } = toRefs(props)

const activeName = ref(activeTab)

const handleClick = (tab, event) => {

console.log(tab, event)

}

return {

tabOptions,

activeTab,

activeName,

handleClick,

}

</script>

5. 计算属性`computed`

比如我们现在希望在点击 tab 标签的时候能获得 tab 的序号(index)：

Vue 2

组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export default {
  name: 'DesignTabsV2',
  computed: {
    tabIndex() {
      return this.tabOptions.findIndex(item => item.key === this.activeName)
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(this.tabIndex) // tab 对应的 index
      console.log(tab.index, tab.props) 
      // 这样获得的`index`是字符串，props 可以获得传入`tab-pane`的属性
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export default {

computed: {

tabIndex() {

return this.tabOptions.findIndex(item => item.key === this.activeName)

methods: {

handleClick(tab, event) {

console.log(this.tabIndex) // tab 对应的 index

console.log(tab.index, tab.props)

// 这样获得的`index`是字符串，props 可以获得传入`tab-pane`的属性

}

Vue 3

这里就比较不一样了，props 的值是不允许在子组件直接修改的。子组件的activeName状态初始值为传入的activeTab，如果activeTab和tabOptions一样通过 toRefs 或 toRef 包装，那么activeName的修改是和activeTab深度响应的，这样会报错；
如果要同步修改父组件的值，可以通过emit事件(后面会说)

组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
import { ref, toRefs, computed } from 'vue'
export default {
  name: 'DesignTabsV3',
  setup(props) {
    const { tabOptions } = toRefs(props) // 切记 props 只读，不允许在子组件直接修改
    const activeName = ref(props.activeTab) // 将其赋为组件状态的初始值，直接 props.xx
    // const { tabOptions, activeTab } = toRefs(props)
    // const activeName = ref(activeTab) // 这样达咩

    const tabIndex = computed(() =>
      tabOptions.value.findIndex(item => {
        return item.key === activeName.value
      })
    )

    const handleClick = (tab, event) => {
      console.log(tabIndex.value)
    }
    return {
      tabOptions,
      activeName,
      handleClick,
    }
  }
}

// src/views/design/components/DesignTabsV3.vue

import { ref, toRefs, computed } from 'vue'

export default {

setup(props) {

const { tabOptions } = toRefs(props) // 切记 props 只读，不允许在子组件直接修改

const activeName = ref(props.activeTab) // 将其赋为组件状态的初始值，直接 props.xx

// const { tabOptions, activeTab } = toRefs(props)

// const activeName = ref(activeTab) // 这样达咩

const tabIndex = computed(() =>

tabOptions.value.findIndex(item => {

return item.key === activeName.value

})

)

const handleClick = (tab, event) => {

console.log(tabIndex.value)

}

return {

tabOptions,

activeName,

handleClick,

}

这里想额外提一嘴computed可以包在reactive内使用，在组件数据比较简单的情况下甚至可以直接用reactive包起组件全部数据，就好像 Option Api 的 data 选项那样。这样做的目的是在setup()访问不用再带上.value。
但这同时会带来一个问题，在模版需要使用state.xx去渲染，而且如果我们 return 的时候把state解构，包含的状态会失去响应性，那就得不偿失了。需要用toRefs包裹再传递，即可维持其响应性。

 // src/views/design/components/DesignTabsV3.vue
import { reactive, computed, toRefs } from 'vue'
export default {
  name: 'DesignTabsV3',
  setup(props) {
    const state = reactive({
      tabOps: props.tabOptions
      activeName: props.activeTab
      tabIndex: computed(() =>
        tabOptions.findIndex(item => {
        return item.key === state.activeName
      })
    })
    return { 
      // ...state //  这样会失去属性的响应式
      ...toRefs(state)
    } 
    // 甚至可以直接这样：
    return toRefs(state)
  }
}

// src/views/design/components/DesignTabsV3.vue

import { reactive, computed, toRefs } from 'vue'

export default {

setup(props) {

const state = reactive({

tabOps: props.tabOptions

activeName: props.activeTab

tabIndex: computed(() =>

tabOptions.findIndex(item => {

return item.key === state.activeName

})

return {

// ...state // 这样会失去属性的响应式

...toRefs(state)

}

// 甚至可以直接这样：

return toRefs(state)

}

6. 侦听器`watch`

获取这个tabIndex有什么用呢，目的是在当前标签变化时根据index刷新对应TabPane的子组件的数据。但是如果在标签点击事件触发数据刷新也不合适，因为我们不希望重复点击相同tab时也去刷新。那么这个时候watch或者watchEffect就登场了。

Vue 2

组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
<template>
  <!--省略部分 ...-->
      <template #default>
        这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong
        >列表的子组件
        <!--现在我们加上了 DesignList 组件-->
        <design-list :ref="'designList' + i" :type="item.key" />
      </template>
  <!--省略部分...-->
</template>
<script lang="jsx">
import { defineComponent, toRef } from 'vue'

// DesignList 组件，这里图方便混合组合式和选项式 API 写了
const DesignList = defineComponent({
  name: 'DesignList',
  props: ['type'],
  setup(props) {
    const key = toRef(props, 'type')
    return () => <div>{key.value}</div>
  },
  methods: {
    fetchData() {
      console.log(`重新请求${this.type}数据`)
    },  
  },
})

export default {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      console.log(`${val}`)
      // 触发子组件DesignList的数据请求
      this.$refs[`designList${this.tabIndex}`].fetchData() 
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

这是一个渲染<strong style="color: #409eff">{{ item.label }}</strong

>列表的子组件

<design-list :ref="'designList' + i" :type="item.key" />

</template>

</template>

import { defineComponent, toRef } from 'vue'

// DesignList 组件，这里图方便混合组合式和选项式 API 写了

const DesignList = defineComponent({

props: ['type'],

setup(props) {

const key = toRef(props, 'type')

return () => <div>{key.value}</div>

methods: {

fetchData() {

console.log(`重新请求${this.type}数据`)

})

export default {

watch: {

activeName(val) {

console.log(`${val}`)

// 触发子组件DesignList的数据请求

this.$refs[`designList${this.tabIndex}`].fetchData()

}

Vue 3

这个写法可能不是很直观，可以看下 ➡️ 组合式 API 模板引用在 v-for 中的用法
组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
<template>
  <!--省略部分 ...-->
  <!--别忘了这是v-for遍历生成的组件-->
    <design-list
      :ref="el => { if (el) designList[i] = el }"
      :type="item.key" :key="item.key + i" 
    />
  <!--省略部分 ...-->
</template>
<script>
import { ref, toRefs, computed, watch, defineComponent, toRef, onBeforeUpdate } from 'vue'

// DesignList 组件同上面代码👆

export default {
  name: 'DesignTabsV3',
  components: { DesignList },
  setup(props) {
    const designList = ref([])
    // 确保在每次更新之前重置ref
    onBeforeUpdate(() => {
      designList.value = []
    })
    watch(activeName, val => {
      console.log(`${val}`)
      designList.value[tabIndex.value].fetchData()
    })
  },
}
</script>

// src/views/design/components/DesignTabsV3.vue

<design-list

:ref="el => { if (el) designList[i] = el }"

:type="item.key" :key="item.key + i"

</template>

import { ref, toRefs, computed, watch, defineComponent, toRef, onBeforeUpdate } from 'vue'

// DesignList 组件同上面代码👆

export default {

components: { DesignList },

setup(props) {

const designList = ref([])

// 确保在每次更新之前重置ref

onBeforeUpdate(() => {

designList.value = []

})

watch(activeName, val => {

console.log(`${val}`)

designList.value[tabIndex.value].fetchData()

})

}

</script>

watch 和 watchEffect 的功能是等效的，都是侦听其依赖，并在依赖值变更时重新运行定义的函数。两者区别：

watch：

必须在第一个参数明确指定跟踪的依赖；
侦听器数据源只能是getter/effect函数、ref、reactive对象，或者包含这些类型(的数据)的数组。
换句话说，只要侦听数据不是ref、reactive对象，就必须传入一个箭头函数。
打个比方，若要侦听reactive对象的某个属性(例：const state = reactive({ count: 0 })的 count)，便不能像侦听单个ref或整个reactive对象那样直接传一个变量，而是必须在第一个参数传入一个回调函数，如() => state.count；
第二个参数是依赖值变更时执行的回调，函数内能访问被侦听状态的当前值和前一个值；
组件初始化时不会执行回调。如果需要可在第三个参数(Object)中设置immediate: true；
如果要对多层嵌套状态深度侦听，在第三个参数中设置deep: true

watchEffect：

无需手动传入依赖项；
只有一个参数，即侦听数据变更的回调函数，会自动跟踪所有函数中用到的变量；
组件初始化时即会执行一次。

7. 子组件向父组件通信(触发父组件方法)

Vue 2

父组件：📃src/views/design/indexV2.vue

// src/views/design/indexV2.vue
<template>
  <div style="padding: 15px">
    <design-tabs
      :tab-options="tabOptions"
      :active-tab="activeName"
      :tab-change="handleTabChange"
    ></design-tabs>
  </div>
</template>
<script>
export default {
  name: 'DesignV2',
  methods: {
    handleTabChange(tab) {
      this.activeName = tab
    },
  } 
}
</script>

// src/views/design/indexV2.vue

<design-tabs

:tab-options="tabOptions"

:active-tab="activeName"

:tab-change="handleTabChange"

></design-tabs>

</div>

</template>

export default {

methods: {

handleTabChange(tab) {

this.activeName = tab

}

</script>

子组件 DesignTabs：📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export defalut {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      this.$emit('tabChange', val)
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export defalut {

watch: {

activeName(val) {

this.$emit('tabChange', val)

}

Vue 3

子组件 DesignTabs：📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
export default {
  name: 'DesignTabsV3',
  emits: ['tabChange'],
  setup(props, context) {
    watch(activeName, val => {
      context.emit('tabChange', val)
    })
  }
}

// src/views/design/components/DesignTabsV3.vue

export default {

emits: ['tabChange'],

setup(props, context) {

watch(activeName, val => {

context.emit('tabChange', val)

})

}

8. 使用 Vue Router

Vue 2

📃src/views/design/components/DesignTabsV2.vue

// src/views/design/components/DesignTabsV2.vue
export defalut {
  name: 'DesignTabsV2',
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    },
  },
}

// src/views/design/components/DesignTabsV2.vue

export defalut {

watch: {

activeName(val) {

this.$router.push(`${this.$route.path}?tab=${val}`)

}

Vue 3

📃src/views/design/components/DesignTabsV3.vue

// src/views/design/components/DesignTabsV3.vue
import { useRouter, useRoute } from 'vue-router'
export default {
  name: 'DesignTabsV3',
  setup() {
    const router = useRouter()
    const route = useRoute()

    watch(activeName, val => {
      router.push(`${route.path}?tab=${val}`)
    })
  },
}

// src/views/design/components/DesignTabsV3.vue

import { useRouter, useRoute } from 'vue-router'

export default {

setup() {

const router = useRouter()

const route = useRoute()

watch(activeName, val => {

router.push(`${route.path}?tab=${val}`)

})

}

9. 获取 Vuex 对象

Vue 2

export default {
  mounted() {
    console.log(this.$store.state.name)
    this.$store.commit('show')
  } 
}

export default {

mounted() {

console.log(this.$store.state.name)

this.$store.commit('show')

}

Vue 3

<script>
import { onMounted } from 'vue'
import { useStore } from 'vuex'
export default {
  setup(props) {
    const store = useStore()

    onMounted(() => {
      console.log(store.name)
      store.commit('show')
    })
  }
}
</script>

import { onMounted } from 'vue'

import { useStore } from 'vuex'

export default {

setup(props) {

const store = useStore()

onMounted(() => {

console.log(store.name)

store.commit('show')

})

}

</script>

参考链接

从 Vue 2 到 Vue 3 组织代码的思维转变（一）- 获取组件实例

ubuntu 16.04/macOS Big Sur(11.4)编译Quasar

$ cd ~

# 安装配置 Node Version Manager，用来管理安装使用特定版本
$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm 

$ bash install.sh

# 刷新环境变量，使得设置生效
$ source ~/.bashrc

$ nvm install 16.0.0

$ nvm use 16.0.0

$ cd ~

$ git clone https://github.com/quasarframework/quasar.git

$ cd quasar

$ git checkout quasar-v1.15.23

# git checkout quasar-v2.0.3

$ cd ui

# 清除缓存的node模块
$ rm -rf node_modules 

$ npm install nan -g 

$ npm install yarn -g

# 自动根据 package-lock.json 安装依赖
$ npm install

$ yarn build

# 在当前目录下的dist目录下生成quasar.umd.js

$ cd ~

# 安装配置 Node Version Manager，用来管理安装使用特定版本

$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm

$ bash install.sh

# 刷新环境变量，使得设置生效

$ source ~/.bashrc

$ nvm install 16.0.0

$ nvm use 16.0.0

$ cd ~

$ git clone https://github.com/quasarframework/quasar.git

$ cd quasar

$ git checkout quasar-v1.15.23

# git checkout quasar-v2.0.3

$ cd ui

# 清除缓存的node模块

$ rm -rf node_modules

$ npm install nan -g

$ npm install yarn -g

# 自动根据 package-lock.json 安装依赖

$ npm install

$ yarn build

# 在当前目录下的dist目录下生成quasar.umd.js

注意，目前（2020/07/05）发现，在macOS Big Sur(11.4)版本上，dev 分支没办法编译通过。

目前（2020/07/20）发现，在macOS Big Sur(11.4)系统，quasar 2.0.3/1.15.23 版本已经可以编译通过，开发分支经常编译不通过，这部分经常发生较大变动。

参考链接

macOS Big Sur(11.4)安装指定版本Node

# 安装配置 Node Version Manager，用来管理安装使用特定版本
$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm 

$ bash install.sh

# 刷新环境变量，使得设置生效
$ source ~/.bashrc

$ nvm install 12.16.2

$ nvm use 12.16.2

# 安装配置 Node Version Manager，用来管理安装使用特定版本

$ git clone https://github.com/nvm-sh/nvm.git

$ cd nvm

$ bash install.sh

# 刷新环境变量，使得设置生效

$ source ~/.bashrc

$ nvm install 12.16.2

$ nvm use 12.16.2

参考链接

macOS Big Sur(11.4)编译vuelidate 2.x适配Vue 3.x

目前，vuelidate 2.x暂时还没发布正式版本，而如果需要适配Vue 3.x，则需要自己编译，编译过程如下：

$ brew install npm

$ brew install yarn

$ npm install bili -g

$ git clone https://github.com/vuelidate/vuelidate.git
# 如果需要编译umd版本，目前需要使用下面的仓库
# git clone https://github.com/wangqiang1588/vuelidate.git

$ cd vuelidate

$ cd packages

$ cd vuelidate

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ cd ..

$ cd validators

$ npm run build


# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ brew install npm

$ brew install yarn

$ npm install bili -g

$ git clone https://github.com/vuelidate/vuelidate.git

# 如果需要编译umd版本，目前需要使用下面的仓库

# git clone https://github.com/wangqiang1588/vuelidate.git

$ cd vuelidate

$ cd packages

$ cd vuelidate

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

$ cd ..

$ cd validators

$ npm run build

# 当前目录下的dist/index.umd.js即是目标文件，拷贝出来即可

移动端 JS 引擎哪家强

在一般的移动端开发场景中，每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的。但是市场瞬息万变，Native 语言在开发效率上存在一定不足，并且从APP版本更新到应用市场审核发布再到用户下载更新，总会存在一定的时间差，这样就导致新的功能无法及时覆盖全量用户。

为了解决这个问题，开发者们一般会在项目里引入一门脚本语言，提速APP的研发流程。在移动端应用比较广泛的脚本语言有 Lua和JavaScript，前者在游戏领域用的比较多，后者在应用领域用的比较多。本篇文章主要是想探讨一下移动双端（iOS & Android）的JavaScript引擎选型。由于个人水平有限，文章总会有遗漏和不足的地方，还请各位大佬多多指教。

JS 引擎选型要点

JavaScript作为世界上最热门的脚本语言，有着非常多的引擎实现：有Apple御用的 JavaScriptCore，有性能最强劲的V8，还有最近热度很高的QuickJS......如何从这些JS引擎里选出最适合的？我个人认为要有几个考量：

性能：这个没话说，肯定是越快越好
体积：JS引擎会增加一定的包体积
内存占用：内存占用越少越好
JavaScript 语法支持程度：支持的新语法越多越好
调试的便捷性：是否直接支持debug？还是需要自己编译实现调试工具链
应用市场平台规范：主要是iOS平台，平台禁止应用集成带JIT功能的虚拟机

比较麻烦的是，上面的几个点都不是互相独立的，比如说开启JIT的V8引擎，性能肯定是最好的，但它引擎体积就很大，内存占用也很高；在包体积上很占优势的QuickJS，由于没有JIT加持，和有JIT的引擎比起来平均会有5-10倍的性能差距。

下面我会综合刚刚提到的几个点，并选择了JavaScriptCore，V8，Hermes 和 QuickJS这4个JSVM，说说它们的优点和特点，再谈谈他们的不足。

继续阅读移动端 JS 引擎哪家强

Qussar QScrollArea动态适配View高度

我们在使用Qussar QScrollArea等控件的时候，很多情况下，必须给出一个固定的高度，否则控件的高度会变成 0，导致无法显示出来。如何动态适配View高度呢？参考如下：

<template>
  <q-page>
    . . .
    <q-scroll-area>
      <q-resize-obeserver @resize="updateHeights" />
    <q-scroll-area>
  </q-page>
</template>

<script>
. . . 
export default {
  . . . 
  methods: {
    . . .
    updateHeights(size) {
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
      //重新计算整个区域的高度，使得滚动区域占满整个父控件的高度
      const sz = this.measureElWrapSize(this.$el);
      this.$el.style.height = sz.height + 'px';
    },
    /**
     * 字符串对象是否不为空
     */
    isNotEmpty: function (s) {
        return (!this.isEmpty(s));
    },
    /**
     * 字符串对象是否为空
     */
    isEmpty: function (s) {
        return (this.isNull(s) || ('' === s));
    },
    /**
     * 对象是否为空
     */
    isNull: function (o) {
        return ((undefined === o) || (null === o));
    },
    /**
     * 对象是否不为空
     */
    isNotNull: function (o) {
        return (!this.isNull(o));
    },
    // 计算对象适配父控件大小,从底层开始向上搜索，直到搜索到受到限制的位置为止，然后反向计算应该得到的宽高
    measureElWrapSize: function (el) {
        const hls = []; //到第一次出现高度限制的父窗口的数组
        const wls = []; //到第一次出现宽度限制的父窗口的数组

        // 向上搜索，直到父控件出现高度限制，否则继续向上搜索
        let p = el.offsetParent;
        let maxH = window.innerHeight;
        while (this.isNotNull(p)) {
            const h = p.style.height;
            if (this.isNotEmpty(h)) {
                maxH = Math.min(parseInt(h), maxH);
                break;
            }
            hls[hls.length] = p;
            p = p.offsetParent;
        }

        // 逐层遍历父亲控件，计算剩余高度
        let i = 0;
        for (; i < hls.length; i++) {
            const e = hls[i];
            maxH = maxH - e.offsetTop;
        }

        //需要计算自身的顶部偏移
        maxH = maxH - el.offsetTop;

        if (maxH < 0) {
            maxH = 0;
        }

        // 向上搜索，直到父控件出现宽度限制，否则继续向上搜索
        let maxW = window.innerWidth;
        p = el.offsetParent;
        while (this.isNotNull(p)) {
            const w = p.style.width;
            if (this.isNotEmpty(w)) {
                maxW = Math.min(parseInt(w), maxW);
                break;
            }
            wls[wls.length] = p;
            p = p.offsetParent;
        }

        // 逐层遍历父亲控件，计算剩余宽度
        i = 0;
        for (; i < wls.length; i++) {
            const e = wls[i];
            maxW = maxW - e.offsetLeft;
        }

        //需要计算自身的左侧偏移
        maxW = maxW - el.offsetLeft;
        
        if (maxW < 0) {
            maxW = 0;
        }

        return {width: maxW, height: maxH};
    },
  },
}

100

101

102

103

104

105

106

107

108

109

110

111

<q-page>

. . .

<q-scroll-area>

<q-resize-obeserver @resize="updateHeights" />

<q-scroll-area>

</q-page>

</template>

. . .

export default {

. . .

methods: {

. . .

updateHeights(size) {

// {

// width: 20 // width of container (in px)

// height: 50 // height of container (in px)

// }

//重新计算整个区域的高度，使得滚动区域占满整个父控件的高度

const sz = this.measureElWrapSize(this.$el);

this.$el.style.height = sz.height + 'px';

/**

* 字符串对象是否不为空

isNotEmpty: function (s) {

return (!this.isEmpty(s));

/**

* 字符串对象是否为空

isEmpty: function (s) {

return (this.isNull(s) || ('' === s));

/**

* 对象是否为空

isNull: function (o) {

return ((undefined === o) || (null === o));

/**

* 对象是否不为空

isNotNull: function (o) {

return (!this.isNull(o));

// 计算对象适配父控件大小,从底层开始向上搜索，直到搜索到受到限制的位置为止，然后反向计算应该得到的宽高

measureElWrapSize: function (el) {

const hls = []; //到第一次出现高度限制的父窗口的数组

const wls = []; //到第一次出现宽度限制的父窗口的数组

// 向上搜索，直到父控件出现高度限制，否则继续向上搜索

let p = el.offsetParent;

let maxH = window.innerHeight;

while (this.isNotNull(p)) {

const h = p.style.height;

if (this.isNotEmpty(h)) {

maxH = Math.min(parseInt(h), maxH);

break;

}

hls[hls.length] = p;

p = p.offsetParent;

}

// 逐层遍历父亲控件，计算剩余高度

let i = 0;

for (; i < hls.length; i++) {

const e = hls[i];

maxH = maxH - e.offsetTop;

}

//需要计算自身的顶部偏移

maxH = maxH - el.offsetTop;

if (maxH < 0) {

maxH = 0;

}

// 向上搜索，直到父控件出现宽度限制，否则继续向上搜索

let maxW = window.innerWidth;

p = el.offsetParent;

while (this.isNotNull(p)) {

const w = p.style.width;

if (this.isNotEmpty(w)) {

maxW = Math.min(parseInt(w), maxW);

break;

}

wls[wls.length] = p;

p = p.offsetParent;

}

// 逐层遍历父亲控件，计算剩余宽度

i = 0;

for (; i < wls.length; i++) {

const e = wls[i];

maxW = maxW - e.offsetLeft;

}

//需要计算自身的左侧偏移

maxW = maxW - el.offsetLeft;

if (maxW < 0) {

maxW = 0;

}

return {width: maxW, height: maxH};

}

或者类似下面的情况：

<div id="q-app">
    <div class="q-pa-md">
        <q-layout class="shadow-2 rounded-borders" container ref="mainView"
                  view="hHh Lpr lff">
            . . . 
            <q-resize-obeserver @resize="updateHeights" />
        </q-layout>
    </div>
</div>
</template>

<script>
. . . 
export default {
  . . . 
  methods: {
    . . .
    updateHeights(size) {
      // {
      //   width: 20 // width of container (in px)
      //   height: 50 // height of container (in px)
      // }
      const offset = this.$refs.mainView.$el.offsetTop;
      this.$refs.mainView.$el.style.height = (window.innerHeight - offset) + 'px';
    }
  },
}

<q-layout class="shadow-2 rounded-borders" container ref="mainView"

view="hHh Lpr lff">

. . .

<q-resize-obeserver @resize="updateHeights" />

</q-layout>

</div>

</template>

. . .

export default {

. . .

methods: {

. . .

updateHeights(size) {

// {

// width: 20 // width of container (in px)

// height: 50 // height of container (in px)

// }

const offset = this.$refs.mainView.$el.offsetTop;

this.$refs.mainView.$el.style.height = (window.innerHeight - offset) + 'px';

}

参考链接

clientHeight、offsetHeight、scrollHeight

我们开发WEB代码的时候,经常回遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别。

继续阅读clientHeight、offsetHeight、scrollHeight

Thymeleaf公共css,js提取及自有css,js导入

之前参考网上的各种方法，均为达到期望的效果，于是到Thymeleaf 官网逛了下，找到官网的例子来实现了：

以fragment方式分离公有css和js，
以replace+参数的方式传入每个页面单独的css和js.

1 2	以fragment方式分离公有css和js，以replace+参数的方式传入每个页面单独的css和js.

直接上栗子：

公有css(存放在templates/common/htmlHead.html中):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
    <!-- Common styles and scripts -->
    <title th:replace="${title}">The awesome application</title>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <meta name="description" content=""></meta>
    <meta name="author" content=""></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
    <link rel="icon" href="/img/icon.ico" type="image/x-icon" />

    <link rel="shortcut icon" href="/favicon.ico" />
    <link th:href="@{/webjars/bootstrap/3.3.7/dist/css/bootstrap.css}" rel="stylesheet">
    <link href="css/common/top_header.css" rel="stylesheet">
    <link href="css/common/bottom_footer.css" rel="stylesheet">
    <!--<link th:href="${myCss}" rel="stylesheet">-->
    <link th:href="@{/webjars/cropper/2.3.4/dist/cropper.css}" rel="stylesheet">
    <link href="css/common/rspMsg.css" rel="stylesheet">
    <link href="css/common/common.css" rel="stylesheet">

    <!--/* Per-page placeholder for additional links */-->
    <th:block th:replace="${links}" />
</head>

公有css(存放在templates/common/htmlHead.html中):

<!DOCTYPE html>

<title th:replace="${title}">The awesome application</title>

<th:block th:replace="${links}" />

</head>

一般页面调用公有CSS，并使用自己的CSS:

<!DOCTYPE html>
<html lang="zh-CN">
<head th:replace="common/htmlHead :: common_header(~{::title},~{::link})">
    <title>设置</title>
    <link rel="stylesheet" href="css/index.css">
</head>
</html>

<!DOCTYPE html>

</head>

</html>

公有js的提取方式是一样的：

<!DOCTYPE html>
<html lang="zh-CN">
<div th:fragment="common_js(scripts)">
    <script th:src="@{/webjars/vue/2.3.4/dist/vue.js}"></script>
    <script th:src="@{/webjars/vue-resource/1.3.1/dist/vue-resource.js}"></script>
    <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.js}"></script>
    <script th:src="@{/webjars/tether/1.4.0/js/tether.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7/dist/js/bootstrap.js}"></script>
    <script th:src="@{/webjars/cropper/2.3.4/dist/cropper.js}"></script>
    <script src="js/common/top_header.js"></script>
    <script src="js/common/common.js"></script>

    <!--/* Per-page placeholder for additional js */-->
    <th:block th:replace="${scripts}" />
</div>
</html>

<!DOCTYPE html>

<th:block th:replace="${scripts}" />

</div>

</html>

公有JS的使用包一层DIV即可：

......
<body>
......

<!--使用公有js-->
<div th:replace="common/htmlJS::common_js(~{::script})">
    <!--每个页面自己的js-->
    <script src="js/index.js"></script>
</div>
</body>
</html>

......

<body>

......

</div>

</body>

</html>

测试结果可用，具体解释请参考Thymeleaf官方文档

注意，上述的配置在引入的是，会多出来一个DIV标签，如果想去掉这个标签，可以使用如下方式声明以及引用

<!DOCTYPE html>
<html lang="zh-CN">
<th:block th:fragment="common_js(scripts)">
    <script th:src="@{/webjars/vue/2.3.4/dist/vue.js}"></script>
    <script th:src="@{/webjars/vue-resource/1.3.1/dist/vue-resource.js}"></script>
    <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.js}"></script>
    <script th:src="@{/webjars/tether/1.4.0/js/tether.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7/dist/js/bootstrap.js}"></script>
    <script th:src="@{/webjars/cropper/2.3.4/dist/cropper.js}"></script>
    <script src="js/common/top_header.js"></script>
    <script src="js/common/common.js"></script>

    <!--/* Per-page placeholder for additional js */-->
    <th:block th:replace="${scripts}" />
</th:block>
</html>

<!DOCTYPE html>

<th:block th:fragment="common_js(scripts)">

<th:block th:replace="${scripts}" />

</th:block>

</html>

公有JS的使用包一层th:block即可：

......
<body>
......

<!--使用公有js-->
<th:block th:replace="common/htmlJS::common_js(~{::script})">
    <!--每个页面自己的js-->
    <script src="js/index.js"></script>
</th:block>
</body>
</html>

......

<body>

......

<th:block th:replace="common/htmlJS::common_js(~{::script})">

</th:block>

</body>

</html>

另外如果使用的SpringBoot版本是1.5.4，默认的thymeleaf不是3.0版本，上面的测试需要thymeleaf 3.0版本才可以，需要修改下pom.xml文件，添加以下配置即可：

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <!-- set thymeleaf version -->
        <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
    </properties>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

<java.version>1.8</java.version>

<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>

<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>

</properties>

另外如果使用的SpringBoot版本是2.5.0，则不需要任何修改，直接可以生效。

参考链接

thymeleaf与vue结合使用时，vue如何取模板里的值

<li th:each="grade : ${grades}" th:v-bind:class="|{current: gradeId==${grade.id}}|">

<a th:title="${grade.name}" href="javascript:void(0)"  th:id="${grade.id}"
  th:text="${grade.name}"  th:@click="|getCourses(${grade.id},subjectId,1)|"
  >二年级</a></li>

<a th:title="${grade.name}" href="javascript:void(0)" th:id="${grade.id}"

th:text="${grade.name}" th:@click="|getCourses(${grade.id},subjectId,1)|"

>二年级</a></li>

th:@click="|getCourses(${grade.id},subjectId,1)|"

1	th:@click="\|getCourses(${grade.id},subjectId,1)\|"

@click为VUE里绑定的点击事件，此时事件存在于thymeleaf的循环th:each下的元素，getCourses() 为vue里的方法属于js，但是需要取到模板里产生的值<年级id>

此时可以用th:v-on:"| |" 或者th:@click="| |" 简单来说就是将前端的方法当作字符串拼接起来，前面加th：就能解析${grade.id} 的值

th:v-bind:class="|{current: gradeId==${grade.id}}|"

1	th:v-bind:class="\|{current: gradeId==${grade.id}}\|"

同理，绑定class用于样式也能如此

参考链接

thymeleaf 与 vue 结合使用时，vue如何取模板里的值

Vue axios 发送 FormData 请求

一、简介
axios 默认是 Payload 格式数据请求，但有时候后端接收参数要求必须是 Form Data 格式的，所以我们就得进行转换。

Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的：

Payload：

Content-Type: 'application/json; charset=utf-8'

1	Content-Type: 'application/json; charset=utf-8'

Form Data：

Content-Type: 'application/x-www-form-urlencoded'

Content-Type: 'multipart/form-data'

Content-Type: 'application/x-www-form-urlencoded'

Content-Type: 'multipart/form-data'

上面三种 Content-Type 值介绍

application/json 和 application/x-www-form-urlencoded 都是表单数据发送时的编码类型。

form 的 enctype 属性为编码方式，常用有两种：application/x-www-form-urlencoded 和multipart/form-data，默认为 application/x-www-form-urlencoded。

当 action 为 get 时候，浏览器用 x-www-form-urlencoded 的编码方式把 form 数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串 append 到 url 后面，用 ?分割，加载这个新的 url。

当 action 为 post 时候，浏览器把 form 数据封装到 http body 中，然后发送到 server。

如果没有 type=file 的控件，用默认的 application/x-www-form-urlencoded 就可以了。

但是如果有 type=file 的话，就要用到 multipart/form-data 了。浏览器会把整个表单以控件为单位分割，并为每个部分加上 Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name) 等信息，并加上分割符 (boundary)。

二、发送 formdata 请求（下面有这几种方式格式化参的数据样本，用于参考比较，看需求选择方式）
方式一，自己封装一个格式化函数：

import axios from 'axios'

################################### 请求方式一，全局使用
// 创建 axios 实例
const service = axios.create({
  baseURL: '',
  timeout: 20000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

// 将请求数据转换成功 formdata 接收格式
service.defaults.transformRequest = (data) => {
  return stringify(data)
}

################################### 请求方式二，局部使用
axios({
  method: 'post',
  url: 'http://localhost:8080/dzm',
  data: {
    username: 'dzm',
    password: 'dzm123456'
  },
  transformRequest: [
    function (data) {
      // 将请求数据转换成功 formdata 接收格式
      return stringify(data)
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式
function stringify (data) {
  const formData = new FormData()
  for (const key in data) {
    // eslint-disable-next-line no-prototype-builtins
    if (data.hasOwnProperty(key)) {
      if (data[key]) {
        if (data[key].constructor === Array) {
          if (data[key][0]) {
            if (data[key][0].constructor === Object) {
              formData.append(key, JSON.stringify(data[key]))
            } else {
              data[key].forEach((item, index) => {
                formData.append(key + `[${index}]`, item)
              })
            }
          } else {
            formData.append(key + '[]', '')
          }
        } else if (data[key].constructor === Object) {
          formData.append(key, JSON.stringify(data[key]))
        } else {
          formData.append(key, data[key])
        }
      } else {
        if (data[key] === 0) {
          formData.append(key, 0)
        } else {
          formData.append(key, '')
        }
      }
    }
  }
  return formData
}

import axios from 'axios'

################################### 请求方式一，全局使用

// 创建 axios 实例

const service = axios.create({

baseURL: '',

timeout: 20000,

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

// 将请求数据转换成功 formdata 接收格式

service.defaults.transformRequest = (data) => {

return stringify(data)

}

################################### 请求方式二，局部使用

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return stringify(data)

}

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式

function stringify (data) {

const formData = new FormData()

for (const key in data) {

// eslint-disable-next-line no-prototype-builtins

if (data.hasOwnProperty(key)) {

if (data[key]) {

if (data[key].constructor === Array) {

if (data[key][0]) {

if (data[key][0].constructor === Object) {

formData.append(key, JSON.stringify(data[key]))

} else {

data[key].forEach((item, index) => {

formData.append(key + `[${index}]`, item)

})

}

} else {

formData.append(key + '[]', '')

}

} else if (data[key].constructor === Object) {

formData.append(key, JSON.stringify(data[key]))

} else {

formData.append(key, data[key])

}

} else {

if (data[key] === 0) {

formData.append(key, 0)

} else {

formData.append(key, '')

}

return formData

}

方式二，使用 qs 组件，但是 qs 格式化会过滤空数组数据：

import axios from 'axios'
// qs 模块是安装 axios 模块的时候就有的，不用另行安装，通过 import 引入即可使用
import qs from 'qs'

################################### 请求方式一，全局使用

// 创建 axios 实例
const service = axios.create({
  baseURL: '',
  timeout: 20000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

// 将请求数据转换成功 formdata 接收格式，这一段选方式一那种拦截转换也可以。
service.interceptors.request.use(config => {
  const token = Vue.ls.get(ACCESS_TOKEN)
  if (token) {
    // 让每个请求携带自定义 token 请根据实际情况自行修改
    config.headers['X-Token'] = token
  }
  // 将请求数据转换成功 formdata 接收格式
  config.data = qs.stringify(config.data)
  return config
}, err)

################################### 请求方式二，局部使用
axios({
  method: 'post',
  url: 'http://localhost:8080/dzm',
  data: {
    username: 'dzm',
    password: 'dzm123456'
  },
  transformRequest: [
    function (data) {
      // 将请求数据转换成功 formdata 接收格式
      return qs.stringify(data)
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

import axios from 'axios'

// qs 模块是安装 axios 模块的时候就有的，不用另行安装，通过 import 引入即可使用

import qs from 'qs'

################################### 请求方式一，全局使用

// 创建 axios 实例

const service = axios.create({

baseURL: '',

timeout: 20000,

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

// 将请求数据转换成功 formdata 接收格式，这一段选方式一那种拦截转换也可以。

service.interceptors.request.use(config => {

const token = Vue.ls.get(ACCESS_TOKEN)

if (token) {

// 让每个请求携带自定义 token 请根据实际情况自行修改

config.headers['X-Token'] = token

}

// 将请求数据转换成功 formdata 接收格式

config.data = qs.stringify(config.data)

return config

}, err)

################################### 请求方式二，局部使用

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return qs.stringify(data)

}

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

方式三，数组会被转换成字符串（这种不是特殊情况一般不会使用上）

import axios from 'axios'

################################### 请求方式跟上面一样
axios({
  method: 'post',
  url: 'http://localhost:8080/dzm',
  data: {
    username: 'dzm',
    password: 'dzm123456'
  },
  transformRequest: [
    function (data) {
      // 将请求数据转换成功 formdata 接收格式
      return stringify(data)
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式
function stringify (data) {
  let ret = ''
  for (const it in data) {
    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  ret = ret.substring(0, ret.lastIndexOf('&'))
  return ret
}

import axios from 'axios'

################################### 请求方式跟上面一样

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return stringify(data)

}

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式

function stringify (data) {

let ret = ''

for (const it in data) {

ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'

}

ret = ret.substring(0, ret.lastIndexOf('&'))

return ret

}

三、上面方式，参数格式化之后：
方式一格式化出来的数据：

// 数组无值
id: 2086
intention: 
follower_id[]: 
concat_material[]:

// 数组有值
id: 2086
intention: 
follower_id[0]: 351
follower_id[1]: 66
// 数组 json 为空会被转成正常的数组，有值会被转成字符串，所以服务器需要注意处理
concat_material: [{"fname":"视频订单.xls","key":"local/other/099f4be38fb8e69bb031cbc36ed283a6.xls"}]

// 数组无值

id: 2086

intention:

follower_id[]:

concat_material[]:

// 数组有值

id: 2086

intention:

follower_id[0]: 351

follower_id[1]: 66

// 数组 json 为空会被转成正常的数组，有值会被转成字符串，所以服务器需要注意处理

concat_material: [{"fname":"视频订单.xls","key":"local/other/099f4be38fb8e69bb031cbc36ed283a6.xls"}]

方式二格式化出来的数据：

// 数组无值
id: 2086
intention: 

// 数组有值
id: 2086
intention: 
follower_id[0]: 351
follower_id[1]: 66
concat_material[0][fname]: 视频订单.xls
concat_material[0][key]: local/other/099f4be38fb8e69bb031cbc36ed283a6.xls
concat_material[1][fname]: 视频订单1.xls
concat_material[1][key]: local/other/099f4be38fb8e69bb031cbc36ed283a8.xls

// 数组无值

id: 2086

intention:

// 数组有值

id: 2086

intention:

follower_id[0]: 351

follower_id[1]: 66

concat_material[0][fname]: 视频订单.xls

concat_material[0][key]: local/other/099f4be38fb8e69bb031cbc36ed283a6.xls

concat_material[1][fname]: 视频订单1.xls

concat_material[1][key]: local/other/099f4be38fb8e69bb031cbc36ed283a8.xls

方式三格式化出来的数据：

// 数组无值
id: 743
intention: 2
follower_id: 
concat_material:

// 数组有值
id: 2086
intention: 
follower_id: 66,351
concat_material: [object Object],[object Object]

// 数组无值

id: 743

intention: 2

follower_id:

concat_material:

// 数组有值

id: 2086

intention:

follower_id: 66,351

concat_material: [object Object],[object Object]

参考链接

Vue axios 发送 FormData 请求

一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

1. 读写数据

Vue 2的做法，或者说Option API更准确 (后面就简写成Vue 2)

Vue 3 的 Composition API (后面就简写成 Vue 3)

2. 定义/调用方法

Vue 2：methods

Vue 3

3. 获取模版DOM元素/或组件实例的引用

Vue 2

Vue 3

4. 父组件向子组件传值

Vue 2

Vue 3

5. 计算属性computed

Vue 2

Vue 3

6. 侦听器watch

Vue 2

Vue 3

7. 子组件向父组件通信(触发父组件方法)

Vue 2

Vue 3

8. 使用 Vue Router

Vue 2

Vue 3

9. 获取 Vuex 对象

Vue 2

Vue 3

参考链接

参考链接

参考链接

JS 引擎选型要点

参考链接

参考链接

参考链接

参考链接

Vue 2：`methods`

5. 计算属性`computed`

6. 侦听器`watch`