---

一 新特性之组合API

1.1 ref&reactive

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

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

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

<script>
import {ref,reactive} from "vue";
export default {
  name: 'HelloWorld',
  setup() {
    //ref
    const message=ref("消息文本")
    //reactive
    const names=reactive({
      list:["xiaoMing","Tom","Jack"]
    })
    return {
      message,
      names
    }
  }
}
</script>

1.2 methods

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

<script>
import {ref,reactive} from "vue";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props) {
    //ref
    const message=ref("消息文本")
    //function
    function clickHandle() {
      alert("文本内容改变了！")
      message.value="新的消息文本"
    }
    return {
      message,
      clickHandle
    }
  }
}
</script>

1.3 props和context

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

<script>
import {ref,reactive} from "vue";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props,ctx) {
    //setup中没有this对象，要用context
    console.log(ctx)
    const msg=props.msg
    return {
      msg
    }
  }
}
</script>

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>

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

Options API	Hook inside setup
beforeCreate	Notneeded*
Created	Notneeded*
beforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

<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()函数获取上层传递过来的数据

---

---

• 父级组件代码

<script>
import HelloWorld from './components/HelloWorld.vue'
import MyCompent from "@/components/MyCompent";
import {provide} from "vue";

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyCompent
  },
  setup() {
    provide("message","父组件传递向子组件的内容")
  }
}
</script>

• 子级组件代码

<script>
import {inject} from "vue";

export default {
  name: "MyCompent",
  setup() {
    const customVal=inject("message");
    return {
      customVal
    }
  }
}
</script>

四 Fragment（碎片）

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

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