vue3和vue2区别记录

​​​​​​​

目录

​​​​​​​​​​​​​​

Vue2和vue3的区别

Uniapp中Vue3和vue2在uniapp挂载全局变量和方法的区别

 Vue3挂载方法和变量

一些uniui的组件不能在uniapp中的vue3使用

uniniapp中vue2和vue3的双向绑定数据区别


  1. Vue2和vue3的区别

vue2使用的是webpack形式去构建项目

webpack是一开始是入口文件,然后分析路由,然后模块,最后进行打包,然后告诉你,服务器准备好了可以开始干了

vue3使用vite构建项目

先告诉你服务器准备完成,然后等你发送HTTP请求,然后是入口文件,Dynamic import(动态导入)code split point(代码分割)

最大的好处和区别就是为了让项目中一些代码文件多了以后去保存更新数据时更快能够看到实际效果,也就是所谓的(热更新)

  1. Uniapp中Vue3和vue2在uniapp挂载全局变量和方法的区别

    1. Vue2挂载方法和变量

import Vue from "vue";

import Echarts from "echarts";

Vue.prototype.$echarts = Echarts;

new Vue({

  router,

  store,

  render: (h) => h(App),

}).$mount("#app");

图 1‑1  vue2代码

在页面使用的时候

this.$echarts.xxx()

图 1‑2 vue2在页面使用

  1.  Vue3挂载方法和变量

1‑3  vue3代码

在页面中的使用和vue2相同

this.$echarts.xxx()

图 1‑4  vue3代码

  1. 一些uniui的组件不能在uniapp中的vue3使用

组件名

替代组件(uview

uni-file-picker(上传文件)

u-upload

uni-rate(评分)

u-rate

uni-popup(弹窗)

u-popup(与uni-popup的使用方式不相同)

uni-list-itemvue3可以不用添加link,点击事件可以跳转添加会报错。vue2必须添加link属性不然点击事件不能跳转

uniniapp中vue2和vue3的双向绑定数据区别

在vue3中任何输入框组件中v-model都不能实现数据双向绑定,得使用@input属性才能实时获取当前输入数据。

例如:

@input=”value = $event

  1. Uniapp中vue3 v-for和v-if一起用的变化
    1. 作用:

v-if指令 作为一个条件渲染,当他为true的时候才会渲染出当前的节点

v-for指令 是基于一个数组来渲染列表 v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名 v-for的时候都会被要求设置Key值,而且每一个Key值都是独一无二的

  1. 优先级

Vue2v-forv-if是可以一起用的 因为v-for的优先级比v-if的高

Vue3中不能这样使用 但是有不想在加一个结构使自己的代码更复杂,可以在外面套一层template

图 1‑5  图

  1. 2 注意事项
  2. 永远不要把 v-if v-for 同时用在一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)
  3. 如果避免出现这种情况,则在外层嵌套 template (页面渲染不生成dom节点),再这一层进行 v-if 判断,然后再内部进行 v-for 循环
  4. 最好这样写:

图 1‑6  图

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值