自动化科技产品网站建设/域名ip地址在线查询

vue3与vue2的区别

Vue 3在写法上与Vue 2有一些区别，以下是一些常见的区别：引入方式：Vue 2使用Vue全局对象进行引入，而Vue 3使用createApp函数创建应用实例。组件注册：Vue 2中使用Vue.component全局方法或在选项中使用components属性注册组件，而Vue 3中使用app.component方法进行组件注册。模板语法：Vue 2使用基于字符串的模板语法，例如<template>标签中的{{}}和v-指令。
Vue 3支持基于字符串的模板语法，但更推荐使用基于JSX的语法或使用<template>标签中的v-bind和v-on指令。
响应式数据：Vue 2使用data选项定义响应式数据，需要使用this关键字来访问。
Vue 3中，使用setup函数来定义响应式数据，直接以函数的形式返回，并使用ref、reactive等函数进行包装，访问时无需使用this关键字。
生命周期钩子：Vue 3废弃了Vue 2中的一些生命周期钩子（如beforeCreate、beforeMount等），并引入了新的生命周期钩子（如onBeforeMount、onMounted等）。插槽：Vue 2使用具名插槽和作用域插槽来实现组件之间的内容分发，而Vue 3引入了<slot>标签中的v-slot指令来代替Vue 2中的具名插槽和作用域插槽。过滤器：Vue 2中可以使用过滤器对数据进行格式化处理，而Vue 3中移除了过滤器的概念，推荐使用计算属性或方法来处理数据格式化。需要注意的是，虽然Vue 3在语法和用法上有一些变化，但它仍然保持了与Vue 2的高度兼容性，大部分Vue 2的代码可以迁移到Vue 3中，并且可以逐步采用Vue 3的新特性。

如果setup语法糖与普通的vue写法想一起用就写两个script标签。

<template><!-- Your template here -->
</template><script setup>// Your setup function here
</script><script>
export default {name: 'YourComponentName'
}
</script><style scoped>/* Your styles here */
</style>

组合式API

与vue2的最大区别就是生命钩子函数，自定义变量与函数都可以在script标签中直接定义，但是：

变量接收ref函数的返回对象，更改时要用val.value="xxx"的方式进行更改。

对象要用reactive函数的返回对象。

与vue2中的自定义函数不一样，这里的自定义函数的this是undefine。

<template><div class="hello"><h1>{{ xin }}</h1><h1>{{ obj.msg }}</h1><button @click="fun">按钮</button></div>
</template><script setup>
import { reactive, ref } from "vue";const xin = ref("李义新");
const obj = reactive({msg: "hello",
});//这里的函数this是undefine
const fun = () => {xin.value = "李义新655";
};
</script><style scoped></style>

路由

1、编写路由配置，src/router/router.js中。

2、创建与配置Vue Router实例，src/router/index.js中。

3、把路由配置到Vue，main.js中。

//router.jsimport Register from '@/view/register.vue'
import Login from '@/view/login.vue'const routes = [{name: 'login',path: '/login',component: Login},{name: 'register',path: '/register',component: Register}
];
export default routes

//index.js//哈希模式，带#的
import { createRouter, createWebHashHistory } from 'vue-router';
import routes from './router'; // 导入 router 目录下的 router.jsconst router = createRouter({history: createWebHashHistory(),routes
});export default router;//-------------------------------------------------------------------------//历史模式，不带#的​
import {createRouter, createWebHistory} from 'vue-router'
import routes from './router'    // 导入 router 目录下的 router.jsconst router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})
export default router;​

//main.jsimport { createApp } from 'vue'
import App from './App.vue'
import router from './router/index' // 加载 router 底下的 index.js 路由配置文件const app = createApp(App)
app.use(router)		
app.mount('#app')

全局方法与变量

Vue2中

定义全局方法与变量是写在new Vue之前。

使用时，在方法中this.Utils....;

Vue3中

 定义全局方法与变量是写在创建App之前，在挂载app.aount*‘#app’)之后。

//定义时
const app = createApp(App);app.config.globalProperties.Utils = Utils;app.use(router)
app .mount('#app')//其它组件使用时
import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance();  //proxy是固定写法
const Utils = proxy.Utils;

父子组件的相互调用

父组件

<template><div :style="{backgroundColor: 'black', padding: '20px 0px',color:'white'}"><Son ref="sonRef":msg="myMsg"@opParent="parentMethod"></Son><hr/><button @click="opSun">调用子组件</button><h2>父组件，子组件传过来的参数：{{sonMsg}}</h2></div></template><script setup>
import {ref} from 'vue'
import Son from "@/view/Son.vue";const myMsg = ref("我是父组件传进来的参数");//sonRef是Son的ref，名字一定要相同，用法很奇怪
const sonRef = ref();//父组件调用子组件方法
const opSun = () => {//通过ref调用子组件的方法，都必须子组件通过defineExpose去暴露一下sonRef.value.ParentSon("666");
}//用于介绍子组件传过来的参数
const sonMsg = ref("");//子组件调用父组件的回调函数
const parentMethod = (e) => {console.log(e);sonMsg.value = e;
}</script><style scoped></style>

子组件

<template><div :style="{background:'red',color:'white'}"><div>子组件：我是父组件传入的参数：{{ msg }}</div><div>子组件：我是父组件调用子组件传入的参数：{{ msg2 }}</div><button @click="opParent">调用父组件</button></div>
</template><script setup>import {ref, defineProps, defineExpose, defineEmits} from "vue"const props = defineProps({msg: {type: String,default: "www"}
})const msg2 = ref("");const ParentSon = (parentMsg) => {msg2.value = parentMsg;
}const emit = defineEmits();const opParent = () => {emit("opParent", "我是子组件传过来的");
}defineExpose({ParentSon
})</script><style scoped></style>

生命钩子

下述列表中没有 beforeCreate 和 created 的对应项。这是因为在Vue 3中，你不再需要这两个生命周期钩子，因为可以直接在 setup() 函数中执行这些生命周期钩子中的代码。

使用这些生命周期钩子的时候必须要从vue中引入。

beforeCreate => 无对应（在 setup() 开始之前运行）
created => 无对应（在 setup() 结束时运行）
beforeMount => onBeforeMount
mounted => onMounted
beforeUpdate => onBeforeUpdate
updated => onUpdated
beforeUnmount => onBeforeUnmount
unmounted => onUnmounted
errorCaptured => onErrorCaptured
renderTracked => onRenderTracked
renderTriggered => onRenderTriggered
这些生命周期钩子可以在Vue 3的 setup() 函数中

Vuex 

vue3安装vuex

npm install vuex@next

创建store/index.js，用于配置vuex

import {createStore} from "vuex";const store = createStore({state() {return {count: 0}},mutations: {increment(state) {state.count++;}}
})export default store;

main.js

import {createApp} from 'vue'
import App from './App.vue'
import store from './store'const app = createApp(App)
app.use(store)
app.mount('#app')

parent来使用vuex

<template><h2>{{ count }}</h2><button @click="increment">点击</button>
</template><script setup>import {computed} from 'vue'
import {useStore} from 'vuex'const store = useStore()const count = computed(() => store.state.count)const increment = () => {store.commit('increment')
}</script>