vue2.x与vue3.x的不同之处

已于 2022-04-12 11:36:17 修改
阅读量194 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
于 2021-11-04 17:34:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42232325/article/details/121143411
版权

vue2.x与vue3.x的不同之处

1.初始化vue实例方式（main.js）

  • vue2.x
import Vue from 'vue';
import App from './app';
import router from './lib/router';
import store from './lib/store';
import http from './lib/http';

// 在vue原型上定义http，可供全局使用
Vue.prototype.$http = http;
// 实例化Vue
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');
  • vue3.x
import { createApp } from 'vue';
import App from './app';
import router from './lib/router';
import http from './lib/http';

// 创建应用程序实例
const app = createApp(App);
// 注册路由
app.use(router);
// 将http挂载到vue实例上
app.config.globalProperties.$http = http;
// 将应用程序实例挂载到DOM节点上
app.mount(el);

2.创建路由方式不同（router）

  • vue2.x
import Vue from 'vue';
import VueRouter from 'vue-router';

const routes = [];
const router = new VueRouter([routes]);
Vue.use(VueRouter);

export default router;
  • vue3.x
import { CreateRouter, CreateWebHashHistory } from 'vue-router';

const routes = [];
const router = CreateRouter({
    history: CreateWebHashHistory(), // history模式
    routes
});

export default router;

3.Vue原型上挂载属性方式不同

  • vue2.x
// 定义；在vue实例之前; Vue.prototype.属性名 = 属性值；
Vue.prototype.$http = http;

// 组件中使用；
this.$http;
  • vue3.x
// 定义； app指的是通过createApp创建的应用程序实例；
app.config.globalProperties.$http = http;

// 组件中使用；
this.$http;

4.全局注册组件方式不同

  • vue2.x
import ComponentA from './pages/component-a';

// 定义；在vue实例之前;
Vue.component(ComponentA);
  • vue3.x
import ComponentA from './pages/component-a';

// 定义；在vue实例之前; app指的是通过createApp创建的应用程序实例；
app.component(ComponentA);

5.父组件调用子组件的属性和方法方式不同

  • vue2.x
// parent.vue
<template>
    <div>
        <child-comp ref="childRef"></child-comp>
        <button @click="getChild">获取子元素</button>
    </div>
</template>

<script>
import childComp from './child-comp';
export default {
    components: { childComp },
    methods: {
        getChild() {
            // 获取子组件实例
            const childInstance = this.$refs.childRef;
            // 调用子组件内的变量或方法；
            childInstance.name; // 获取变量
            childInstance.listPage(); // 获取方法
        }
    }
};
</script>

// children.vue
<template>
    <div></div>
</template>

