当前位置：首页 > news >正文

vue-生命周期

news 来源：原创 2024/5/7 4:35:11

正常的引入外部文件
script src=’…/base/vue.js’></script
script src=’…/js/axios.min.js’>/script

**钩子函数本身就是function**

生命周期：
所有的生命周期钩子自动绑定this上下文到实例中，因此我们可以访问数据，对属性和方法进行运算。

这就表示我们不能用箭头函授来定义一个生命周期，因为this 指代上下文。
1 beforeCreate （创建前）类型 Function 在实例初始化之后，数据观测(data observer) 和event/watcher 事件配置之前被调用。
2 created （以创建）实例已经创建完成之后被调用，在这一，实例已完成以下的配置：
数据观测(data observer),属性和方法的运算， watch/event 事件回调。
然而挂载截断还没开始。 $e l 属性目前不可见 3 b e f o r e M o u n t (将要挂载) 在挂载开始之前被调用，相关的 r e n d e r 函数首次被调用。 - - 该钩子在服务器端渲染期间不被调用。 4 m o u n t e d e l 被新创建的 v m .$ el替换，并挂载到实例上去之后调用该钩子。
如果root实例挂载了一个文档内元素，当mounted被调用时 vm.$el 也在文档内
–该钩子在服务器端渲染期间不被调用。
5 beforeUpdata (数据更新前) 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
可以在这个钩子中进一步的更改状态。这不会触发附加的重渲染过程。
–该钩子在服务器端渲染期间不被调用。

把下边的这些内容包括在div中

<h2>生命周期、钩子函数</h2>
<h2 id='tit'> {{title}} </h2>
<ul>
  <li v-for='item in list'>
    {{item.pname}}
  </li>
</ul>
<button @click='tap()'> 更新 </button>

在script中书写我们想要的生命周期钩子函数
在vue中常见的有4个模块 8个钩子函数当然还有 3 个但是很少用，需要可以查阅一下vue官网

var app = new Vue({
  el: '#out',
  data: {
    title: 'hello',
    list:[]
  },
   methods: {
    tap() {
      this.title='你好'
      console.log(this.title)
    }
  },

  beforeCreate() {//创建前
    //在加载之前我们一般是做loading展示图，防止出现空白页
    console.log('beforeCreate')


  },
  created() {//已经创建
    console.log('created')
    console.log(this.title)
    // 插入一个定时器
   this.timer= setInterval(function(){
      console.log(11)
      this.title++
    },2000)
  },
  beforeMount() {//即将挂载
    console.log('beforeMount')
    console.log(this.$el)
  },
  mounted() {//已经挂载
    console.log('mounted')
    console.log(this.$el)


  //   axios({
  //   method:'get', //不写也是默认的get
  //   url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
  //   params: { uid:1017}
  // }).then((data) => {
  //   // data.data 是后端返回的数据
  //   // 最后一个data是我们用的数据
  //   console.log(data.data.data)

  //   this.list=data.data.data
  // }).catch(function (err) {
  //   console.log(err)
  // })

  },
  beforeUpdate() {//数据更新前
    console.log('beforeUpdate')
   console.log(document.getElementById('tit').innerHTML)
  },
  updated(){//更新时间
    console.log(document.getElementById('tit').innerHTML)

    console.log('updated')
  },
  beforeDestroy(){ //即将销毁
    console.log('beforeDestroy')

    // 清除定时器
    clearInterval(this.timer)
  },
  destroyed(){//销毁
    console.log('destroyed')
  }
  
})