第二篇、vue组件生命周期 beforeMount()和mounted()

最新推荐文章于 2024-10-08 20:29:52 发布

前端小灰机

最新推荐文章于 2024-10-08 20:29:52 发布

阅读量666

点赞数

文章标签： vue.js 前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_59474517/article/details/125634334

版权

beforeMount()

与created类似，有this，有数据，没有真实dom
用于数据修改和网络请求

mounted()

实例挂载后，有this，有数据data，有真实dom，
用于dom的初始化的操作，做数据修改会触发到update的生命周期

  Vue.component('son', {
    template: '#son',
    data() {
      return {
        num: 4
      }
    },
    beforeMount(){

      console.log('beforeMount')
      console.log(this)
      console.log(this.num)
      console.log(this.$refs.p)
    },
    mounted() {

      console.log('mounted')
      console.log(this)
      console.log(this.num) // 数据有
      this.num = 5
      console.log(this.$refs.p) // 没有
    }
  })

  new Vue({}).$mount('#app')