VUE2和VUE3区别对比一览


## Vue3总结
### 官方文档
* [Vue3](https://v3.cn.vuejs.org/api/options*data.html)
* [Vue2](https://vuejs.bootcss.com/api/)
### Vue3相对于Vue2的语法特性#### 1.获取数据
* vue2
```javascript
export default {data() {return {name: 'myName',}},mounted() {console.log(this.name)} 
}
  • vue3
import {ref} from 'vue'
export default {setup() {const name = ref('myName')console.log(name.value)return {name}}
}
2.使用方法
  • vue2
export default {methods: {show() {console.log('show方法被调用')}},mounted() {this.show()}
}
  • vue3
import {onMounted} from 'vue'
export default {setup() {function show() {console.log('show方法被调用')}onMounted(() => {show()})return {show}}
}
3.子组件向父组件通信
  • vue2
export default {methods: {change() {this.$emit('valueChange', 3)}},
}
  • vue3
import {onMounted} from 'vue'
export default {setup(props, context) {function change() {context.emit('valueChange', 3)}}
}
4.获取Vuex对象
  • vue2
export default {mounted() {console.log(this.$store.state.name)this.$store.commit('show')} 
}
  • vue3
import {onMounted} from 'vue'
import {useStore} from 'vuex'
export default {setup(props, context) {const store = useStore()onMounted(() => {console.log(store.name)store.commit('show')})}
}
5.v-for里的ref
  • vue3
<template>// el当前元素,divs是存储每个元素的数组<div v-for="(item, index) in list" :ref="el => { divs[index] = el }">{{ item }}</div>
</template>
<script>
import {onMounted, ref} from 'vue';
export default {setup() {const divs = ref([]);onMounted(() => {console.log(divs.value)});return {divs};},
};
</script>
6.Vue3支持碎片,就是说在组件可以拥有多个根节点
  • vue2
<template><div class='form-element'><h2>{{ title }}</h2></div>
</template>
  • vue3
<template><div class='form-element'></div><h2> {{ title }}</h2>
</template>
7.Composition API
  • Vue2与Vue3 最大的区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API)
    • 旧的选项型API在代码里分割了不同的属性: data,computed属性,methods,等等。新的合成型API能让我们用方法(function)来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。
  • 建立数据 data - Vue2中会把数据放入data属性中,Vue3中需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发
    • 从vue引入reactive
    • 使用reactive()方法来声名我们的数据为响应性数据
    • 使用setup()方法来返回我们的响应性数据,从而我们的template可以获取这些响应性数据
  • vue2
export default {props: {title: String},data () {return {username: '',password: ''}},methods: {login () {// 登陆方法}},components:{"buttonComponent":btnComponent},computed:{lowerCaseUsername(){return this.username.toLowerCase();     }}
}
  • vue3
<template><div><h2> {{ state.username }} </h2></div>
</template>
<script>
import { reactive } from 'vue'
export default {props: {title: String},setup () {const state = reactive({ //数据username: '',password: '',lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性})//方法const login = () => {// 登陆方法}return { login,state}}
}
</script>
8.生命周期钩子 — Lifecyle Hooks
Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
9.父子组件传参
import { toRefs } from 'vue'
setup(props, { attrs, slots, emit }) {const { title } = toRefs(props)console.log(title.value)onMounted(() => {console.log('title: ' + props.title)})
}
10.vue3 Teleport瞬移组件
  • Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件"
  • 他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的
  • 以一个例子来看:编写一个弹窗组件
<template><teleport to="#modal"><div id="center" v-if="isOpen"><h2><slot>this is a modal</slot></h2><button @click="buttonClick">Close</button></div></teleport>
</template>
<script>
export default {props: {isOpen: Boolean,},emits: {'close-modal': null},setup(props, context) {const buttonClick = () => {context.emit('close-modal')}return {buttonClick}}
}
</script>
<style>#center {width: 200px;height: 200px;border: 2px solid black;background: white;position: fixed;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;}
</style>
  • 在app.vue中使用的时候跟普通组件调用是一样的
<template><div id="app"><button @click="openModal">Open Modal</button><br/><modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal></div>
</template>
<script>
import Modal from './components/Modal.vue'
import{ref} from 'vue'
export default {name: 'App',components: {Modal},setup() {const modalIsOpen = ref(false)const openModal = () => {modalIsOpen.value = true}const onModalClose = () => {modalIsOpen.value = false}return {modalIsOpen,openModal,onModalClose}}
}
</script>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
  • Teleport 可以把modal组件渲染到任意你想渲染的外部Dom上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
  • 使用的时候 to属性可以确定想要挂载的DOM节点下面
  • 在public文件夹下的index.html中增加一个节点,这样可以看到modal组件就是没有挂载在app下,不再受app组件的影响了
<body><div id="app"></div><div id="modal"></div>
</body>
11.vue2与vue3在标签或者组件中的ref="formRef"的dom元素的使用
  • vue2中直接使用this. r e f s . f o r m R e f 或者 t h i s . refs.formRef或者this. refs.formRef或者this.refs[‘formRef’]的方式就可以获取该组件或者dom的内容
  • vue3中由于setup函数中没有了this,那该如何使用呢?
<template><div ref="mainContainer" ></div>
</template>
<script>
setup() {const mainContainer = ref(null)onMounted(()=>{console.log(mainContainer)})return {mainContainer,}
}
</script>
  • 由于setup函数创建时还没有VNode 所以想要使用该属性必须得在onMounted函数里面可以使用获取
    ###table—cloums中render函数渲染组件的写法:
import { resolveComponent } from 'vue'   // 需先引入 resolveComponent
cloums中写法render写法
{title: '操作',align: 'center',width: 100,fixed: 'right',key: 'couTypeCategoryName',render: (h, params) => {return h(resolveComponent('el-switch'), {modelValue: params.row.isShow,'active-value': 1,'inactive-value': 0,// 'onUpdate:modelValue': value => params.row.state = valueonChange: (val) => {},})}},

一、在Table表格中渲染input、switch等 在 3.x v-model中,自定义组件相当于传递一个modelValue prop 并发出一个update:modelValue事件

render: (h, params) => {return h(resolveComponent('el-input'), {size: 'small',modelValue: params.row.comments,'onUpdate:modelValue': (value) => (params.row.comments = value),})
},

二、插槽

  <template #footer><span class="dialog-footer"><el-button>取消</el-button><el-button type="primary">确定</el-button></span></template>

三、filters

在vue3中被移除
###Fragment
vue2每个模版必须有一个根节点
vue3可以有多个根节点

<!--vue2-->
<template><div><span></span><span></span></div>
</template>
<!--vue3-->
<template><span>hello</span><span>world</span>
</template>

###v-if v-for 优先级
vue2 时 v-for 优先级高,所以v-for 和v-if一起会耗性能,增加了喝多不必要的判断
vue3 v-if比v-for有更高的优先级
###vVNode Prop
vue2和vue3的虚拟dom参数有所区别,vue3更加扁平化

<!--vue2-->
render: (h, params) => {let btnArr = [h('Button',{props: {type: 'primary',},style: {marginLeft: '8px',},on: {click: () => {this.modalType = 'detail'this.viewType = 2this.item = params.rowthis.pageStatus = truethis.pState = true},},},'查看详情'),]return h('div', btnArr)
},
<!--vue3-->
render:(h,params)=>{return  h(resolveComponent('el-input-number'), {type: 'number',size: 'large',modelValue:params.row.value,stepStrictly:true,controls:false,min:"1",'onUpdate:modelValue':(value) => { params.row.value = parseInt(value)},style: { width:'200px'},})
}

###ref和reactive 响应式的基础
接受一个参数,返回一个响应式数据
不同的是ref一般处理基础数据类型,reactive一般处理引用数据类型
使用 reactive,toRefs 保证 reactive 对象属性保持响应性

import { ref, computed, reactive, toRefs } from 'vue'setup() {const DataProps  = reactive({count: 0,increase: () => { data.count++},double: computed(() => data.count * 2)})const refData = toRefs(data)return {...refData}
}

###v-model
vue2只能绑定一个,vue3可以绑定多个

<!--父组件-->
<template>// v-model:modelValue简写为v-model// 可绑定多个v-model<childv-model="state.name"v-model:age="state.age"/>
</template><script setup>import { reactive } from 'vue'// 引入子组件import child from './child.vue'const state = reactive({name: 'Jerry',age: 20})
</script>
子组件
<template><span @click="changeInfo">我叫{{ modelValue }},今年{{ age }}岁</span>
</template><script setup>
// import { defineEmits, defineProps } from 'vue'
// defineEmits和defineProps在<script setup>中自动可用,无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】defineProps({modelValue: String,age: Number
})const emit = defineEmits(['update:modelValue', 'update:age'])
const changeInfo = () => {// 触发父组件值更新emit('update:modelValue', 'Tom')emit('update:age', 30)
}
</script>

###defineComponent函数,只是对setup函数进行封装,返回options的对象;
###父组件获取子组件的属性和方法

<!--父组件-->
<template><child ref="comp"></child><button @click="handlerClick">按钮</button>
</template>
<script setup>
import child from "./comp/expose.vue"
import { ref } from "vue"
const comp = ref(null)
const handlerClick = () => {console.log(comp.value.a) // 获取子组件对外暴露的属性comp.value.someMethod() // 调用子组件对外暴露的方法
}
</script>
<!--子组件--><template><div>{{a}}</div><button @click='someMethod'>按钮子</button>
</template>
<script setup>
import { ref } from 'vue'
let someMethod=()=>{console.log(666)
}const a = 1
const b = ref(2)defineExpose({a,b,someMethod
})
</script>

###其他
1.vue2 defineProperty只能监听某个属性,不能对全对象监听
2 vue3 Proxy 代理,可以检测到数组内部数据的变化
3.vue3 Teleport瞬移组件
4.Vue2 - 这里把数据放入data属性中
5.vue 3 Composition API
需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。
从vue引入reactive
使用reactive()方法来声名我们的数据为响应性数据
使用setup()方法来返回我们的响应性数据,从而我们的template可以获取这些响应性数据
vue3Composition API生命后期
setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/675577.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【专业技术】高效并行分布式深度学习策略,助力模型训练与量化

尊敬的客户&#xff0c;您好&#xff01;我们是一家专注于提供高效深度学习解决方案的专业团队&#xff0c;为您提供并行分布式策略、高效精调策略、大模型无损量化和高性能推理服务。 我们的服务包括&#xff1a; 并行分布式策略&#xff1a;我们的Trainer封装支持多种并行配…

LangChain pdf的读取以及向量数据库的使用

以下使用了3399.pdf&#xff0c; Rockchip RK3399 TRM Part1 import ChatGLM from langchain.chains import LLMChain from langchain_core.output_parsers import StrOutputParser from langchain_core.prompts import ChatPromptTemplate from langchain.chains import Simp…

Netty的序列化之MessagePack

目录 引入MessagePack依赖 实体类 服务端代码 客户端代码 执行结果 引入MessagePack依赖 <dependency><groupId>org.msgpack</groupId><artifactId>msgpack</artifactId><version>0.6.12</version></dependency> 实体类…

Stable Diffusion教程——使用TensorRT GPU加速提升Stable Diffusion出图速度

概述 Diffusion 模型在生成图像时最大的瓶颈是速度过慢的问题。为了解决这个问题&#xff0c;Stable Diffusion 采用了多种方式来加速图像生成&#xff0c;使得实时图像生成成为可能。最核心的加速是Stable Diffusion 使用了编码器将图像从原始的 3512512 大小转换为更小的 46…

Python爬虫http基本原理#2

Python爬虫逆向系列&#xff08;更新中&#xff09;&#xff1a;http://t.csdnimg.cn/5gvI3 HTTP 基本原理 在本节中&#xff0c;我们会详细了解 HTTP 的基本原理&#xff0c;了解在浏览器中敲入 URL 到获取网页内容之间发生了什么。了解了这些内容&#xff0c;有助于我们进一…

雨云2h2g香港二区云服务器测评(纯测评)

购买并且重装好系统后&#xff0c;来itdog去ping一下看看延迟怎么样。&#xff08;香港无移动屏蔽&#xff09;&#xff1a; 然后&#xff0c;我们来做一个线路路由测试&#xff08;去回程路由测试&#xff09;。&#xff08;雨云香港服务器IP不是原生IP&#xff0c;而是广播IP…

小程序配置服务器域名流程指南

一、前期准备 1. 注册并备案域名 注册域名:首先,您需要在合法合规的域名注册商处注册一个尚未被他人占用的域名,确保其易于记忆且与您的业务相关。 域名备案:在中国大陆地区运营的小程序,所使用的服务器域名必须完成ICP(互联网内容提供商)备案。这一步骤涉及到提交相关…

【Python】使用 requirements.txt 与 pytorch 相关配置

【Python】使用 requirements.txt 与 pytorch 相关配置 前言一、pip1、导出结果含有路径2、导出不带路径的 二、Conda1、导出requirements.txt2、导出yml 文件 三、第三方包&#xff1a;pipreqs&#xff08;推荐&#xff09;1、创建并激活conda环境2、安装requirements文件的pi…

Ubuntu22.04 gnome-builder gnome C 应用程序习练笔记(三)

八、ui窗体创建要点 .h文件定义(popwindowf.h)&#xff0c; TEST_TYPE_WINDOW宏是要创建的窗口样式。 #pragma once #include <gtk/gtk.h> G_BEGIN_DECLS #define TEST_TYPE_WINDOW (test_window_get_type()) G_DECLARE_FINAL_TYPE (TestWindow, test_window, TEST, WI…

Quorum NWR算法,鱼和熊掌也可兼得

众所周知在分布式系统中CAP&#xff0c;一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;、分区容错性&#xff08;Partition Tolerance&#xff09;三个指标不可兼得&#xff0c;只能在三个指标中选择两个。假如此时已经实现了一套AP型…

C#上位机与三菱PLC的通信05--MC协议之QnA-3E报文解析

1、MC协议回顾 MC是公开协议 &#xff0c;所有报文格式都是有标准 &#xff0c;MC协议可以在串口通信&#xff0c;也可以在以太网通信 串口&#xff1a;1C、2C、3C、4C 网口&#xff1a;4E、3E、1E A-1E是三菱PLC通信协议中最早的一种&#xff0c;它是一种基于二进制通信协…

day7(2024/2/8)

mainui.h(第二个界面) #ifndef MAINUI_H #define MAINUI_H#include <QWidget>namespace Ui { class MainUi; }class MainUi : public QWidget {Q_OBJECTpublic:explicit MainUi(QWidget *parent nullptr);~MainUi();public slots:void main_ui();private:Ui::MainUi *u…

Rust 格式化输出

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、format! 宏二、fmt::Debug三、fmt::Display四、? 操作符 循环打印 前言 Rust学习系列-本文根据教程学习Rust的格式化输出&#xff0c;包括fmt::Debug&…

MATLAB环境下基于深层小波时间散射网络的ECG信号分类

2012年&#xff0c;法国工程学院院士Mallat教授深受深度学习结构框架思想的启发&#xff0c;提出了基于小波变换的小波时间散射网络&#xff0c;并以此构造了小波时间散射网络。 小波时间散射网络的结构类似于深度卷积神经网络&#xff0c;不同的是其滤波器是预先确定好的小波…

【leetcode热题100】最大矩形

给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 示例 1&#xff1a; 输入&#xff1a;matrix [["1","0","1","0","0"],["1",&quo…

C语言操作符超详细总结

文章目录 1. 操作符的分类2. 二进制和进制转换2.1 2进制转10进制2.1.1 10进制转2进制数字 2.2 2进制转8进制和16进制2.2.1 2进制转8进制2.2.2 2进制转16进制 3. 原码、反码、补码4.移位操作符4.1 左移操作符4.2 右移操作符 5. 位操作符&#xff1a;&、|、^、~6. 逗号表达式…

WPS安装mathtype教程

注意点&#xff1a;不管你电脑是64位还是32位&#xff0c;都要用32的那个文件夹里的&#xff01;以下以我的WPS和mathtype安装的路径举例。 复制&#xff1a;C:\Program Files (x86)\MathType\MathPage\32\MathPage.wll到&#xff1a;C:\Users\Administrator\AppData\Local\Ki…

从github上拉取项目到pycharm中

有两种方法&#xff0c;方法一较为简单&#xff0c;方法二用到了git bash&#xff0c;推荐方法一 目录 有两种方法&#xff0c;方法一较为简单&#xff0c;方法二用到了git bash&#xff0c;推荐方法一方法一&#xff1a;方法二&#xff1a; 方法一&#xff1a; 在github上复制…

复制和粘贴文本时剥离格式的5种方法(MacWindows)

您可能每天复制和粘贴多次。虽然它是一个非常方便的功能&#xff0c;但最大的烦恼之一就是带来了特殊的格式。从网络上获取一些文本&#xff0c;您经常会发现粘贴到文档中时&#xff0c;它保持原始样式。 我们将展示如何使用一些简单的技巧在不格式化的情况下复制和粘贴。 1.…

下载已编译的 OpenCV 包在 Visual Studio 下实现快速配置

自己编译 OpenCV 挺麻烦的&#xff0c;配置需要耗费很长时间&#xff0c;编译也需要很长时间&#xff0c;而且无法保证能全部编译通过。利用 OpenCV 官网提供的已编译的 OpenCV 库可以节省很多时间。下面介绍安装配置方法。 1. OpenCV 官网 地址是&#xff1a;https://opencv…