Vue2迁移到Vue3.0.5, 开发到部署避坑指南

时间  2021-08-12
标签 javascript html vue java react ios git github vue-router vuex 栏目 JavaScript 繁體版
原文   原文链接

开始

Vue3出来也一段时间了，最近公司有个项目须要重构,用Vue3重构了一遍,开发体验上来说我的以为改变其实不是特别大,可是必须吹一下vite是真的快,在开发过程当中遇到的问题也很多，特别是部署的时候,没仔细看文档就要GG了，废话很少说,直接上正题。javascript

项目架构

  • vue3.0.5
  • axios 0.21.1
  • element-plus 1.0.2-beta.35
  • vue-router 4.5.5
  • vuex: 4.0.0

说明

本文主要讲Vue2转到Vue3的一些相关对比,关于好比ref,reactive这些基础知识的文档有不少,能够看下其余大佬的相关文档大概十分钟就能够上手了。html

Vue3新的语法糖script setup

<template>
  <panel class="size-wrapper"> 这是主页 <template #footer class="dialog-footer"> <el-button type="primary" @click="onConfirmClick()">知道了</el-button> </template> </panel>
</template>
<script setup> import { ref, reactive, watch } from 'vue' import Panel from '@/components/Panel.vue' </srcipt>
复制代码
  • 直接给script标签添加setup属性,不要像旧的语法那样在底部return一堆属性出去
  • 组件import后直接在template使用,不要注册
  • 该语法感受代码量少了很多，可是文件大起来可能会有杂乱无章的感受,我是比较喜欢这种写法,看项目见仁见智吧。
  • script setup 相关文档

data属性,methods

// vue2
data() {
    return {
      loading: false,
      tableData: []
    }
},
methods：{
    getList(){
        this.loading = true
        this.tableData = []
        this.loading = false
    }
}
复制代码
// vue3
<script setup>
import { ref, reactive } from 'vue'
let state = reactive({
    loading: false,
    tableData: []
})

function getList(){
    state.loading = true
    state.tableData = []
    state.loading = false
}
</srcipt>
复制代码
  • 组合式Api没有this了，直接就是变量,更加灵活

watch、computed

// vue2
watch: {
    tableData (val) {
      this.tableData2 = []
    }
},
computed: {
    price () {
      return this.price1 * 20
    }
}
复制代码
// vue3
<script setup>
import { ref, reactive,watch,computed,watchEffect } from 'vue'

let price = ref(10) 
let price1 = ref(20)
let state = reactive({
    price1: 10,
    price2: 20,
    price3: 0
})

// 监听ref属性
watch(price1, (newVal,oldVal) => {
    console.log(newVal,oldVal)
})
// 监听多个ref属性
watch([price, price1], ([newPrice, newPrice1], [prevPrice, prevPrice1]) => {
  console.log(newPrice, newPrice1)
})
// 监听reactive属性
watch(() => state.price1, (newVal,oldVal) => {
    console.log(newVal,oldVal)
})
watch(() => state, (newVal,oldVal) => {
    console.log(newVal,oldVal)
})

const price = computed(() => price1 * 20)
const price2 = computed(() => state.price2 * 20)

// watchEffect
// 官方描述：在响应式地跟踪其依赖项时当即运行一个函数，并在更改依赖项时从新运行它
watchEffect(() => {
    const {price1,price2} = state
    state.price3 = price1 + price2
})

</srcipt>
复制代码
  • watch能够监听一个或者多个数据源
  • watch监听reactive属性须要传入一个回调函数
  • watchEffect会自动收集依赖,因此不用指定属性,那意味着它会在第一次的时候自动执行一次该函数去自动收集依赖

生命周期

// vue2
<script>
beforeCreate(){}
create(){}
mounted(){}
destory(){}
updated(){}
...
</srcipt>
复制代码
// vue3
<script setup>
import { onMounted,onUpdated,onUnmounted  } from 'vue'
onMounted(() => {
    console.log('onMounted')
})
onUpdated(() => {
    console.log('onUpdated')
})
console.log(created)
</srcipt>
输出 created、onMounted
复制代码
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeUnmount -> onBeforeUnmount
  • unmounted -> onUnmounted
  • errorCaptured -> onErrorCaptured
  • renderTracked -> onRenderTracked
  • renderTriggered -> onRenderTriggered
  • vue3去除了create相关的钩子,setup能够理解为create和beforeCreate

ref

// vue2
<template>
  <panel class="size-wrapper" ref="panel"> 这是主页 </panel>
</template>
<script>
mounted(){
    console.log(this.refs.panel)
}

</srcipt>
复制代码
// vue3 单个ref
<template>
  <panel class="size-wrapper" ref="panel"> 这是主页 </panel>
</template>
<script setup> import { ref, reactive, onMounted } from 'vue' import Panel from '@/components/Panel.vue' // ref传null自动绑定 let panel = ref(null) onMounted(() => { // 因为是ref,须要.value获取 const panelRef = panel.value console.log(panelRef) }) </srcipt>
复制代码
// vue3 多个ref
<template>
  <panel1 class="size-wrapper" :ref="el => setRefs(el, 'panel1')"> 这是主页 </panel1>
  <panel2 class="size-wrapper" :ref="el => setRefs(el, 'panel2')"> 这是主页 </panel2>
  <panel3 class="size-wrapper" :ref="el => setRefs(el, 'panel3')"> 这是主页 </panel3>
