这么做网站教程,银川网站公司,大港天津网站建设,360免费wifi怎么使用我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来。但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验。还有一些童鞋已经开始又慌又抓狂了 -- “又要开始学新的写法了 (ノToT )ノ ~┻┻”。所以这里我使用Vue2和Vue3开发一个简单的表格组件来展示一下… 我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来。但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验。还有一些童鞋已经开始又慌又抓狂了 -- “又要开始学新的写法了 (ノToT )ノ ~┻┻”。所以这里我使用Vue2和Vue3开发一个简单的表格组件来展示一下Vue2和Vue3开发组件的区别。看完这篇文章后你将会有一个概念Vue2和Vue3开发组件时的区别并且为Vue3的开发之路做好准备。ღ(◔ڼ◔ღ)ミ废话少说让我们开始吧 (๑ •̀ㅂ•́)و✧创建一个 template组件来说大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)就是说在组件可以拥有多个根节点。这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments)解决了这个问题。对于有完美强迫症的童鞋“真的是太棒了”。我们这里的例子里就不展示了用简单的单根节点的组件。Vue2 表格templatetemplatediv classform-elementh2 {{ title }} h2input typetext v-modelusername placeholderUsername /input typepassword v-modelpassword placeholderPassword /button clicklogin Submitbuttonp Values: {{ username password }}pdivtemplate在Vue3的唯一真正的不同在于数据获取。Vue3中的反应数据(Reactive Data)是包含在一个反应状态(Reactive State)变量中。— 所以我们需要访问这个反应状态来获取数据值。templatediv classform-elementh2 {{ state.title }} h2inputtypetextv-modelstate.usernameplaceholderUsername /inputtypepasswordv-modelstate.passwordplaceholderPassword /button clicklogin Submitbuttonp Values: {{ state.username state.password }}pdivtemplate建立数据 data这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API)旧的选项型API在代码里分割了不同的属性(properties)datacomputed属性methods等等。新的合成型API能让我们用方法(function)来分割相比于旧的API使用属性来分组这样代码会更加简便和整洁。现在我们来对比一下Vue2写法和Vue3写法在代码里面的区别。Vue2 - 这里把两个数据放入data属性中export default {props: {title: String }, data () {return {username: ,password: } }}在Vue3.0我们就需要使用一个新的setup()方法此方法在组件初始化构造的时候触发。为了可以让开发者对反应型数据有更多的控制我们可以直接使用到 Vue3 的反应API(reactivity API)。使用以下三步来建立反应性数据:从vue引入reactive使用reactive()方法来声明我们的数据为反应性数据使用setup()方法来返回我们的反应性数据从而我们的template可以获取这些反应性数据上一波代码让大家更容易理解是怎么实现的。import { reactive } from vueexport default {props: {title: String }, setup () {const state reactive({username: ,password: })return { state } }}这里构造的反应性数据就可以被template使用可以通过state.username和state.password获得数据的值。Vue2 对比 Vue3的 methods 编写Vue2 的选项型API是把methods分割到独立的属性区域的。我们可以直接在这个属性里面添加方法来处理各种前端逻辑。export default {props: {title: String }, data () {return {username: ,password: } },methods: { login () {// 登陆方法 } }}Vue3 的合成型API里面的setup()方法也是可以用来操控methods的。创建声明方法其实和声明数据状态是一样的。— 我们需要先声明一个方法然后在setup()方法中返回(return) 这样我们的组件内就可以调用这个方法了。export default {props: {title: String }, setup () {const state reactive({username: ,password: })const login () {// 登陆方法 }return { login, state } }}生命周期钩子 — Lifecyle Hooks在 Vue2我们可以直接在组件属性中调用Vue的生命周期的钩子。以下使用一个组件已挂载(mounted)生命周期触发钩子。export default {props: {title: String }, data () {return {username: ,password: } }, mounted () {console.log(组件已挂载) },methods: { login () {// login method } }}现在 Vue3 的合成型API里面的setup()方法可以包含了基本所有东西。生命周期的钩子就是其中之一但是在 Vue3 生周期钩子不是全局可调用的了需要另外从vue中引入。和刚刚引入reactive一样生命周期的挂载钩子叫onMounted。引入后我们就可以在setup()方法里面使用onMounted挂载的钩子了。import { reactive, onMounted } from vueexport default {props: {title: String }, setup () {// .. onMounted(() {console.log(组件已挂载) })// ... }}计算属性 - Computed Properties我们一起试试添加一个计算属性来转换username成小写字母。在 Vue2 中实现我们只需要在组件内的选项属性中添加即可export default {// .. computed: { lowerCaseUsername () {return this.username.toLowerCase() } }}Vue3 的设计模式给予开发者们按需引入需要使用的依赖包。这样一来就不需要多余的引用导致性能或者打包后太大的问题。Vue2就是有这个一直存在的问题。所以在 Vue3 使用计算属性我们先需要在组件内引入computed。使用方式就和反应性数据(reactive data)一样在state中加入一个计算属性:import { reactive, onMounted, computed } from vueexport default {props: {title: String }, setup () {const state reactive({username: ,password: ,lowerCaseUsername: computed(() state.username.toLowerCase()) })// ... }接收 Props接收组件props参数传递这一块为我们带来了Vue2和Vue3之间最大的区别。—this在vue3中与vue2代表着完全不一样的东西。在 Vue2this代表的是当前组件不是某一个特定的属性。所以我们可以直接使用this访问prop属性值。就比如下面的例子在挂载完成后打印出当前传入组件的参数title。mounted () {console.log(title: this.title)}但是在 Vue3 中this无法直接拿到props属性emit events(触发事件)和组件内的其他属性。不过全新的setup()方法可以接收两个参数props - 不可变的组件参数context - Vue3 暴露出来的属性(emitslotsattrs)所以在 Vue3 接收与使用props就会变成这样setup (props) {// ... onMounted(() {console.log(title: props.title) })// ...}事件 - Emitting Events在 Vue2 中自定义事件是非常直接的但是在 Vue3 的话我们会有更多的控制的自由度。举例现在我们想在点击提交按钮时触发一个login的事件。在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。login () {this.$emit(login, {username: this.username,password: this.password }) }但是在 Vue3中我们刚刚说过this已经不是和vue2代表着这个组件了所以我们需要不一样的自定义事件的方式。那怎么办呀! ლಠ益ಠ)ლ不用慌在setup()中的第二个参数content对象中就有emit这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。然后我们在login方法中编写登陆事件setup (props, { emit }) {// ...const login () { emit(login, {username: state.username,password: state.password }) }// ...}最终的vue2对比vue3代码真的是太棒了能看到这里的童鞋们你们现在基本都看到vue2与vue3其实概念与理念都是一样的。只是有一些属性获取方式和声明和定义方式稍微变了。一直在鬼哭狼嚎的小小前端开发猿人们你们可以松一口气了吧。总结一下我觉得 Vue3 给我们前端开发者带来了全新的开发体验更好的使用弹性可控度也得到了大大的提升。如果你是一个学过或者接触过 React 然后现在想使用Vue的话应该特别兴奋因为很多使用方式都和React非常相近了 ?全新的合成式API(Composition API)可以提升代码的解耦程度 —— 特别是大型的前端应用效果会更加明显。还有就是按需引用的有了更细微的可控性让项目的性能和打包大小有更好的控制。最后我把完成的 Vue2 和 Vue3 的组件代码发出来给大家Vue2div classform-elementh2 {{ title }} h2input typetext v-modelusername placeholderUsername /input typepassword v-modelpassword placeholderPassword /button clicklogin Submitbuttonp Values: {{ username password }}pdivtemplatescriptexport default {props: {title: String }, data () {return {username: ,password: } }, mounted () {console.log(title: this.title) },computed: { lowerCaseUsername () {return this.username.toLowerCase() } },methods: { login () {this.$emit(login, {username: this.username,password: this.password }) } }}scriptVue3div classform-elementh2 {{ state.title }} h2input typetext v-modelstate.username placeholderUsername /input typepassword v-modelstate.password placeholderPassword /button clicklogin Submitbuttonp Values: {{ state.username state.password }}pdivtemplatescriptimport { reactive, onMounted, computed } from vueexport default {props: {title: String }, setup (props, { emit }) {const state reactive({username: ,password: ,lowerCaseUsername: computed(() state.username.toLowerCase()) }) onMounted(() {console.log(title: props.title) })const login () { emit(login, {username: state.username,password: state.password }) }return { login, state } }}script希望这篇文章能让大家体验到一个比较全面的Vue2与Vue3的开发区别。如果大家还有什么问题可以在评论中提问哦开发愉快近期Vue3开源组件库今天“它们”来了Vue 数据更新但页面没有更新的 7 种情况你遇到过几种若此文有用何不素质三连❤️
