Vue3.0——常用的Composition API（监听属性、Vue3生命周期、Teleport、自定义事件、状态驱动的动态 CSS、Suspense）


<script>
// 注意:vue2.x和vue3.x不要混用
// 1.引入
import { watch, ref,reactive } from "vue"
export default {
  data() {
    return {
    }
  },
  computed: {
  },
  setup() {
    let num = ref(0);
    let msg = ref("hello");
    let person = reactive({
        name:"李国栋",
        age:18,
        more:{
            job:"前端开发工程师",
            salary:"12k"
        }
    })
    // 1.监听ref定义的响应式数据
    watch(num, (newvalue, oldvalue) => {
      console.log("num变量", newvalue, oldvalue);
    })
 
    // 2.监听多个ref定义的响应式数据
    watch([num, msg], (newvalue, oldvalue) => {
      console.log("msg数据变化了", newvalue, oldvalue);
    })
    let addmsg = () => {
      msg.value += "!"
    }
    
    //3.监听reactive所定义的一个响应式数据的全部属性
    //注意：此处无法正确的获取oldvalue
    //注意：并且强制开启了深度监视(deep配置无效)
    
    watch(person, (newvalue, oldvalue) => {  //person不能写person.name,因为它是监听一个变量。那么就只有返回函数了，就是下面的4
      console.log("person数据变化了", newvalue, oldvalue);
    },{deep:false})   //即使设置了false，但是也会强制开启，所以为true
      
    //4.监听reactive所定义的一个响应式数据的某一个属性
    //这种方法一般不用
    watch(()=>person.name, (newvalue, oldvalue) => {
      console.log("person数据变化了", newvalue, oldvalue);
    },{deep:false})
 
    return { num, msg, addmsg }
 
  }
}
script>

8.Vue3生命周期

created可以访问this了

created做网络请求的时候，页面还没出来

mounted做网络请求的时候，页面出来了

1) 什么是生命周期

Vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁、这就是一个组件所谓的生命中周期

2) Vue2.x中的生命周期

beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed
activated deactivated
errorCaptured

3) Vue3.x的生命周期

在Vue3.x中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行,因为在这个函数中不能通过this来获取实例的；

同时为了命名的统一，

将beforeDestory改名为beforeUnmount，

destoryed改名为unmounted

beforeCreate（建议使用setup代替）created（建议使用setup代替）

选项式API
setup
beforeMount mounted
beforeUpdate updated
beforeUnmount unmounted

4） vue3 新增的生命周期钩子

我们可以通过在**生命周期函数**前加**on**来访问组件的生命周期

**Composition API 形式的生命周期钩子**

组合式API

onBeforeMount onMounted （unmounted==>app组件挂载了以后执行）
onBeforeUpdate onUpdated
onBeforeUnmount onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggered

effect

9.Teleport

Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。

然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置

就是让它不要渲染到vue里面

模态弹框

to属性：放到指定位置