<script>
export default {
  data() {
  	return { name: 'WHY' }
  },
  methods: {
  	listPage() {
      console.log('方法测试。。。‘);
    }
  }
}
</script>
  • vue3.x
// parent.vue
<template>
    <div>
        <child-comp ref="childRef"></child-comp>
        <button @click="getChild">获取子元素</button>
    </div>
</template>

<script>
import { ref } from 'vue';
import childComp from './child-comp';
export default {
    components: { childComp },
    setup() {
        // 获取子组件实例（定义的变量和获取组件的ref值相同）
        const childRef = ref(null);
        return { childRef };
    },
    methods: {
        getChild() {
            // 调用子组件内的变量或方法；
            this.$nextTick(() => {
                this.childRef.name; // 获取变量
                this.childRef.listPage(); // 获取方法
            });
        }
    }
};
</script>

// children.vue
<template>
    <div></div>
</template>

<script>
export default {
  data() {
  	return { name: 'WHY' }
  },
  methods: {
  	listPage() {
      console.log('方法测试。。。‘);
    }
  }
}
</script>

6.v-model方式不同

  • vue2.x
    vue2.x 每个DOM元素上只能绑定一个v-model
// 使用方式 参考 
// 父组件
<template>
    <div id="app">
        // 等同于<my-componen :value="valueChild" @input="val => (valueChild = val)" />
        <my-component v-model="valueChild" />
    </div>
</template>
<script>
export default {
    data() {
        return { valueChild: false };
    }
};
</script>
// 子组件
<template>
    <h3>{{ show }}</h3>
    <button @click="eventOpt">子组件事件</button>
</template>
<script>
export default {
    model: {
        // 不设置此属性，默认prop为'value'，event为'input'
        prop: 'value',
        event: 'input'
    },
    props: {
        // 注意点一、属性名必须为model中的prop属性的值
        value: { type: Boolean, default: false }
    },
    methods: {
        eventOpt() {
            // 注意二、事件名必须为model中的event属性的值
            // 更改prop中的属性show的属性值，同时更新父组件中中valueChild的属性值
            this.$emit('input', false);
        }
    }
};
</script>
  • vue3.x
    vue3.x 每个DOM元素上可以绑定多个v-model
// 父组件
<template>
    <div>
        // 使用方式 v-model:对应的子组件的props的变量名="父组件对应的变量"
        <child-comp v-model:name="pname" v-model:school="pschool"></child-comp>
    </div>
</template>

<script>
import childComp from './child-comp';
export default {
    components: { childComp },
    data() {
        return {
            pname: 'wang',
            pschool: '北京大学'
        };
    }
};
</script>

// 子组件
<template>
    <div>
        <button @click="updateName">更新name</button>
        <button @click="updateSchool">更新school</button>
    </div>
</template>

<script>
export default {
    props: {
        name: { type: String, default: '', required: false },
        school: { type: String, default: '', required: false }
    },
    methods: {
        updateName() {
            // 方式：this.$emit('update:需要更新的prop对象中的变量名', 改变后的值);
            this.$emit('update:name', 'name-1111111');
        },
        updateSchool() {
            this.$emit('update:school', 'school-2222222');
        }
    }
};
</script>

7.v-model使用方式不同

  • vue2.x
// 父组件
<parent v-model="data1"></parent>

<script>
export default {
    data() {
        return {
            data1: 'aa'
        };
    }
};
</script>

// 子组件
<script>
export default {
    model: {
        prop: 'value1',
        event: 'changeMethod'
    },
    props: {
        value1: { type: String, default: '', required: true }
    },
    methods: {
        changeDateJ() {
            this.$emit('changeMethod', 'change-22');
        }
    }
};
</script>
  • vue3.x
// 父组件
<parent v-model:value1="data1"></parent>

<script>
export default {
    data() {
        return {
            data1: 'aa'
        };
    }
};
</script>

// 子组件
<script>
export default {
    props: {
        value1: { type: String, default: '', required: true }
    },
    methods: {
        changeDateJ() {
            this.$emit('update:value1', 'change-22');
        }
    }
};
</script>

8.过滤器被移除

9.异步加载组件方式不同

  • vue2.x
const asyncPage = () => import('./modal.vue')
  • vue3.x
<template>
    <button @click="get">点击获取异步组件</button>
</template>
<script>
import { defineAsyncComponent } from 'vue';
export default {
    get() {
        const cmp = defineAsyncComponent(() => import('./pages/modal.vue'));
    }
};
</script>

10.生命周期不一样

vue2.x             vue3.x
beforeCreate  -> setup()            开始创建组件之前,在beforeCreate和created之前执行,创建的是data和method
created       -> setup()
beforeMount   -> onBeforeMount      组件挂载到节点上之前执行的函数
mounted       -> onMounted          组件挂载完成后执行的函数
beforeUpdate  -> onBeforeUpdate     组件更新之前执行的函数
updated       -> onUpdated          组件更新完成之后执行的函数
beforeDestroy -> onBeforeUnmount    组件卸载之前执行的函数
destroyed     -> onUnmounted        组件卸载完成后执行的函数
activated     -> onActivated        被包含在中的组件,会多出两个生命周期钩子函数,被激活时执行
deactivated   -> onDeactivated      比如从A组件,切换到B组件,A组件消失时执行
errorCaptured -> onErrorCaptured    当捕获一个来自子孙组件的异常时激活钩子函数

11.<template></template>

  • vue2.x
    <template></template>标签上使用v-for指令时，key属性必须，不能加到template上，需要加到template的子元素上；
<template>
    <div>
        <template v-for="item in list">
            <div :key="item.id">{{ item.title }}</div>
        </template>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { id: 'id1', title: 'title1' },
                { id: 'id2', title: 'title2' }
            ]
        };
    }
};
</script>
<style scoped lang="less"></style>
  • vue3.x
    标签上使用v-for指令时，key属性必须，且需要加到template上；
