Vue3全家桶 - Vue3 - 【7】生命周期

这篇具有很好参考价值的文章主要介绍了Vue3全家桶 - Vue3 - 【7】生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

生命周期

  • Vue3官网-生命周期钩子函数;
  • 每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听、编译模板、挂载实例到DOM,以及在数据改变时更新DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常见的是createdmountedupdatedunmounted
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

一、组合式API

  • 组合式API:生命周期钩子函数【官网上面还有一些别的钩子函数】;

  • 🔺 setup 说明:

    • setup的执行时机:
      • beforeCreated钩子之前,自动执行;
    • setup中的this指向谁:
      • undefined
  • 父组件:文章来源地址https://www.toymoban.com/news/detail-839480.html

    <script setup>
        import { ref, reactive, computed, onMounted } from 'vue'
    
        // TODO 导入组件
        import Vue1 from '@/components/23-生命周期/组合式API/1.vue'
    
        // TODO 声明变量
        let isShow = ref(false)
    
        onMounted(() => {});
    </script>
    
    <template>
        <h3>App组件</h3>
        <label>
            <input type="checkbox" v-model="isShow"> 是否显示子组件
        </label>
        <hr>
        <Vue1 subTitle="好好学习" v-if="isShow" />
    </template>
    
  • 子组件:
    <template>
        <h4 id="age">
        <i>年龄:{{ age }}</i>
        </h4>
        <button @click="age = 70">年龄改成70</button>
        <button @click="age = 30">年龄改成30</button>
    </template>
    
    <script setup>
        import { ref, reactive, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";
        // TODO 父组件传递的数据
        let props = defineProps({
            subTitle: {
                type: String
            }
        })
    
        // TODO 声明响应式数据
        let age = ref(22);
    
        const showMessage = () => {
            console.log('函数 HELLO')
        }
    
        // TODO 生命周期钩子函数
        onBeforeMount(() => {})
    
        onMounted(() => {})
    
        onBeforeUpdate(() => {})
    
        onUpdated(() => {})
    
        onBeforeUnmount(() => {})
    
        onUnmounted(() => {});
    </script>
    

1.1 onBeforeMount

  • 组件视图 在浏览器 渲染之前 调用;
  • 可访问
    • 组件实例东西【数据源、函数、计算属性等】;
  • 不能访问
    • 组件视图中的DOM元素。
  • 示例展示:
    <template>
      <h4 id="age">
        <i>年龄:{{ age }}</i>
      </h4>
      <button @click="age = 70">年龄改成70</button>
      <button @click="age = 30">年龄改成30</button>
    </template>
    
    <script setup>
    import { ref, reactive, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";
    // TODO 父组件传递的数据
      let props = defineProps({
        subTitle: {
          type: String
        }
      })
    
    // TODO 声明响应式数据
    let age = ref(22);
    
    const showMessage = () => {
      console.log('函数 HELLO')
    }
    
    // TODO 生命周期钩子函数
    onBeforeMount(() => {
      console.log('-----------------------')
      console.log('onBeforeMount - 组件渲染之前,能访问数据源、计算属性、侦听器、函数等等,但是不能访问DOM元素')
      console.log(age.value)
      console.log(props.subTitle)
      showMessage()
      console.log(document.getElementById("age"))
    })
    </script>
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

1.2 onMounted

  • 组件视图 在浏览器 渲染之后 调用;
  • 可访问
    • 组件实例东西【数据眼、函数、计算属性等】;
    • 组件视图中的DOM元素。
  • 示例展示:
    onMounted(() => {
        console.log('-----------------------')
        console.log('onMounted - 组件视图渲染之后,能访问数据源、计算属性、侦听器、函数、DOM元素等等')
        console.log(age.value)
        console.log(props.subTitle)
        showMessage()
        console.log(document.getElementById("age"))
    })
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

1.3 onbBeforeUpdate

  • 数据源发生变化 时,组件试图重新 渲染之前 调用;
  • 可访问
    • 组件实例的东西【数据源、函数、计算属性】;
  • 注意
    • 可访问 该组件中在 更新之前的DOM元素
    • 不能访问 该组件中在 更新之后的DOM元素
  • 示例展示:
    onBeforeUpdate(() => {
        console.log('-----------------------')
        console.log('onBeforeUpdate - 数据变化之前,能访问数据源、计算属性、侦听器、函数、视图重新渲染之前的DOM元素等等')
        console.log(age.value)
        console.log(props.subTitle)
        showMessage()
        console.log(document.getElementById("age").innerHTML)
    })
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

1.4 onUpdated

  • 数据源发生变化 时,组件试图重新 渲染之后 调用;
  • 可访问
    • 组件实例东西【数据源、函数、计算属性等】;;
  • 注意
    • 不能访问 该组件中在 更新之前的DOM元素
    • 可以访问 该组件中在 更新之后的DOM元素
  • 示例展示:
    onUpdated(() => {
      console.log('-----------------------')
      console.log('onUpdated - 数据变化之后,能访问数据源、计算属性、侦听器、函数、视图重新渲染之后的DOM元素等等')
      console.log(age.value)
      console.log(props.subTitle)
      showMessage()
      console.log(document.getElementById("age").innerHTML)
    })
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

1.5 onBeforeUnmount

  • 组件实例被 卸载之前 调用;
  • 可访问
    • 组件实例东西【数据源、函数、计算属性】;
    • 组件试图中的DOM元素。
  • 示例代码:
    onBeforeUnmount(() => {
      console.log('-----------------------')
      console.log('onBeforeUnmount - 组件卸载之前,能访问数据源、计算属性、侦听器、函数、视图DOM元素等等')
      console.log(age.value)
      console.log(props.subTitle)
      showMessage()
      console.log(document.getElementById("age"))
    })
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

1.6 onUnmounted

  • 组件实例被 卸载之后 调用;
  • 可访问
    • 组件实例东西【数据源、函数、计算属性】;
  • 不能访问
    • 组件试图中的DOM元素;
  • 一般在这个生命周期函数里,我们可以手动清理一些副作用,例如计时器、DOM事件监听器或者与服务器的连接。
  • 示例代码:
    onUnmounted(() => {
      console.log('-----------------------')
      console.log('onUnmounted - 组件卸载之后,能访问数据源、计算属性、侦听器、函数等等,但是不能视图DOM元素')
      console.log(age.value)
      console.log(props.subTitle)
      showMessage()
      console.log(document.getElementById("age"))
    });
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

二、 选项式API

  • 选项式API:生命周期函数【官网还有别的钩子函数;

2.1 beforeCreate

  • beforeCreate 选项式 生命周期函数;
  • 组件实例初始化之前调用props解析已解析、datacomputed等选项还未处理】;
  • 能访问
    • props数据
  • 不能访问
    • 组件的实例 this
    • 组件中的 data中的数据methods中的方法
    • 组件中的 视图 DOM 元素
    • 组件中的 计算属性 等;
  • 组合式API 中的 setup()钩子 会在 所有选项式API钩子 之前 调用
  • 示例展示:
    • App.vue
      <script setup>
          import { ref, reactive, computed, onMounted } from 'vue'
          // 组合式API 中,导入组件之后不用注册,直接使用即可
          import Vue1 from '@/components/23-生命周期/1.vue'
      onMounted(() => {});
      </script>
      
      <template>
          <h4>App组件</h4>
          <br>
          <Vue1></Vue1>
      </template>
      
    • 子组件:
      <script>
          export default {
              props: {
                  subtitle: {
                      default: '不能懈怠!!!'
                  }
              },
              // data 写箭头函数的时候,给 return 的对象 添加小括号
              data: () => ({
                  age: 22
              }),
              methods: {
                  showMessage() {
                      console.log('函数:beforeCreate')
                  }
              },
              /**
              * 组件实例化之前调用
              * 能访问:
              *    props中的数据
              * 不能访问:
              *    data中的数据、methods中的方法、计算属性、视图DOM元素、组件实例this
              */
              beforeCreate() {
                  console.log('beforeCreate, 组件实例化之前')
                  console.log('能够访问props', this.$props.subtitle)
                  console.log('不能访问 data中的数据、方法、计算属性等', this.age)
                  console.log('不能访问 视图元素', document.getElementById('day'))
                  this.showMessage()
              }
          }
      </script>
      
      <template>
          <h4 id="day">每天进步一点点</h4>
      </template>
      
  • 运行展示:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

2.2 created

  • created 选项式 生命周期函数;
  • 组件实例化 成功后 调用
  • 可访问
    • 组件的 实例this
    • 组件中的 data中的数据函数
    • 组件中的 计算属性
    • 还有 自定义属性(props) 等;
  • 不能访问
    • 组件中的 视图DOM元素
  • 示例展示:
    • 子组件代码:
      ocmputed: {
          ageAdd() {
              retutn this.age++
          }
      },
      /**
      * 组件 实例化 成功 之后 调用
      * 能访问:
      *    data数据、methods方法、props数据、组件实例this、计算属性
      * 不能访问:
      *    视图 DOM 元素
      */
      created() {
        console.log('-------------------------------')
        console.log('created 组件 实例化 成功 之后 调用')
        console.log('能够访问props:', this.$props.subtitle)
        console.log('能访问 data中的数据、方法、计算属性等:', this.age, this, this.showMessage, this.ageAdd)
        console.log('不能访问 视图元素:', document.getElementById('day'))
        this.showMessage()
      },
      
  • 运行展示:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

2.3 beforeMount

  • 组件视图在浏览器 渲染之前 调用;
  • 可访问
    • 组件实例东西【数据源、函数、计算属性等】;
  • 不能访问
    • 组件视图中的DOM元素。
  • 示例展示:
    /**
     * 组件视图 渲染之前 调用
     * 能访问:
     *    data数据、methods方法、计算属性、组件实例this、props数据等
     * 不能访问:
     *    视图DOM元素
     */
    beforeMount() {
        console.log('-------------------------------')
        console.log('beforeMount 组件视图 渲染之前 调用')
        console.log('能够访问props:', this.$props.subtitle)
        console.log('能访问 data中的数据、方法、计算属性等:', this.age, this, this.showMessage, this.ageAdd)
        this.showMessage()
        console.log('不能访问 视图元素:', document.getElementById('day'))
    }
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

2.4 mounted

  • 组件视图在浏览器 渲染之后 调用;
  • 可访问
    • 组件实例东西【数据眼、函数、计算属性等】;
    • 组件视图中的DOM元素。
  • 示例展示:
    <script>
        /**
         * 组件视图 渲染之后 调用
         * 能访问:
         *    组件实例this、data数据、methods方法、计算属性、侦听器、视图DOM元素
         */
        mounted() {
            console.log('-------------------------------')
            console.log('mounted 组件视图 渲染之后 调用')
            console.log('能够访问props:', this.$props.subtitle)
            console.log('能访问 data中的数据、方法、计算属性等:', this.age, this, this.showMessage, this.ageAdd)
            this.showMessage()
            console.log('能访问 视图元素:', document.getElementById('day'))
        },
    </script>
    
    <template>
      <h4 id="day">每天进步一点点</h4>
      <h5 id="age">{{ age }}</h5>
      <button @click="age = 23">数据源发生改变,视图更新之前</button>
      <button @click="age = 24">数据源发生改变,视图更新之后</button>
    </template>
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

2.5 beforeUpdate

  • 数据源发生变化 时,组件试图重新 渲染之前 调用;
  • 可访问
    • 组件实例的东西【数据源、函数、计算属性】;
  • 注意
    • 可访问 该组件中在 更新之前的DOM元素
    • 不能访问 该组件中在 更新之后的DOM元素
  • 示例代码:看下一小节(8.6),放在一起做对比,效果更明显;

2.6 updated

  • 数据源发生变化 时,组件试图重新 渲染之后 调用;
  • 可访问
    • 组件实例东西【数据源、函数、计算属性等】;;
  • 注意
    • 不能访问 该组件中在 更新之前的DOM元素
    • 可以访问 该组件中在 更新之后的DOM元素
  • 示例代码:
    <script>
        export default {
            /**
            * 数据源发生改变,视图重新渲染之前 调用
            * 能访问:
            *    组件实例this、data数据、methods方法、计算属性、侦听器、数据更新之前的视图DOM元素
            * 不能访问:
            *    数据更新之后的DOM
            */
            beforeUpdate() {
                console.log('-------------------------------')
                console.log('beforeUpdate 数据源发生改变,视图重新渲染之前 调用')
                console.log('能够访问props:', this.$props.subtitle)
                console.log('能访问 data中的数据、方法、计算属性等:', this.age, this, this.showMessage, this.ageAdd)
                this.showMessage()
                console.log('能访问:数据源发生改变,视图更新之前的DOM元素:', document.getElementById('age').innerHTML)
            },
            /**
            * 数据源发生改变,视图重新渲染之后
            * 能访问:
            *    组件实例this、data数据、methods方法、计算属性、侦听器、数据更新之后的视图DOM元素
            * 不能访问:
            *    数据更新之前的DOM元素
            */
            updated() {
                console.log('-------------------------------')
                console.log('updated 数据源发生改变,视图重新渲染之后 调用')
                console.log('能够访问props:', this.$props.subtitle)
                console.log('能访问 data中的数据、方法、计算属性等:', this.age, this, this.showMessage, this.ageAdd)
                this.showMessage()
                console.log('能访问:数据源发生改变,视图更新之后的DOM元素:', document.getElementById('age').innerHTML)
            }
        }
    </script>
    
    <template>
        <h4 id="day">每天进步一点点</h4>
        <h5 id="age">{{ age }}</h5>
        <button @click="age = 23">数据源发生改变,视图更新之前</button>
        <button @click="age = 24">数据源发生改变,视图更新之后</button>
    </template>
    
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

2.7 beforeUmount

  • 组件实例被 卸载之前 调用;
  • 可访问
    • 组件实例东西【数据源、函数、计算属性】;
    • 组件试图中的DOM元素。
  • 示例代码:与 8.8 代码放在一起,好对比。

2.8 unmounted

  • 组件实例被 卸载之后 调用;
  • 可访问
    • 组件实例东西【数据源、函数、计算属性】;
  • 不能访问
    • 组件试图中的DOM元素;
  • 一般在这个生命周期函数里,我们可以手动清理一些副作用,例如计时器、DOM事件监听器或者与服务器的连接。
  • 示例展示:
    • 目标文件 App.vue(父组件):
      <script>
          import Vue1 from '@/components/23-生命周期/1.vue'
          export default {
              components: { Vue1 },
              data: () => ({
                  checked: false
              })
          }
      </script>
      
      <template>
          <h4>App组件</h4>
          <label>
              是否显示子组件
              <input type="checkbox" v-model="checked">
          </label>
          <br>
          <Vue1 v-if="checked"></Vue1>
      </template>
      
    • 目标文件: 1.vue(子组件):
      /**
      * 组件实例 被卸载之前 调用
      * 能访问:组件实例、data数据、methods方法、计算属性、侦听器、props等等
      * 不能访问:
      * */
      beforeUnmount() {
          console.log('-------------------------------')
          console.log('beforeUnmount 组件实例 被卸载之前 调用')
          console.log('能够访问props:', this.$props.subtitle)
          console.log('能访问 data中的数据、方法、计算属性等:', this.age, this, this.showMessage, this.ageAdd)
          this.showMessage()
          console.log('能访问:DOM元素:', document.getElementById('age').innerHTML)
      },
      /**
      * 在 组件实例 被卸载之后 调用
      * 能访问:
      *    props、data数据、methods方法、计算属性、侦听器、组件实例this等等
      * 不能访问:
      *    组件视图中的DOM元素
      * */
      unmounted() {
          console.log('-------------------------------')
          console.log('unmounted 组件实例 被卸载之后 调用')
          console.log('能够访问props:', this.$props.subtitle)
          console.log('能访问 data中的数据、方法、计算属性等:', this.age, this, this.showMessage, this.ageAdd)
          this.showMessage()
          console.log('能访问:DOM元素:', document.getElementById('age').innerHTML)
      }
      
  • 运行效果:
    Vue3全家桶 - Vue3 - 【7】生命周期,Vue3,vue.js,javascript,前端,前端框架,笔记

三、 生命周期总结(选项式+组合式)

3.1 组合式API:

钩子函数 调用时机 可以访问 不能访问
onBeforeMount 组件视图渲染之前 数据源、函数、计算属性、侦听器、props等等 组件中的DOM元素
onMounted 组件视图渲染之后 数据源、函数、计算属性、侦听器、propsDOM元素等等
onBeforeUpdate 数据发生变化,视图重新渲染之前 数据源、函数、计算属性、侦听器、props、视图重新渲染之前的DOM元素等等 视图重新渲染之后的DOM元素
onUpdated 数据源发生变化,视图重新渲染之后 数据源、函数、计算属性、侦听器、props、视图重新渲染之后的DOM元素等等 视图重新渲染之前的DOM元素
onBeforeUnmount 组件卸载之前 数据源、函数、计算属性、侦听器、props、组件的DOM元素等等
onUnmounted 组件卸载之后 数据源、函数、计算属性、侦听器、props等等 组件DOM元素

3.2 选项式API

钩子函数 调用时机 可以访问 不能访问
beforeCreate 组件 实例 初始化之前 自定义属性(props)等 data数据、methods方法、组件实例this、计算属性、侦听器、视图DOM元素
🔺created 组件 实例 初始化 成功之后 自定义属性、data数据、methods方法、组件实例this、计算属性、侦听器等 视图DOM元素
beforeMount 组件 渲染 之前 自定义属性、data数据、methods方法、组件实例this、计算属性、侦听器等 视图DOM元素
🔺mounted 组件 渲染成功 之后 组件实例thisdata数据、methods方法、计算属性、侦听器、视图DOM元素等
beforeUpdate 数据发生改变,DOM更新之前 组件实例thisdata数据、methods方法、计算属性、侦听器、自定义属性(props)、组件更新之前的DOM元素等 组件更新之后的DOM元素
updated 数据发生改变,DOM更新之后 组件实例thisdata数据、methods方法、计算属性、侦听器、自定义属性(props)、组件更新之后的DOM元素等 组件更新之前的DOM元素
beforeUnmount 组件实例 被卸载之前 组件实例thisdata数据、methods方法、计算属性、侦听器、自定义属性(props)、组件视图DOM元素等等
unmounted 组件实例 被卸载之后 组件实例thisdata数据、methods方法、计算属性、侦听器、自定义属性(props)等等 组件视图DOM元素

到了这里,关于Vue3全家桶 - Vue3 - 【7】生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 的生命周期

    1、初始化阶段: 【1】beforeCreate == setup() data挂载之前 【2】created == setup() data挂载了,但是写的模板语法没有渲染到页面上 【3】beforeMount == onBeforeMount 挂载了,但是页面没有渲染 【4】mounted == onMounted 页面渲染结束 --------------------------------------全部Vue初始化完成了 ------------

    2024年02月09日
    浏览(43)
  • vue3的生命周期

    vue3中的选项式生命周期钩子基本与vue2中的大体相同,它们都是定义在 vue实例的对象参数中的函数,它们在vue中实例的生命周期的不同阶段被调用。生命周期函数钩子会在我们的实例 挂载,更新,卸载等过程中被调用的函数 以下是vue3中的主要选项式生命周期函数钩子: be

    2024年02月09日
    浏览(37)
  • vue3-生命周期钩子函数

    声明周期函数onMounted ,onUnmounted,onUpdated onMounted:页面渲染之前执行,执行完,页面就出来了 onUnmounted:组件注销之前执行,执行完组件就不在页面显示了。如果隐藏组件就行执行。 onUpdated:当组件内的内容发生变化时,就会执行这个更新钩子函数,比如删除数组中的某个元素

    2024年02月11日
    浏览(43)
  • 【Vue3】学习笔记-生命周期

    Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: beforeDestroy 改名为 beforeUnmount destroyed 改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下: beforeCreate === setup() created ======= setup() beforeMount === onBeforeMount mounted ======= onMo

    2024年02月11日
    浏览(41)
  • Vue.js 生命周期详解

    Vue.js 是一款流行的 JavaScript 框架,它采用了组件化的开发方式,使得前端开发更加简单和高效。在 Vue.js 的开发过程中,了解和理解 Vue 的生命周期非常重要。本文将详细介绍 Vue 生命周期的四个阶段:创建、挂载、更新和销毁。 在创建阶段,Vue 实例被创建并初始化。这个阶

    2024年02月13日
    浏览(41)
  • 前端学习--Vue(4) 生命周期

    一个组件从创建-运行-销毁的真个阶段,强调的是一个时间段  1.1.1 创建 (只执行一次) created() 阶段任务:最早可以使用methods中的方法发起ajax请求获取数据,并将数据挂载到data中 mounted() 阶段任务:最早可以操作dom元素 1.1.2 运行 (最少0次,最多n次) beforeUpdate() 触发时机:

    2024年02月07日
    浏览(41)
  • Vue2和Vue3生命周期映射关系及异同

    beforeCreate - 使用 setup() created - 使用 use setup() beforeMount -onBeforeMount mounted - onMounted beforeUpdate - onBeforeUpdate updated - onUpdated beforeDestroy- onBeforeUnmount destroyed -onUnmounted activated - onActivated deactivated - onDeactivated errorCaptured - onErrorCaptured beforeCreate - 使用 setup() 函数替代 Vue 2 中的 beforeCrea

    2024年01月24日
    浏览(42)
  • Vue3通透教程【七】生命周期函数

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月02日
    浏览(41)
  • Vue3 第三节 计算属性,监视属性,生命周期

    1.computed计算属性 2.watch监视函数 3.watchEffect函数 4.Vue的生命周期函数 计算属性简写和完整写法 2.1 监视情况分类  情况① 监视ref定义的响应式数据: 第一个参数是监视的数据,第二个参数是一个回调函数 immediate:一上来就执行,放到第三个参数中 情况② 监视多个ref定义的响应

    2024年02月14日
    浏览(46)
  • Vue.js生命周期及其应用示例

    Vue.js是一种流行的前端JavaScript框架,可以让开发人员轻松构建动态用户界面。Vue.js的一个关键特性是其生命周期系统,它允许开发人员在组件的不同阶段执行代码。在本文中,我们将探讨Vue.js生命周期的不同阶段以及如何在这些阶段执行代码,并举例说明。 Vue.js生命周期分

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包