关于vue.js:Vue30初体验-新功能以及相关库使用

前言

vue3.0 从公布到当初曾经有几个月了，基本上大家都处于一个试玩阶段。但搬砖的厂里有了新我的项目，领导提出新我的项目用 vue3.0 + ts 踩坑的想法，那么 vue3.0 到底怎么玩，最近也略微搞了下，上面疾速和铁汁们分享一波根底的应用。

看完文章，你会学习到：

1. vue3 的应用装置
2. vue3 的新个性
3. vuex，vue-router 的降级和应用

老样子，上面咱们间接开冲！

体验 Vue3 的形式

• vue-cli

官网指定 cli 工具，要更新最新版本。这个比较稳定，倡议刚开始应用这个

  // 新版 vue-cli 会多出一个创立 vue3 的我的项目、抉择 vue3 之后、其余的配置就看大家们的爱好了
  npm install -g @vue/cli
  vue create vue3-project
  cd vue3-project
  vue add vue-next
  npm run serve

• webpack

这个是 vue-cli 还没开始反对时候，vue 官网本人搞得一套 webpack 我的项目配置，间接 clone

  git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
  cd 01-vue3-webpack
  npm install 
  npm run dev

• vite

这个就比拟有意思了，这个是尤大大最近着重开发的一个工具，意在代替 webpack 打包，外围是利用浏览器当初曾经反对 import，遇到 import 会应用 http 申请去加载文件，在 vite 中应用 koa 拦挡这些申请，进行分类以及预编译，加载各个模块，在 build 时候应用 rollup 进行打包，节俭了大部分工夫，实现简单我的项目秒开

  npm install -g create-vite-app
  create-vite-app vue3-vite
  cd vue3-vite
  npm install
  npm run dev

ps: 铁汁们在应用的时候留神本人的 node 版本，应用 vite 时候须要高版本的 node。

Vue3 新个性

• Composition API 体验

蕴含 setup、ref、computed 等。因为 reactive，compiler-sfc, complier-dom 等外围模块的抽离，能够更加自在的在我的项目中援用应用，使函数式编程能够施展更大的作用

setup

Vue3.0 的重要新函数，相熟 React 的同学们必定常常用 Hooks，其实我个人感觉这个和 Hooks 其实很像，当然我也不分明尤大大是不是借鉴的 React(/ 手动狗头)，不过函数式编程必定是爽的。

setup 是个独立的函数，外部能够应用 Vue 的所有模块，包含了生命周期、响应式、computed、watch 等，最初返回一个对象，能够在 template 中间接调用。

reactive、ref

看名字就晓得是 vue 的三大件之一响应式的模块，这次做了很大变革，应用了 proxy 代替以前的 defineprototype，性能上晋升很多，反对了 Array 的监听，并且独自抽离了进去。
应用形式是传入一个对象，返回一个 proxy 代理监听过的对象，代理过的数据都是响应式的。

computed、watch
这次 computed 和 watch 都拆分成了独立的模块，在应用的时候按需引入进来应用形式也有了丢丢扭转

好了，说了那么多，光说不练假把式，咱们写个???? 来看看：

<template>
  <div>
    <p>count: {{state.count}}</p>
    <p>doubleCount: {{doubleCount}}</p>
    <p>number: {{number}}</p>
    <div><button @click="add">add</button></div>
  </div>
</template>
<script>
    import {reactive, computed, ref} from 'vue'

    export default {
      name: 'App',
      setup () {
        const state = reactive({count: 1})

        const number = ref(0)

        const doubleCount = computed(() => state.count * 2)

        function add () {
          state.count++
          number.value += 10
        }

        return {state, doubleCount, add, number}
      }
    }
</script>

• Fragment

这个我集体认为还是很爽的，反对多根节点，不必特意在里面成心套一层无用 DOM，尽管一些纠错工具仍然会标红就是了 ….

<template>
  <h3> 体验一把 Fragment</h3>
  <h3> 能够有多个根节点 </h3>
</template>

<script>
    ...
</script>

• Teleport

这个和 react 的传送门的概念差不多，也是创立一个 DOM 插入到根节点。

<template>
  <div>
    <h3> 类 react 传送门 Teleport</h3>
    <p><button @click="isOpen = !isOpen"> 关上 / 敞开弹窗 </button></p>
    <Teleport to="#app">
      <div v-if="isOpen"> 一个弹窗!!!!!!</div>
    </Teleport>
  </div>
</template>

<script>
import {reactive, computed, ref} from 'vue'

export default {
  name: 'App',
  setup () {const isOpen = ref(false)
    return {isOpen}
  }
}
</script>

Vue3 配套的库

尽管下面说了 Vue3 的新个性，咱们开发我的项目必定不能只用框架使劲怼，还得让配套的库跟上才好用，上面介绍下 vuex 和 vue-router 的应用。

• 一键降级 vuex 和 vue-router

vue add vue-next

• vue-router 4.x 独自装置 & 应用

  • 装置形式

  npm install vue-router@next

  • 应用形式

  // route.js
  // route 注册
  import {createRouter, createWebHistory} from 'vue-router'
  
  const routes = [// ... 这里老样子]
  
  const router = createRouter({history: createWebHistory(process.env.BASE_URL),
    routes
  })
  
  export default router
  
  // Page 页面
  // template 中应用 组件雷同 Link Router-view 组件
  <template>
      <link to="xxx" />
      <router-view /></router-view>
  </template>
  
  // script 中办法调用
  
  <script>
      import {useRouter} from 'vue-router'
      
      export default {
        name: 'App',
        setup () {const router = useRouter()
          router.push({path: '', query: {}})
          // ...
        }
      }
  </script>

• vuex 4.x 独自装置 & 应用

  • 装置形式

  npm install vuex@next

  • 应用形式

     // store.js
     // vuex 注册
    import {createStore} from 'vuex'
  
    export default createStore({
      state: {userName: 'xiaoming'},
      mutations: {},
      actions: {},
      getters: {},
      modules: {}})
      
    // Page 页面
    // 获取 store
    <script>
      import {useStore} from 'vuex'
      
      export default {
        name: 'App',
        setup () {store = userStore()
          
          const userName = store.state.userName
          // ...
        }
      }
    </script>

• vue 和相干库在 main 文件中注册应用

import {createApp} from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index.js'
import store from './store/index.js'

const app = createApp(App)

// 注册路由
app.use(router)

// 注册 vuex
app.use(store)

// ps: 相干的 install，肯定要在 mount 之前注册

app.mount('#app')

写在最初

注释到这里差不多就完结了。说句题外话，vue3.x 对于 vue2.x 来说更新的还是蛮多的，除了咱们曾经说烂了的响应式重写，动态属性晋升优化，diff 最长递增子序列等等，写法上也有了很大不同。我集体还是蛮喜爱函数式编程的写法，兄弟萌能够在平时无聊的时候玩一玩。

emmmmmm，尽管 element-ui 曾经根本不更新了，更别说适配 vue3。组件库说实话，的确是个问题，不过这个之后必定也是会解决的。

这次分享到这里就完结了，感觉有用的兄弟萌能够点个赞。文中有不对的中央，也心愿大佬们帮我指出改过，hhhh。