vue3.0——监听属性、Vue3生命周期函数、Teleport、属性传值、自定义事件、状态驱动的动态 CSS、注册组件、异步组件、占位组件 Suspense

一、监听属性-watch

• 与vue2.x中的watch配置功能一致

• 注意

  • 监视reactive定义的响应式数据时，oldvalue无法正确获取，强制开始了深度监视（deep的配置失效）

  • 监视reactive定义的响应式数据的某一个值时：deep配置有效

1.监听ref定义的响应式数据

  示例：

  
  <template>
      <div>
       <p>{
  {msg}}p>
       <button @click="changemsg">change-msgbutton>
      div>   
  template>

  结果显示：

2.监听reactive定义的一个响应式数据的全部属性

  示例：

      
      <template>
          <div class="box1">
            <p>{
  {user}}p>
            <button @click="changecloth">changeclothbutton><br /><br />
            <button @click="changeshopping">changeshoppingbutton><br /><br />
            <button @click="changename">changenamebutton>
            <button @click="changeage">changeagebutton><br /><br />
          div>
      template>

 显示结果：

二、Vue3生命周期

• 什么是生命周期？

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

• Vue2.x中的生命周期

beforeCreate   created

beforeMount    mounted

beforeUpdate  updated

beforeDestroy  destroyed

activated    deactivated   errorCaptured

• Vue3.x的生命周期

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