Vue3.0初体验 - 新功能以及相关库使用

时间  2020-11-21 标签 css vue node react webpack git github web vue-router vuex

前言

vue3.0从发布到如今已经有几个月了，基本上你们都处于一个试玩阶段。但搬砖的厂里有了新项目，领导提出新项目用vue3.0 + ts踩坑的想法，那么vue3.0到底怎么玩，最近也稍微搞了下，下面快速和铁汁们分享一波基础的使用。css

看完文章，你会学习到：vue

  1. vue3的使用安装
  2. vue3的新特性
  3. vuex，vue-router的升级和使用

老样子，下面咱们直接开冲！
imagenode

体验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。react

Vue3新特性

  • Composition API体验
包含setup、ref、computed等。因为reactive，compiler-sfc, complier-dom等核心模块的抽离，能够更加自由的在项目中引用使用，使函数式编程能够发挥更大的做用

setup webpack

Vue3.0的重要新函数，熟悉React的同窗们确定常常用Hooks，其实我我的感受这个和Hooks其实很像，固然我也不清楚尤大大是否是借鉴的React(/手动狗头)，不过函数式编程确定是爽的。

setup是个独立的函数，内部可使用Vue的全部模块，包括了生命周期、响应式、computed、watch等，最后返回一个对象，能够在template中直接调用。git

reactive、ref github

看名字就知道是vue的三大件之一响应式的模块，此次作了很大革新，使用了proxy代替之前的defineprototype，性能上提高不少，支持了Array的监听，而且单独抽离了出来。
使用方式是传入一个对象，返回一个proxy代理监听过的对象，代理过的数据都是响应式的。

computed、watch
此次computed和watch都拆分红了独立的模块，在使用的时候按需引入进来使用方式也有了丢丢改变web

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

<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，虽然一些纠错工具依然会标红就是了....vuex

<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。
image

联系我们 沪ICP备13005482号-10