vue3.0较2.0的变化

1.创建vue实例

vue3 创建vue实例不需要使用 new 的方式了，而是函数式风格来创建vue实例的,来看 src/main.js 文件

//vue.3.0 创建实例
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')


//vue2.0 创建实例
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

2.路由

vue3.0 创建路由实例需要手动引入 createRouter 方法，创建 history 模式路由也需要手动引入 createWebHistory 方法，这达到 Tree-Shaking 的目的，即不会把所有的 api 都打包进来，只会打包你用到的 api

vue2.0 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件

//vue 3.0 路由
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router

//vue 2.0 路由
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login/Login' // 登录
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
      ]
    }
  ]
})

3.响应式数据、methods、watch 和 computed

vue2０版本中，我们声明响应式数据是这样的：

export default {
	data() {
		return {
			state: {
				count: 0
			}
		};
	},
}

在vue3.0中，需要这样:我们要先引入 ref 方法，然后使用它来声明响应式变量。重要的是，这些操作需要在 setup 函数中进行，而且添加 methods，watch 和 computed 都需要在 setup 中进行。这就跟在vue2中有很大的不同，vue2中我们是使用选项的方式来创建 data、methods、watch 和 computed 的

import { ref } from 'vue'
export default {
	setup () {
		const count = ref(0) // 声明 count，初始值为 0
		const str = ref('hello') // 声明 str，初始值为 'hello'
		return {
			count,
			str
		}
	}
}

接下来演示一个计数器的功能

<template>
   <div class="home">
   		<p>count: {{count}}</p>
   		<p>doubleCount: {{doubleCount}}</p>
   		<button @click="add">增加</button>
   </div>
</template>

<script>
import { ref, watch, computed } from 'vue'   //用到需要引入
export default {
   setup () {
   		// 声明 count 变量，初始值为 0
   		const count = ref(0)
   		
   		// 定义 add 方法
   		const add = () => {
   			count.value++
   		}
   		// 定义 watch，需要手动引入 watch 方法 
   		//watch方法有两个参数，都是函数，
   		//第一个函数返回要监听的值，第二个函数是回调函数，它两个参数分别表示新值和旧值。
   		watch(() => count.value,
   			(val, oldVal) => { console.log(`new count: ${val}，old count: ${oldVal}`) }
   		)
   
   		// 定义computed，同样需要手动引入 computed 方法
   		// computed 方法返回计算过的值，最后需要 return 出去
   		const doubleCount = computed(() => count.value * 2)
   	
   		return {
   			count,
   			add,
   			doubleCount
   		}
   }
}
</script>

上面列子中,首先定义方法是可以直接定义在setup 函数中的，然后 return 出去，不知可否注意到 在方法里访问 count 时，是使用 .value 方法访问的，
这里要强调一下，在 setup 中访问已声明的响应式变量时，需要使用 .value 方式访问，包括在 watch 和 computed中

记得点赞么么哒!

交流
1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057

2、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！