1、初始化创建项目

npm init vite-app <项目名>

2、vite相对于webpack的优势

这个是尤雨溪对于vite的介绍

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题

1. **快速的冷启动，不需要等待打包**
2. **自带热更新，并且更新速度很快**
3. **vite的热更新与webpack不同，vite采用按需编译。不需要每次重新编译，**
4. **因为vue3采用的是ES6的模块导入方式 `<script type="module" src="/src/main.js"></script>`,所以不需要webpack再对模块进行打包变成一个个bundle**

如果项目需要兼容IE或者其他原因可以依然使用vue-cli脚手架来搭建项目，目前是通过cli构建完项目之后安装vue-cli-plugin-vue-next，然后运行vue add vue-next来支持Vue3

3.Vue3相较于Vue2.xx的区别

2.xx版本经典API

经典的Vue API可以归纳为options API，可以理解为基于配置的方式声明逻辑的API。基本是已定义为基础的。对于描述一般的逻辑的确非常简单。但是一旦业务逻辑复杂的话这种表达方式就会存在一定问题。因为逻辑一旦复杂你不能给他写成一坨，必须要考虑如何组织，你要考虑抽取逻辑中的共用部分考虑复用问题，不然程序将变成非常难以维护。

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../../source/vue-next/packages/vue/dist/vue.global.js"></script>
</head>

<body>
  <div id='app'></div>
  <script>
      const App = {
          template: `
              <button @click='click'>{{message}}</button>
          `,
          data() {
              return {
                  message: 'Hello Vue 3!!'
              }
          },
          methods: {
              click() {
                  console.log('click ....', this.message)
                  this.message = this.message.split('').reverse().join('')
              }
          }
      }
      let vm = Vue.createApp(App).mount('#app')
      // console.log(vm)
  </script>
</body>

</html>

3.0版本composition API

Vue3文档

composition API 文档

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../../source/vue-next/packages/vue/dist/vue.global.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
      const { createApp, reactive,watchEffect } = Vue
      const App = {
          template: `
              <button @click="click">
              {{ state.message }}
              </button>
          `,
          setup() {
              const state = reactive({
                  message:'Hello Vue 3!!'
              })
              watchEffect(() => {
                  console.log('state change ', state.message)
              })
              function click() {
                  state.message = state.message.split('').reverse().join('')
              }
              return {
                  state,
                  click
              }
          }
      }
      createApp(App).mount('#app')
  </script>
</body>

</html>

Vue2于Vue3响应式上的实现方式比较

Vue2的解决方案

vue2是通过Object.defineProperty来重新定义getter，setter方法来进行数据的劫持。对于数组等复杂对象，再通过递归的手段实现对复杂对象的所有属性的监听。还是比较浪费性能的；还有一点就是，数组对象原型上改变数组的方法是没办法通过响应式的。所以vue2通过函数劫持的方式，对'push','pop','shift','unshift','splice','sort','reverse'进行劫持来实现数据响应式

Vue3的解决方案

新版的Vue3使用ES6的Proxy方式来解决这个问题。首先Proxy是支持数组的也就是数组是不需要做特别的代码的。对于深层监听也不不必要使用递归的方式解决。当get是判断值为对象时将对象做响应式处理返回就可以了。这个并不是发生在初始化的时候而是设置值得时候所以性能上得到很大的提升。

function reactive(data) {
    if (typeof data !== 'object' || data === null) {
        return data
    }
    const observed = new Proxy(data, {
        get(target, key, receiver) {
            // Reflect有返回值不报错
            let result = Reflect.get(target, key, receiver)

            // 多层代理
            return typeof result !== 'object' ? result : reactive(result) 
        },
        set(target, key, value, receiver) {
            effective()
            // proxy + reflect
            const ret = Reflect.set(target, key, value, receiver)
            return ret
        },

        deleteProperty(target,key){
            const ret = Reflect.deleteProperty(target,key)
            return ret
        }

    })
    return observed
}

Vue3周边生态

1. vue-router 目前版本4.0.0-beta.6 API有所变化
2. vuex 目前版本4.0.0-beta.4 与vuex3没有太大变化
3. antd-vue Vue3版本已经进入测试

Vue3+vite初探