初窥vue3.0

　　vue3.0也出来了很久一段时间了。每次看新闻逛论坛好多都是关于vue3.0的，今天抽空也学习了下，由于是第一次接触，因此查过不少资料，踩过不少坑。特此记录下。

　　（1）、全局安装最新版本的 @vue/cli npm install -g @vue/cli@next 

　　（2）、使用vite（是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码）来快速创建一个vue项目 npm init vite-app  ，这时候可能报如下错误：

　　百思不得其解，查资料没查到，想到了很久没有更新node版本，当即去更新了下node版本，然后重新执行如上命令后创建成功了。接下来依次执行如下命令：

cd 
npm install
npm run dev

　　好了，项目终于跑起来了。一个很简单的项目，里面就一个helloworld文件，打开一看，wtf，什么鬼？怎么还是vue2的语法。基本的vue-router也没有包含进去。

　　好吧，自己动手慢慢搭建吧。首先创建一个hello.vue文件，里面内容如下：

　　这就完了吗？no，no，no。还得安装vue-router并创建路由文件，否则，项目运行起来是会报错的。

　　使用命令来安装vue-router： npm install vue-router@next 

　　安装完后在项目的src文件夹下创建router文件夹，然后在该文件夹里创建路由route.js文件，内容如下：

import { createRouter, createWebHistory } from 'vue-router'

const routerHistory = createWebHistory()

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/hello',
      component: () => import (/* webpackChunkName: 'Hello' */ '../components/hello.vue')
    },
    {
      path: '/helloWorld',
      component: () => import (/* webpackChunkName: 'HelloWorld' */ '../components/HelloWorld.vue')
    }
  ]
})

export default router

　路由跳转方式：

　　（1）、

import { useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter();
     router.push("/about");
    return{}
  }
}

　　（2）、

　修改app.vue文件中的代码如下：

　　这样，一个简易的项目就搭起来了。。访问hello文件，里面创建了一个响应式变量，通过点击事件可改变该变量的值，同时会跳转到helloworld文件。

 　　下面来说一下里面用到的一些新特性：

　　（1）、setup：是专门为使用vue3的composition-api新特性开放的统一入口，执行时机位于beforeCreate之前。

　　（2）、reactive：可以创建多个响应式的数据对象，如const state = reactive({name: "boyjiang"}）。

　　（3）、ref：根据给定的值，创建响应式的数据对象，返回值是一个对象，且只有value，如：const a = ref(0)。

　　（4）、toRefs：该函数能将reactive创建的响应式对象，转化成为普通的对象，只不过，这个对象上的每个节点，都是ref()类型的响应式数据。

　　vue3.0生命周期钩子如下：

　　watch:

　　(1)、引入watch，例如

　　computed用法：