<template>
    <div>
        <template v-for="item in list" :key="item.id">
            <div>{{ item.title }}</div>
        </template>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { id: 'id1', title: 'title1' },
                { id: 'id2', title: 'title2' }
            ]
        };
    }
};
</script>
<style scoped lang="less"></style>
左边@右边
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.x中使用cesium，vue3.x+Cesium
05-04
Vue3.x是一个流行的JavaScript前端框架，它提供了许多优化和改进，使得开发更加高效。Cesium则是一个强大的3D地球浏览器库，广泛应用于地理信息系统、虚拟现实和游戏开发等领域。将Cesium集成到Vue3.x项目中，可以...
Vue3.x新特性总结及与vue2.x的对比
R的博客
04-12 1830
Vue3.0 特性总结1.OptionsApi 和 CompositionApi的区别2.template模板支持多个根标签3.获取页面实例与路由信息4.Vuex状态管理5.响应式对象函数 ref和reactive 1.OptionsApi 和 CompositionApi的区别 OptionsApi - Vue2.x 1.限制了自由度,必须按照规定来书写代码,如props,methods,data,computed,watch,各司其职,禁止越界 2.上下文必须使用this 3.生命周期包含beforeC
Vue——Vue2.x和Vue3.x的区别
ZKH129的博客
06-19 626
Vue2.x和Vue3.x的区别
Vue2.x和Vue3.x的区别
屈小康
02-14 411
vue2.x和vue3.x的区别
vue2.x与vue3.x区别(......)
lemon_宁萌
05-11 979
vue3.x中使用ES6中的Proxy 对数据进行代理，通过 reactive() 函数给每一个对象都包一层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。在开发过程中两个版本的使用方法表面上没有很大的区别，但是底层方法变化较大，其中就包括渲染方式，数据监听，双向绑定，生命周期，vue3.x更精准，体积更小。vue2.x 中v-for的优先级高于v-if，可以放在一起使用，虽不建议这么做，但是可以，会带来性能上的浪费。可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
vue2.x和vue3.x的区别
ABCFF12333的博客
07-13 4922
1.懒观察 在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。 3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 2.精准变更通知 2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行； 3.x 版本中，只有哪一个属性的 watcher 才会重新运行。 3.diff算法优化 为虚拟DOM增加静态标志 4.生命周期钩子函数 5
Vue2.X和Vue3.0数据响应原理变化的区别
10-16
在Vue3.x中，创建Vue实例时，不再需要手动为每个属性定义getter和setter，而是通过`Proxy`对整个数据对象进行代理。当尝试访问或修改数据时，`Proxy`会捕获这些操作并执行相应的响应逻辑。 ```javascript const app...
vue（2.x，3.0）配置跨域代理
10-15
与Vue 2.x的配置方法类似，你需要指定哪些API请求路径需要被代理，以及它们对应的`target`地址和是否需要`changeOrigin`。 在配置跨域代理时，`target`属性指定了API请求的目标地址，这里必须是完整的URL，包括协议...
基于Vue2.X的路由和钩子函数详解
08-28
基于Vue2.X的路由和钩子函数详解 Vue2.X的路由和钩子函数是Vue.js框架中两个关键组件，用于管理应用程序中的导航和路由跳转。本文将深入探讨Vue2.X中的路由和钩子函数，了解它们的作用、用法和实现原理。 一、导航...
Vue2.x 与 Vue3.x ：基本结构及重要配置一览
最新发布
06-19
在 Vue 实例当中，如果想要获取 data 上的数据，亦或是调用 methods 中的方法，就必须借助 this.数据属性名或者 this.方法名这样的方式来进行访问操作，这里的“this”所代表的正是我们通过 new 操作所生成的 app ...
Vue2.x和Vue3.x使用上的差异对比-示例
JackieDYH的博客
11-15 1127
template组件 Vue2和Vue3的template非常相似。 Vue3支持碎片(Fragments)，在组件可以拥有多个根节点，新特性可以减少很多组件之间的div包裹元素 Vue2.x-template组件 <template> <div class='form-element'> <h2> {{ title }} </h2> <input type='text' v-model='username' place
Vue3.0新特性
WindrunnerMax
02-09 908
Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小、速度更快、加强TypeScript支持、加强API设计一致性、提高自身可维护性、开放更多底层功能。 描述 从Vue2到Vue3在一些比较重要的方面的详细对比。 生命周期的变化 Vue2 -> Vue3 beforeCreate -> setup created -> setup beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate ->
vue2.x 和 vue3.x的区别
木木木森林
09-03 383
1. 组建中可以不需要一个根标签包裹了。 2. 取消了全局事件总线。在*Vue3*中,从实例中完全*移除了* `$on`、`$off` 和 `$once` 方法。`$emit` 仍然包含于现有的 API 中。 3. 取消了项目中的生产提示 ：`Vue.config.productionTip = false` 4. 移除了过滤器，官网的说法是，过滤器有学习成本，可以使用方法或者计算属性来代替。
将axios全局挂载到VUE原型上
埋葬冬天super
07-02 8233
安装axios：yarn add axios 在main.js文件引入axios：import axios from 'axios' 将axios全局挂载到VUE原型上：在main.js中添加,Vue.prototype.$axios=axios 使用：this.$axios.get('/url',{params:{username:'张三'}}) ...
vue-cli 3.x 版本与2.x版本在搭建项目时的区别
Boboy
02-15 5045
vue3.x版本 先使用命令行更新vue-cli-3.x npm install -g @vue/cli 或 yarn global add @vue/cli 安装之后，你就可以在命令行中访问vue命令。你可以通过简单运行vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。 你还可以用这个命令来检查其版本是否正确 (3.x)： vue --vers...
vue2.X和vue3.X的区别
weixin_49554199的博客
04-29 465
一、默认进行懒观察（lazy observation） 在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 二、更精准的变更通知。 举例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。 三、3.0 新加入了 TypeS
vue3.0和vue2.0的区别
weixin_46195945的博客
09-16 1722
vue3.0和2.0的区别 Vue-cli3.0于 8月11日正式发布，看了下评论，兼容性不是很好，命令有不少变化，不是特别的乐观 vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松； 更快 　　1、virtual DOM 完全重写，mounting & patching 提速 100%； 　　2、更多编译时 （compile-time）提醒以减少 runtime 开销； 　　3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能；
vue3.0和vue2.x的区别
weixin_42080056的博客
11-04 4776
由于上家公司的不作为，超哥现在处于离职状态，最近闲来无事，特带大家一起来研读vue3.0。 众所周知vue3.0的源码于10.5日已经公布，最近也是在看，总结一句话，编码没变，性能提升。 老规矩，话不多说，直接步入正题。 vue3.0相比之前的版本，更快、更小、更易于维护(主要针对vue团队)、更好的多端渲染支持，然后还加入了一些新的功能。 1.更快 首先来说说vue的渲染功能，总所周知...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值