</template>
<script setup> import { ref, reactive, onMounted } from 'vue' import Panel from '@/components/Panel.vue' import Pane2 from '@/components/Pane2.vue' import Pane3 from '@/components/Pane3.vue' // 相似react传回调函数 let refs = ref({}) let setRefs = (el, name) => (refs.value[name] = el) onMounted(() => { // 因为是ref,须要.value获取 const panel1Ref = refs.value.panel1 const panel2Ref = refs.value.panel2 const panel3Ref = refs.value.panel3 console.log(panel1Ref,panel2Ref,panel3Ref) }) </srcipt>
复制代码
  • 若是在组件中指定了ref,在script里边必定要收集它,在本文的版本里若是指定了好比ref="form",而在script中没有生命ref去接收,会致使vue自动收集不到报错form is undefined
  • ref若是须要获取子组件内的方法,须要子组件暴露相关方法（下面组件说怎么暴露）,不然获取不到

组件

// 父组件
<template>
  <panel class="size-wrapper" ref="panel"> 这是主页 <DescDialog v-model:visible="state.visible" :data="state.data"> </DescDialog> </panel>
</template>
<script setup> import { reactive, onMounted } from 'vue' import Panel from '@/components/Panel.vue' let state = reactive({ visible: false, data: [] }) </srcipt>
复制代码
// 子组件
<template>
  <div> <el-dialog title="描述详情" v-model="visible" :show-close="false"> <div v-html="sizeData"></div> <template #footer class="dialog-footer"> <el-button type="primary" @click="onConfirmClick()">知道了</el-button> </template> </el-dialog> </div>
</template>

<script setup> import { defineProps, defineEmit, reactive, useContext } from 'vue' // 用于暴露组件的方法,必定程度上让组件更加清晰把 const { expose } = useContext() defineProps({ visible: { type: Boolean, default: () => false }, data: { type: Array, default: () => [] } }) const emit = defineEmit(['update:visible']) const onConfirmClick = () => { emit('update:visible', false) } expose({ onConfirmClick }) </script>

<style lang="less"> </style>

复制代码
  • vue2的:loading.sync => v-modle:visbile
  • vue2的props => defineProps
  • vue2的$emit => defineEmit,emit须要指定声明

vuex

  • 声明引入阶段和vue2没什么变化，同样引入同样使用,好比声明modules下的user.js(这里按模块区分)
import * as userApi from '@/server/api/user'

export default {
  state: {
    userInfo: {}
  },
  mutations: {
    setUserInfo(state, data) {
      state.userInfo = data
    },
    clearUserInfo(state, data) {
      state.userInfo = {}
    },
  },
  actions: {
    async getUserInfo({ commit, state }) {
      const res = await userApi.getUserInfo()
      commit('setUserInfo', res.data)
    }
  }
}

复制代码
  • 组件获取阶段
<script setup>
import { isRef } from 'vue'
import { useStore,computed,isRef } from 'vuex'

const store = useStore()

const userInfo = computed(() => store.state.user.userInfo)
const getUserInfo = () => store.dispatch('getUserInfo')
const setUserInfo = () => store.commit('setUserInfo')

const is = isRef(userInfo)
console.log(is)
// 输出true,注意若是在script中使用该属性的话须要.value,在模板使用可忽略

</script>
复制代码
  • userStore获取vuex相关信息

路由

// vue2
<script>
mounted(){
    console.log(this.$route.query)
    console.log(this.$route.params)
    // this.$router.push({path: /index})
}
</script>
复制代码
// vue3
<script setup>
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

onMounted(() => {
    console.log(route.query)
    console.log(route.params)
    // router.push({path: /index})
})

</script>
复制代码
  • router没太多改变,和vuex差很少

组件实例

  • 不少时候第三方UI框架或者自身封装的axios请求等东西会注入到全局根实例,注入以后直接在全部组件能够使用
// vue2
import Vue from 'vue'

Vue.prototype.$message = message
Vue.prototype.$notification = notification
Vue.prototype.$info = Modal.info
Vue.prototype.$success = Modal.success
Vue.prototype.$error = Modal.error
Vue.prototype.$warning = Modal.warning

// 使用
<template>
  <panel class="size-wrapper" ref="panel"> 这是主页 </panel>
</template>
<script>
mounted(){
    this.$loading().show()
    this.$loading().close()
}
</srcipt>

复制代码
// vue3
import App from '@/App.vue'
const app = createApp(App)

app.config.globalProperties.$message = message
app.config.globalProperties.$notification = notification
app.config.globalProperties.$info = Modal.info
app.config.globalProperties.$success = Modal.success
app.config.globalProperties.$error = Modal.error
app.config.globalProperties.$warning = Modal.warning

// 使用
<script setup>
import { getCurrentInstance } from 'vue'

// const { ctx } = getCurrentInstance()

// 使用proxy代替ctx
const { proxy: ctx } = getCurrentInstance()

onMounted(() => {
    const loading = ctx.$loading()
    loading.closed()
})

</script>


复制代码
  • 经过getCurrentInstance能够获取当前的组件实例
  • 注意ctx属性只在开发阶段有效,在生产环境会直接GG,使用建议不要使用ctx,用proxy代替ctx,博主因为没仔细看文档，致使部署的时候GG过一次。。
  • 看下ctx源码,若是是生产环境,结果就是一个_。。

1620375167(1).png

最后来个vite.config.js最简单的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()], // 插件
  outDir: 'dist', // 打包目录
  // 服务器配置
  server: {
    port: 3000,
    open: true,
    https: false,
    ssr: false,
    // 设置代理
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8461/api',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  // @重写命令路径
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

复制代码

总结

  • vue3用新语法糖写起来我的感受比以前代码量少了一些
  • 组合式Api开发起来更加灵活,逻辑复用较好
  • 新版devtools彷佛好不是很完善,使用起来通常般,有时数据刷新不是特别实时
  • 开发阶段错误提示有时候彷佛还不是很具体
  • 记得部署的时候千万不要有getCurrentInstance().ctx属性,它只在开发阶段生效
  • vue3文档参考
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程