vue3.0语法

迷南。 2022-12-29 00:30 123阅读 0赞

# VUE3.0 #

Vue3.0-beta链接：https://github.com/vuejs/vue-next\#status-beta

## Vue3.0设计目标 ##

*  更小
    
     *  全局 API 和内置组件 / 功能支持 tree-shaking
     *  常驻的代码尺寸控制在 10kb gzipped 上下
 *  更快
    
     *  基于 Proxy 的变动侦测，性能整体优于 getter / setter
     *  Virtual DOM 重构
     *  编译器架构重构，更多的编译时优化
 *  加强API设计一致性
 *  加强TypeScript支持
 *  提高自身可维护性
    
     *  代码采用 monorepo 结构，内部分层更清晰
     *  TypeScript 使得外部贡献者更有信心做改动
 *  开放更多底层功能

## 一、创建项目 ##

// 先升级vue-cli到4.x版本
    cnpm install -g @vue/cli
    
    // 通过脚手架创建项目，一路回车
    vue create vue3.0

## 二、升级2.6到3.0beta版本 ##

// 安装完vue/cli以后，可以使用vue add添加插件
    // 目前3.0对应的是vue-next项目
    vue add vue-next

安装完vue-next以后，我们就发现本地项目已经升级到了3.0. 打开main.js如下：

2.6

Vue.use(VueAxios, axios)
    Vue.config.productionTip = false
    Vue.prototype.$axios=axios;
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

3.0

createApp(App).use(router).use(store).mount('#app')

前面我们提到Vue3.0更小，因为它支持Tree-Shaking，可以把每一个用到的API都抽取出来，通过上图我们发现，可以只解构出一个createApp函数，相比2.0简化了很多。

## 三、LifeCycle介绍(Hooks) ##

Vue3.0中，生命周期方法已经发生了很大变化

<table> 
 <thead> 
  <tr> 
   <th>2.0 周期名称</th> 
   <th>3.0 周期名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>setup</td> 
   <td>组件创建之前</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>setup</td> 
   <td>组件创建完成</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>onBeforeMount</td> 
   <td>组件挂载之前</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>onMounted</td> 
   <td>组件挂载完成</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>onBeforeUpdate</td> 
   <td>数据更新，虚拟 DOM 补丁之前</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>onUpdated</td> 
   <td>数据更新，虚拟 DOM 渲染完成</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>onBeforeUnmount</td> 
   <td>组件销毁之前</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>onUnmounted</td> 
   <td>组件销毁后</td> 
  </tr> 
 </tbody> 
</table>

<template>
    
      <router-link to="/">点这里去首页</router-link>
    
      <hr>
    
      <div class="home">
    
        这里是一个计数器 >>> <span class="red">{
       {count}}</span> <br>
    
        <button @click="countAdd">点击加数字</button>
    
      </div>
    
    </template>
    
    <script>
    
    // 你需要使用到什么生命周期，就引出来什么生命周期
    
    import {
    
      onBeforeMount,
    
      onMounted,
    
      onBeforeUpdate,
    
      onUpdated,
    
      onBeforeUnmount,
    
      onUnmounted,
    
      ref
    
    } from 'vue'
    
    export default {
    
      // setup 函数，就相当于 vue 2.0 中的 created
    
      setup () {
    
        const count = ref(0)
    
        // 其他的生命周期都写在这里
    
        onBeforeMount (() => {
    
          count.value++
    
          console.log('onBeforeMount', count.value)
    
        })
    
        onMounted (() => {
    
          count.value++
    
          console.log('onMounted', count.value)
    
        })
    
        // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值，会死循环的哦！
    
        onBeforeUpdate (() => {
    
          console.log('onBeforeUpdate', count.value)
    
        })
    
        onUpdated (() => {
    
          console.log('onUpdated', count.value)
    
        })
    
        onBeforeUnmount (() => {
    
          count.value++
    
          console.log('onBeforeUnmount', count.value)
    
        })
    
        onUnmounted (() => {
    
          count.value++
    
          console.log('onUnmounted', count.value)
    
        })
    
        // 定义一个函数，修改 count 的值。
    
        const countAdd = () => {
    
          count.value++
    
        }
    
        return {
    
          count,
    
          countAdd
    
        }
    
      }
    
    }
    
    </script>

## 四、Composition API介绍 ##

