安装vue脚手架
npm install -g @vue/cli创建vue项目
vue create vue3-demovue create .vue2和vue3结构上的区别
vue2.0 基本结构
export default { data() { return {} }, // computed computed: {}, //生命钩子 mounted() {}, // methods methods: {},};script>vue3.0基本结构
<script>import { reactive, toRefs, computed, ref, onMounted } from 'vue';export default { setup(){ const data = reactive({ list:[], title:"hi~ vue3.0" }) cosnt num = ref(0) // 生命钩子 onMounted(()=>{}) // computed const Count = computed(()=>{}), // methods const method = ()=>{} return { ...toRefs(data), Count, // 方法视情况而定 组件中有使用才return method } }};script>有看什么之所以然来吗，首先我们可以看到了在vue2中data,computed,methods,mounted都是分割成了不同的属性,但在vue3中用方法(function)进行来分割,更加接近了JS的方法的调用,可以在另一个方法中直接调用,不用像vue2.0那样使用this去调用。
关于vue3的写法
按需引入
将需要的方法我们才会引进来,不需要则不引进
import { reactive, toRefs, computed, ref, onMounted } from 'vue';- setup()方法
在vue3中我们全新的使用一个新的setup()方法,在组件初始化构造函数的时候触发,需要vue3中的reactive(),这个方法声明我们的数据为反应性数据,reactive()方法有点类似vue2中的data
使用setup()方法return我们的反应性数据，那为什么要用...toRefs(data)对它进行解构呢?只是为了能向vue2一样能更加简洁的方式渲染
放片段代码就知道了
//setup()return{data}//template{{data.title}}// 使用...toRefsreturn{...toRefs(data)}//template{{title}}- methods写法
在vue3中我们直接在setup()创建方法，然后return，在组件中就可以触发到该方法了
// template "submit">提交 // script export default { setup(){ // methods const submit = ()=>{ // 提交方法 } return { // 返回 submit } }};- 计算属性computed写法
我们需要在vue中引入computed方法，然后也是在setup()方法中声明变量，然后返回,举个例子返回数组的length
// template {{listLength}}</div> // script import { computed} from 'vue'; export default {setup() {const data = reactive({list: [{id: 1,title: "hi~,vue1.0"},{id: 2,title: "hi~,vue2.0"},{id: 3,title: "hi~,vue2.0"}]}) // methodsconst submit = () => { // 提交方法} // computedconst listLength = computed(() => {return data.list.length }),return {listLength,submit}}}; 生命周期钩子生命周期函数写法也是写在setup方法里面
// script import { onMounted} from 'vue'; export default { setup(){ // 页面加载完成执行 onMounted(()=>{ // 执行submit方法 submit() }) // methods const submit = ()=>{ // 提交方法 } return { // 返回 submit } }};接收props和自定义事件emit在vue3中没有了this,那怎么在script接收怎么获取props的值呢？？哈哈不着急,原来在我们一直提到的setup()方法中，我们可以接收两个参数setup(props,context)
props-不可变的组件参数
context-vue3暴露出来的属性(emit,slots,attrs)
直接上码
@click=import { ref } from 'vue';export default { props: { item: { type: Object } }, setup(props,context) { // 获取props值 const getPropItem = ref(props.item); const resource = "" const submitFrom = ()=>{ // 自定义事件 context.emit("onSubmitFrom",getPropItem) } return { submitFrom }; }};script>在vue3使用vue-router
在vue3中使用vue-router，值得注意一点就是 我们使用npm下载下来的默认是vue-router@3+的版本，但是在vue3中我们使用的vue-router版本是4+，所以需要这么下载
npm install vue-router@next --save这样我们下载下来的vue-router就是版本4以上了
(1) vue2中使用路由在vue2中我们在router.js,将路由通过vue.use()全局注入vue中
// router.jsimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const routes = [ { path: "/", name: 'base', component: ResourceHome },]// 创建路由实例let router = new Router({ routes, mode: 'history', //去掉url#});// 导出export default router;在mian.js中，在vue实例化中放入router.js,在vue项目中我们就可以使用this.$router去进行路由的操作
import router from './router.js';new Vue({ router, //实例化，表示会使用 render: (h) => h(App)}).$mount('#app');(2)在vue2中router和route使用this.$router完成路由的跳转
this.$router.push('/index')
使用this.$route获取路由的信息
获取当前路由id：this.$route.params.id
获取当前路由地址：this.$route.path
获取当前hash地址：location.hash
获取当前路由params参数：his.$route.params.from
获取当前路由query参数：this.$route.query.from
返回上个页面：this.$router.go(-1)
(3)在vue3中使用vue-router在vue3中使用vue-router更加简洁方便
// router.jsimport { createRouter, createWebHistory } from 'vue-router'import ResourceHome from '@/views/ResourceHome'const routes = [ { path: "/", name: 'base', component: ResourceHome },]const router = createRouter({ history: createWebHistory(), //去掉#号 routes, linkActiveClass: 'active' //高亮})export default router // main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'const app = createApp(App)app.use(router)app.mount('#app')在组件中使用useRouter,useRoute 完成路由跳转和获取路由信息的方式
import { useRouter,useRoute } from 'vue-router';// script export default { // 路由跳转 const router = useRouter(); // 路由信息 const route = useRoute(); const id = ref(route.params.id) setup(){ // 页面加载完成执行 onMounted(()=>{ // 执行submit方法 submit() }) // methods const submit = ()=>{ // 提交方法 // 跳转 router.push('/index'); } return { // 返回 submit } }};script>基本上对vue3的了解就到此,学会了基本可以在项目中应用了，但还有一些高级的玩法，vue2复用代码用了minixs和slot,在vue3是怎么复用代码的呢，一起去学习吧！！！！
今天就先到这了,祝大家假期愉快！！！越来越多的人告诉你，认真你就输了，因为他们想让你和他一样
可是认真你就真的输了吗，每个被世界嘲弃过的人，都假装玩世不恭，而你要告诉你自己，不要装逼，认真，努力。
今儿就说到这啦，若文章表述的观点和内容引起不适，随意吐槽哈哈哈哈~~
觉得不错可关注微信公众号哦
