Vue3新特性

梦里梦外; 2024-03-30 15:46 21阅读 0赞

--------------------

#### 文章目录 ####

*  一 新特性之组合API
 *   *  1.1 ref&reactive
     *  1.2 methods
     *  1.3 props和context
     *  1.4 完整代码&效果演示
 *  二 Vue3新特性之生命周期函数(在setup中)
 *  三 父子级组件间数据传递
 *   *  3.1 Provide&Inject
 *  四 Fragment（碎片）

## 一 新特性之组合API ##

### 1.1 ref&reactive ###

*  在Vue2.x中通过组件data的方法定义一些当前组件的数据

data() {
        
    	rerturn {
        
    		name: '',
    		list: []
    	}
    }

*  在Vue3.x中通过ref或者reactive创建响应式对象
 *  使用前要引入ref和reactive
 *  在setup中定义数据
 *  并且必须在return()方法中返回返回

### 1.2 methods ###

*  methods中定义的方法写在setup()中

### 1.3 props和context ###

*  在2.x版本中，组件的方法中可以通过this获取到当前组件的实例，并执行便量的修改方法的调用组件的通信等。
 *  但是在3.x版本中， set up在beforecreate和created的时就已调用无法使用this,但是可以通过接收set up(props,ctx)的方法获取到当前组件中的实例和 props

### 1.4 完整代码&效果演示 ###

<template>
      <div class="hello">
        <h1>vue3新特性：组合API</h1>
        <h1>{
       {message}}</h1>
      <ul>
        <li v-for="(item,index) in names.list" :key="index">{
       {item}}</li>
      </ul>
        <button @click="clickHandle">改变文本内容</button>
        <h1>{
       {msg}}</h1>
      </div>
    </template>
    
    <script>
    import {
          ref,reactive} from "vue";
    
    export default {
          
      name: 'HelloWorld',
      props: {
          
        msg: String
      },
      setup(props,ctx) {
          
        //setup中没有this对象，要用context
        console.log(ctx)
        //ref
        const message=ref("消息文本")
        const msg=props.msg
        //reactive
        const names=reactive({
          
          list:["xiaoMing","Tom","Jack"]
        })
        //function
        function clickHandle() {
          
          alert("文本内容改变了！")
          message.value="新的消息文本"
        }
        return {
          
          message,
          names,
          clickHandle,
          msg
        }
      }
    }
    </script>

![在这里插入图片描述][0805f76d19404fdda48665511ae6f46a.gif_pic_center]

## 二 Vue3新特性之生命周期函数(在setup中) ##

<table> 
 <thead> 
  <tr> 
   <th>Options API</th> 
   <th>Hook inside setup</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>Notneeded*</td> 
  </tr> 
  <tr> 
   <td>Created</td> 
   <td>Notneeded*</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td></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>beforeUnmount</td> 
   <td>onBeforeUnmount</td> 
  </tr> 
  <tr> 
   <td>unmounted</td> 
   <td>onUnmounted</td> 
  </tr> 
 </tbody> 
</table>

<template>
      <div class="hello">
        <h1>Vue3新特性：Setup中的生命周期函数</h1>
    
      </div>
    </template>
    <script>
    import {
        onMounted} from "vue";
    
    export default {
        
      name: 'HelloWorld',
     setup() {
        
       //现在可以书写多个同一类型的生命周期函数
       //使众多放在onMounted中的业务逻辑结构代码更清晰，比如一个逻辑放在一个函数中
       onMounted(()=>{
        
         console.log("生命周期函数：onMounted1")
       })
       onMounted(()=>{
        
         console.log("生命周期函数：onMounted2")
       })
     }
    }
    </script>

## 三 父子级组件间数据传递 ##

### 3.1 Provide&Inject ###

*  Provide()和inject()要配合使用【不限层级】，实现嵌套组件之间的数据传递
 *  这两个函数只能在setup()函数中使用
 *  父级组件使用Provide()函数向下传递数据
 *  子级组件使用inject()函数获取上层传递过来的数据

--------------------

*  父级组件代码

*  子级组件代码

![在这里插入图片描述][07464f95002742c5983b2d8e38e48b8a.png]

## 四 Fragment（碎片） ##

*  不再限于模板中的单个根结点

<template>
      <div class="hello">
        <h1>Vue3 Fragment:Fragment</h1>
      </div>
        <h1>Vue3 Fragment:Fragment</h1>
    </template>

[0805f76d19404fdda48665511ae6f46a.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e9d63d5c37534ff0a08e7e135a6c2d3d.gif
[07464f95002742c5983b2d8e38e48b8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f6bcf6422e004d0ea245d41cb55d3d30.png