Vue的钩子函数

最新推荐文章于 2022-01-12 17:21:03 发布

小鹿不在林间

最新推荐文章于 2022-01-12 17:21:03 发布

阅读量700

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/C_Chenshao/article/details/104623088

版权

钩子函数是一个函数，是在一个事件触发的时候，在系统级捕获到了它，然后做一些操作。是一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。

Vue中最常见的就是一下几种：

beforeCreated，
created，
mounted，
computed，
watch

beforeCreate

这个阶段的时候，this变量还不能使用在data下的数据，和methods下的方法，watcher中的事件都不能获得到；

created

这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；

mounted

这个时候挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。
注意：mounted在整个实例的生命周期中只执行一次。

computed

data() {
    return {
      num: 5
    }
  },
 computed: {
    double() {
        return this.num *2
    }   
  }

定义了一个方法double()，里面写对数据的一些处理操作，此时在模板里需要显示的位置直接引用{{double}}就可以了。

watch

data() {
    return {
      num: 5
    }
  },
  watch: {
    num: (newval, oldval) => {
      console.log('新数据：',newval,'旧数据',oldval)
    }
  }

用法：watch:{监听的数据:回调函数}
这时候如果监听的数据num发生了改变，那么监听数据变量发生变化的回调函数就会被执行
注意：需要监听的这个变量需要在data里面声明，如果不声明就会报错

关注