19-vue2到vue3的一些变化

这篇具有很好参考价值的文章主要介绍了19-vue2到vue3的一些变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、全局API的转移

  • Vue 2.x 有许多全局 API 和配置。

    • 例如:注册全局组件、注册全局指令等。

      //注册全局组件
      Vue.component('MyButton', {
        data: () => ({
          count: 0
        }),
        template: '<button @click="count++">Clicked {{ count }} times.</button>'
      })
      
      //注册全局指令
      Vue.directive('focus', {
        inserted: el => el.focus()
      }
      
  • Vue3.0中对这些API做出了调整:

    • 将全局的API,即:Vue.xxx调整到应用实例(app)上

      2.x 全局 API(Vue 3.x 实例 API (app)
      Vue.config.xxxx app.config.xxxx
      Vue.config.productionTip 移除
      Vue.component app.component
      Vue.directive app.directive
      Vue.mixin app.mixin
      Vue.use app.use
      Vue.prototype app.config.globalProperties

2、其他改变

  • data选项应始终被声明为一个函数。

  • 过度类名的更改:

    • Vue2.x写法

      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-leave,
      .v-enter-to {
        opacity: 1;
      }
      
    • Vue3.x写法

      .v-enter-from,
      .v-leave-to {
        opacity: 0;
      }
      
      .v-leave-from,
      .v-enter-to {
        opacity: 1;
      }
      
  • 移除keyCode作为 v-on 的修饰符,同时也不再支持config.keyCodes

  • 移除v-on.native修饰符

    • 父组件中绑定事件

      <my-component
        v-on:close="handleComponentEvent"
        v-on:click="handleNativeClickEvent"
      />
      
    • 子组件中声明自定义事件

      <script>
        export default {
          emits: ['close']
        }
      </script>
      
  • 移除过滤器(filter)

    过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是 “只是 JavaScript” 的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。

  • 文章来源地址https://www.toymoban.com/news/detail-469402.html

到了这里,关于19-vue2到vue3的一些变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue安装与配置以及vue2和vue3共存

    官网下载地址:Download | Node.js windows下载: 双击安装包:一路往下直接next,遇到下面情况,不勾选,最后直接finish 打开命令行,输入 如上则nodejs安装成功 安装之后的目录: 在该目录下新建两个文件夹:node_cache和node_global 以管理员的身份打开命令行输入: npm config set prefi

    2024年02月03日
    浏览(36)
  • 前端vue2、vue3去掉url路由“ # ”号——nginx配置

    大家好,我是yma16,本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。 html的 hash模式 HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面。例如: 在这个示例中, #about 部分是一个锚点,用于在页面上显示关

    2024年02月11日
    浏览(71)
  • vue2、vue3分别配置echarts多图表的同步缩放

    大家好!我是yma16,本文分享在vue2和vue3中配置echarts的多图表同步缩放 背景: 解决echarts的多图表x轴同步联动的问题 echarts的datazoom api对外暴露 原理: echarts的实例存在datazoom缩放的方法, 所以只需要在datazoom事件触发其他图表的datazoom即可实现同步缩放 注意: x轴的范围要一

    2024年02月09日
    浏览(79)
  • nginx vue2+webpack 和 vue3+vite 配置二级目录访问

    我们开发中会遇到这样的需求,让我们用服务器nginx部署一个用域名的二级目录来访问项目 https:xxx/二级目录/ 来放访问项目 目录 思路 1、nginx配置(vue2 和 vue3配置的nginx相同) 2、vue2+webpack的配置 (1)vue.config.js配置 (2)router配置 3、vue3+vite的配置 (1)vite.config.js配置 (

    2024年02月09日
    浏览(57)
  • vue2 vue3 配置代理 服务器返回404- 500的解决思路

    一、服务器返回500拒绝请求 1,服务器的服务没有起来 2,vue本地的代理地址填写错误,可能代理到别家的服务器了 正确的写法如下:(主要体现在ip地址和端口是否错误,当然也需要检查是否多了字母及符号。) http://112.59.21.18:8080 二、如果返回500,未找到页面404,说明是接口

    2024年02月16日
    浏览(54)
  • 【Vue.js】Vue3全局配置Axios并解决跨域请求问题

    对于前后端分离项目,前端和后端端口不能重复,否则会导致前端或者后端服务起不来。例如前端访问地址为: http://localhost:8080/ ,后端访问地址为 http://localhost:8081/ 。后端写好Controller,当用Axios访问该接口时,将会报错: Access to XMLHttpRequest at \\\' http://localhost:8081/login \\\' from

    2024年02月05日
    浏览(75)
  • vue2 如何监听数组的变化

    在Vue 2中,底层是通过重写数组的原型方法来实现对数组变化的监听。具体来说,Vue 2使用了一个名为Observer的类来劫持数组的原型方法,使其在调用这些方法时能够触发相应的变化通知。 当Vue 2初始化一个响应式对象时,如果对象是一个数组,Vue会将数组的原型指向一个经过

    2024年02月12日
    浏览(48)
  • vue3+vite中使用环境变量 .env 的一些配置情况说明

    在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置 1、设置.env中的内容信息 注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取 如果不想使用VITE开头自己修改就在vite.config.ts文件中添加envPrefix:“APP_” 2、在 vite 中使用环境变量,可以用

    2024年02月04日
    浏览(60)
  • 【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用)

    官网: https://www.axios-http.cn/ 1.1.1 安装axios库 安装 axios 通信库: npm install axios -S 1.1.2 在全局中引入axios库 全局在main.js中引入axios: import axios from \\\'axios\\\' 1.1.3 挂在原型对象 Vue.prototype.$axios = axios; 将 axios 挂载到Vue原型对象中,实现数据共享,节约内存空间。 此时在任何页面都可

    2024年02月05日
    浏览(49)
  • 前端vue2 全局水印效果

    最近写项目遇到一个需求,全局显示水印,不管在哪个路由都要显示。 想要实现的效果: 新建shuiyin.js文件 main.js中全局注册

    2024年02月15日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包