vue3.0 beta版入门

清疚 2022-12-02 13:50 147阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]  
官网 API：https://composition-api.vuejs.org/\#summary

## 1.创建项目 ##

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

（这一步实际上用的仍然是 2.x 的版本）

## 2.升级 2.x 版本到 3.0 beta版本 ##

这一步命令执行需要进入上一步创建好的项目 `vue3.0` 文件夹中

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

安装完 vue-next 以后，我们就发现本地项目已经升级到了 3.0 ，打开 main.js 可以看到与之前的项目内容有所不同  
![在这里插入图片描述][20200831131655357.png_pic_center]

## 3.LifeCycle 生命周期介绍 ##

vue 3 生命周期发生了很大的变化

<table> 
 <thead> 
  <tr> 
   <th>原方法</th> 
   <th>升级后</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>setup</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>setup</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>onBeforeMount</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>onMounted</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>onBeforeUpdate</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>onUpdated</td> 
  </tr> 
  <tr> 
   <td>beforeDestory</td> 
   <td>onBeforeUnmount</td> 
  </tr> 
  <tr> 
   <td>destoryed</td> 
   <td>onUnmounted</td> 
  </tr> 
 </tbody> 
</table>

## 4.composition API 介绍 ##

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

### reactive ###

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

// 打开 App.vue，删除多余代码
    <template>
      <div id="app">
        <h1>{ { title.name}}</h1>
      </div>
      
    </template>
    
    <script>
    import {  reactive } from 'vue'
    
    export default { 
      name: 'App',
      setup() { 
        const title = reactive({ 
          name: '欢迎学习 Vue3.0'
        })
        return {  title }
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

页面效果图  
![在这里插入图片描述][20200831133011524.png_pic_center]

### ref ###

作用：创建一个包装式对象，含有一个响应式属性 value  
它和 reactive 的差别就是，前者没有包装属性 value

<template>
      <div id="app">
        <h1>{ { title.name}}</h1>
        <p>{ { user}}</p>
      </div>
      
    </template>
    
    <script>
    import {  reactive, ref } from 'vue'
    
    export default { 
      name: 'App',
      setup() { 
        const title = reactive({ 
          name: '欢迎学习 Vue3.0'
        })
        const user = ref('我是 ref 创建出来的')
        // 如果需要修改值,可以通过 value
        user.value = '我被改变了'
        return {  title, user }
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][20200831133737347.png_pic_center]

### 事件处理 ###

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

<template>
      <div id="app">
        <h1>{ { title.name}}</h1>
        <p>{ { user}}</p>
        <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('我是 ref 创建出来的')
        const updateUser = () => { 
          // 如果需要修改值,可以通过 value
          user.value = '我被改变了'
        }
        return {  title, user, updateUser }
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][20200831133701788.png_pic_center]

### onMounted/computed ###

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

<template>
      <div id="app">
        <h1>{ { title.name}}</h1>
        <p>{ { user}}</p>
        <button @click="updateUser">修改名称</button>
        <p>count值：{ { count}}</p>
        <p>当前 count： { { computedCount}}</p>
        <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('我是 ref 创建出来的')
        const updateUser = () => { 
          // 如果需要修改ref 创建的值,可以通过 value
          user.value = '我被改变了'
        }
    
        // 生命周期方法
        onMounted(() => { 
          console.log('init onMounted...')
        })
        // 初始化 count 值
        const count = ref(0)
        const increment = () => { 
          count.value ++
        }
        // 调用计算属性函数 Hook
        // 注意 computed 后面没有大括号 {}
        const computedCount = computed(() => count.value * 2)
        return {  title, user, updateUser, count, increment, computedCount }
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][20200831135500107.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/fa150ec4632440209ad83446d4e8a089.png
[20200831131655357.png_pic_center]: /images/20221123/1d1e7a5552c042beb2ae7ee53e5bd3a5.png
[20200831133011524.png_pic_center]: /images/20221123/0ba0719237de4316bde99dcc695fbaf6.png
[20200831133737347.png_pic_center]: /images/20221123/95507070be7844189c43274d9e3e8b06.png
[20200831133701788.png_pic_center]: /images/20221123/37e62d22c0424b068a96c4c012d19c15.png
[20200831135500107.png_pic_center]: /images/20221123/53b0b0668be14363b646d544a35f0825.png