VUE3总结

知识点

setup 函数的用法,可以代替 Vue2 中的 date 和 methods 属性,直接把逻辑卸载 setup 里就可以
ref 函数的使用,它是一个神奇的函数,要在template中使用的变量,必须用ref包装一下。
return出去的数据和方法,在模板中才可以使用,这样可以精准的控制暴漏的变量和方法。

Vue3与Vue2

vue3 中基本兼容vue2 中的代码,大部分公有 API 的行为和 Vue 2 一致,仅有一小部分例外。使用在 Vue 3 中发生改变或被废弃的特性时会抛出运行时警告。一个特性的兼容性也可以基于单个组件进行开启或禁用。

  • 基于 Vue 2 内部 API 或文档中未记载行为的依赖。最常见的情况就是使用 VNodes 上的私有
    property。如果你的项目依赖诸如 Vuetify、Quasar 或 Element UI 等组件库,那么最好等待一下它们的 Vue
    3 兼容版本。
  • 对 IE11 的支持:Vue 3 已经官方放弃对 IE11 的支持。如果仍然需要支持 IE11 或更低版本,那你仍需继续使用 Vue 2。
    服务端渲染:该迁移构建版本可以被用于服务端渲染,但是迁移一个自定义的服务端渲染设置有更多工作要做。大致的思路是将 vue-server-renderer 替换为 @vue/server-renderer。Vue 3 不再提供一个包渲染器,且我们推荐使用 Vite 以支持 Vue 3 服务端渲染。如果你正在使用 ,那最好等待一下 Nuxt 3。

Vue2.x 和 Vue3.x 生命周期对比

vue3组件执行同等功能优先于vue2执行
vue3项目 推

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中的Vue Router API发生了一些变化。在Vue 2中,我们可以通过this.$route和this.$router来控制路由。而在Vue 3中,我们需要使用新的API来实现相同的功能。 引用[1]中提到,现在我们可以使用useRoute来获取当前路由信息,相当于Vue 2中的this.$route。而useRouter相当于Vue 2中的this.$router。 在代码中,我们需要引入useRouter和useRoute这两个函数,可以通过以下方式进行引入: ```javascript import { useRouter, useRoute } from "vue-router"; ``` 在setup函数中,我们可以使用useRouter来获取路由实例,使用useRoute来获取当前路由信息。例如: ```javascript setup() { let router = useRouter(); let route = useRoute(); console.log("接收到的参数", route.query); return { router }; } ``` 在Vue 3中,我们可以使用router.push来进行页面跳转,类似于Vue 2中的this.$router.push。例如: ```javascript router.push('/suscomp'); router.push({ path: '/suscomp', query: { a: 1, b: 2 } }); ``` 另外,在Vue 3中,我们可以在全局中使用$router、$route、<router-view/>和<router-link/>这些API。在main.js中,我们需要将router实例通过app.use()方法进行挂载。例如: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from "@/router"; const app = createApp(App); app.mount('#app'); app.use(router); ``` 总结来说,Vue 3中的Vue Router API发生了一些变化,我们需要使用useRoute和useRouter来获取路由信息和路由实例,使用router.push来进行页面跳转,并在main.js中将router实例挂载到app上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值