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.过滤器被移除
- vue2.x
https://cn.vuejs.org/v2/guide/filters.html - vue3.x
vue3.x 中移除了过滤器
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>