Vue3.0 创建项目

1： Vue3. 0 创建项目

  检查vue -V  vue 项目的版本；  vue 脚手架版本高于4.5.0；  一定要高于4.5.0版本才支持创建vue3.0 项目。

2： 如果是创建的是vue2.0 项目， 可以直接升级： 运行命令： Vue add vue-next (命令)

3： 直接升级vue 脚手架版本（必须高于4.5.0版本才可以搭建vue3.0项目）

4：  使用vite 创建vue3.0 项目：

     Vite: 是一个由原生的ESM 驱动的web  web 开发工具， 在开发环境下基于浏览器原生ES import 开发， 在生产环境下基于Rollup 打包。

5： Vite 基本使用： 

1:  npm init vite-app <project-name> (项目名称)
2:  cd <project-name> (项目名称)
3： npm install  (安装项目依赖)
4:  npm run dev （运行项目）

6： vue2.0 ：  options api： 选项API data()   created，  methods,   computed(计算属性)，  watch(监听器)   props()

      vue3. : composition api ： 组合API 

// 从vue 按需导入
import { reactive, onMonted, onUnMouted, toRefs, ref } form 'vue'  

export default {
   // 创建响应式对象
  const mouse = reactive ({
    x: 0,
    y: 0
  })

  const msg = ref('hello')
  
  const move =(e) => {
    mouse.x = e.pageX;
    mouse.y = e.pageY
  }

  // 生命周期函数
  onMonted(() => {
     document.addEventLisener('mousemove', move)
  })

 onUnMouted(()=> {
    document.romoveEventLisener('mousemove', move)
 })
  
 // 只要是在模板中使用的数据和方法必须要return 出去
 return {
    ...toRefs(mouse);
    msg
 }
}

 函数式编程： 提取数据方便

 vue3.0 中提供了composition api  同时保留了 options api；

setup函数：  composition api 的入口函数； 

setup 函数执行时机： 相当于在created  生命周期。