实际上，起初定义的是Vue-Function-API，后经过社区意见收集，更名为Vue-Composition-API.

接下来，我们介绍几个变化大的Composition API：

*  reactive API
 *  ref API
 *  watch API变化
 *  computed API变化
 *  生命周期钩子变化
 *  TypeScript和JSX支持

### reactive ###

作用：创建响应式对象，非包装对象，类似于在2.0的data中声明变量。

它本身一种Hooks能力，用过React Hook的，实际上就等同于useState();大家估计很好奇，为什么叫reactive? 让人莫名有一种你再抄袭React的感觉！

接下来，上硬菜：

// 打开 App.vue，删除多余代码
    <template>
      <div id="app">
        <h1>{
       {title.name}}</h1>
      </div>
      <div>
        // 此处可并列多个div，不再要求一个根元素了
      </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup(){
        const title = reactive({
          name:'欢迎学习Vue3.0'
        })
        return { title }
      }
    }
    </script>
    <style>
    #app {
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

### Ref ###

作用：创建一个包装式对象，含有一个响应式属性value

它和reactive的差别，就是前者没有包装属性value

接下来，上硬菜：

<template>
      <div id="app">
        <h1>{
       {title.name}}</h1>
        <div>{
       {user}}</div>
      </div>
    </template>
    
    <script>
    import { reactive,ref } from 'vue'
    export default {
      name: 'App',
      setup(){
        const title = reactive({
          name:'欢迎学习Vue3.0'
        })
        const user = ref('河畔一角');
        //如果需要修改值，可通过value
        user.value = '河畔老师'
        return { title ,user }
      }
    }
    </script>
    <style>
    #app {
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

### 事件处理 ###

既然不用methods，那事件处理该怎么调用方法？

上硬菜：

<template>
      <div id="app">
        <h1>{
       {title.name}}</h1>
        <div>{
       {user}}</div>
        <button @click="updateUser">修改名称</button>
      </div>
    </template>
    
    <script>
    import { reactive,ref } from 'vue'
    export default {
      name: 'App',
      setup(){
        const title = reactive({
          name:'欢迎学习Vue3.0'
        })
        const user = ref('河畔一角');
        const updateUser = ()=>{
          //如果需要修改值，可通过value
          user.value = '河畔老师'
        }
        return { title , user, updateUser }
      }
    }
    </script>
    
    <style>
    #app {
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

### onMounted/computed ###

作用：周期函数和计算函数

上硬菜：

<template>
      <div id="app">
        <h1>{
       {title.name}}</h1>
        <div>{
       {user}}</div>
        <button @click="updateUser">修改名称</button>
        <div>当前count：{
       {computedCount}}</div>
        <button @click="increment">修改count</button>
      </div>
    </template>
    
    <script>
    import { reactive,ref,onMounted,computed } from 'vue'
    export default {
      name: 'App',
      setup(){
        const title = reactive({
          name:'欢迎学习Vue3.0'
        })
        const user = ref('河畔一角');
        //如果需要修改值，可通过value
        
        const updateUser = ()=>{
          user.value = '河畔老师'
        }
        
        //生命周期方法
        onMounted(()=>{
          console.log('init mounted...')
        })
        // 初始化count值
        const count = ref(0);
        const increment = ()=>{
          count.value++
        }
        // 调用计算属性函数Hook
        const computedCount=computed(()=>count.value*10)
        return { title , user, updateUser,count,increment,computedCount }
      }
    }
    </script>
    
    <style>
    #app {
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

经过以上几个API讲解，相信大家开始越来越激动了，语法新颖，简洁凝炼，但大家需要有一个过渡期，刚开始肯定会很陌生；

实际上用法远不止这些，包括父子传递、支持jsx语法等，我们这儿不做一一介绍了，大家可以自已通过第三方资料整理，了解更多Vue3.0的语法；

给大家提供几个官网的API文档：

https://composition-api.vuejs.org/\#summary

https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

尤大4.21直播回放地址：

https://live.bilibili.com/record/R14x411c7rW

上述源码已经上传Github: https://github.com/JackySoft/vue3.0-demo

温馨提示：目前Vue3.0是会兼容大部分2.x的语法，实际上主要的变化，在上面的Vue3.0设计目标里面已经列出，我们主要的学习成本可能就在Composition API这块，新增了很多组合API，它本身不依赖this指针，方便我们对逻辑做抽取封装。