mounted钩子函数_vue中的钩子函数

注意：不要在钩子函数中使用箭头函数，因为钩子函数的上下文指向的就是vue，而箭头函数的this为上一级的作用域上下文，从而会导致this无法指向vue实例

beforeCreate() {

// 实例或组件 要开始被创建了

// 还没创建好之前 是不能使用实例中的任何成员的

// 针对要去做ajax 请求的组件可以预先在beforeCreate 提前ajax请求

console.log('创建之前',this.value);

},

created() {

// 实例或组件 已经被创建好了

// created 里面是可以访问到当前实例的任何成员的

// 可以初始化一些data数据 (检测数据或者初始化数据)

console.log('创建',this.value);

},

beforeMount() {

// 开始挂载元素(挂载元素之前)

// 没挂载好之前，是拿不到组件里的dom

// 如果想要获取组件挂载之前的一些东西，在beforeMount里可以操作

console.log('挂载之前',this.value)

},

mounted() {

// 主要是在这个过程之后我们在去获取组件的dom元素是最保险的

console.log('挂载',this.value)

},

beforeUpdate() {

// 要让beforeUpdate 和 updated 这两个钩子触发 必须是模板发生了变化才会触发

// 模板更新之前

console.log('更新之前',this.value)

},

updated() {

// 要让beforeUpdate 和 updated 这两个钩子触发 必须是模板发生了变化才会触发

// 模板更新之前

console.log("更新",this.value)

},