资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/20190604-Vue的生命周期

20190604-Vue的生命周期

OpenDigg / 982人阅读

摘要：销毁前组件实例销毁前执行的方法。销毁后组件销毁后，调用的方法，对的改变不会再触发函数周，实例已经解除事件监听和绑定，但结构依然存在。挂在完成后的生命周期钩子注册。生产版本设为可以启用检查。的全局语法用法在下次更新循环结束后执行延迟回调。

什么是生命周期？

每个Vue实例在被创建时都经过了一系列的初始化过程

设置数据监听

编译模板

将实例挂载到DOM

数据变化时更新DOM

在这一系列过程中，也会运行一些「生命周期钩子」的函数，用在给开发者在不同阶段添加自己的代码的机会。

</>复制代码 
  1. 「created」钩子，在一个实例被创建后执行代码
</>复制代码 
  1. new Vue({
  2.   data: {
  3.     a: 1
  4.   },
  5.   created: function () {
  6.     // `this` 指向 vm 实例
  7.     console.log("a is: " + this.a)
  8.   }
  9. })
  10. // => "a is: 1"
</>复制代码 
  1. 不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch("a", newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

</>复制代码 
  1. 参考 Vue实例

通俗的讲：就是在.Vue从加载前到销毁后，这一些系列过程中，有特定的阶段fn可以提供我们开发者来进行操作。

阶段
钩子函数方法 触发阶段 操作
beforeCreate 创建前 组件实例刚被创建，组件属性计算前，数据对象data都未定义，未初始化
created 创建后 组件实例创建完成，属性已经绑定，数据对象data已经定义存在，DOM没为生成，$el未存在
beforeMount 挂载前 Vue实例的$el和data都已经初始化完成，挂在前为虚拟的dom节点，模板还没有渲染到HTML页面上去，data.message未替换。
mounted 挂载后 Vue实例挂载完成，模板已经渲染到HTML中，dota.message成功渲染。这个阶段可以做一些ajax请求操作，mounted在周期中只会执行一次。
beforeUpdate 更新前 当dota更新之前，会触发beforeUpdate方法。
updated 更新后 当data更新完成后，触发updated方法。
beforeDestory 销毁前 Vue组件实例销毁前执行的方法。
destroyed 销毁后 组件销毁后，调用的方法，对data的改变不会再触发函数周，vue实例已经解除事件监听和dom绑定，但dom结构依然存在。

示例 
</>复制代码 
  1. import Axios from "axios"       // 这是一个轻量级的ajax库，import是es6模块导入的语法。
  2. export default {                // 这是一个vue的模块，后面讲奥。
  3.   name: "app",
  4.   components: {
  5.   },
  6.   data: function () {
  7.     return {
  8.       list: []
  9.     }
  10.   },
  11.   mounted: function () {          // 挂在完成后的生命周期钩子注册。
  12.     this.$nextTick(function () {  // 等待下一次更新完成后执行业务处理代码。
  13.       Axios.get("/api/menulist", {// 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新
  14.         params: {
  15.         }
  16.       }).then(function (res) {
  17.         this.list = res.data
  18.       }.bind(this))
  19.     })
  20.   }
  21. }
Vue实例的全局配置

silent

类型：boolean

默认值：false

用法：

</>复制代码 
  1. Vue.config.silent = true
  2. // 取消Vue所有的日志与警告

optionMergeStrategies

类型： { [key: string]: Function }

默认值： {}

用法：

</>复制代码 
  1. Vue.config.optionMergeStrategies._my_option=function( parent,child,vm){
  2.     return child+1
  3. }
  4. const Profile = Vue.extend({
  5.     _my_option: 1
  6. })
  7. Profile.options._my_option = 2
  8. // 自定义合并策略选项
  9. // 合并策略选项分别接受第一个参数作为父实例，第二个参数为子实例，Vue实例上下文被作为第三个参数传入。

devtools

类型：boolean

默认值：true

用法：

</>复制代码 
  1. // 务必在加载 Vue 之后，立即同步设置以下内容Vue.config.devtools = true
  2. // 配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。

Vue的全局API

Vue.nextTick

</>复制代码 
  1. 语法：Vue.nextTick([callback, context])
</>复制代码 
  1. {Function}[callback]
  2. {Object}[callback]

用法：

在下次DOM更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM

</>复制代码 
  1. // 修改数据
  2. vm.msg = "msg"
  3. // DOM未更新
  4. Vue.nexTick(function() {
  5.     // DOM更新了
  6.     // 执行操作
  7. })

Vue.set

</>复制代码 
  1. 语法：Vue.set( object, key, value)

参数:

</>复制代码 
  1. {Object} object
  2. {String} key
  3. {any} value

用法：

设置对象数据。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新，这个方法主要用于避开Vue不能检测属性被添加的限制。注意对象不能使Vue示例，或者Vue实例的根数据对象。

Vue.complie

</>复制代码 
  1. 语法：Vue.compile(template)

参数：

</>复制代码 
  1. {string} template

用法：

</>复制代码 
  1. // 在render函数中编译模板字符串
  2. // 在独立构建时有效
  3. var res = Vue.Compile(`
    {{ msg }}
    `)
  4. new Vuew({
  5.     data:{
  6.         msg:"hello"
  7.     },
  8.     render:res.render,
  9.     staticRenderFns:res.staticRenderFns
  10. })

更多的API和用法请看-> API-Vue

GPU云服务器 云服务器 线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104408.html

相关文章

  • Maven 生命周期

    摘要：生命周期生命周期是为了对所有的构建过程进行抽象和统一，开发了一套高度完善的易扩展的生命周期。生命周期本身不做任何实际的工作，实际的任务都交给插件来完成。生命周期步骤在中，有三套相互独立的生命周期，分别是和。 Maven 生命周期 Maven 生命周期是为了对所有的构建过程进行抽象和统一，开发了一套高度完善的、易扩展的生命周期。这个生命周期包含了项目的清理、初始化、编译、测试、打包、集成...

    CoreDump 评论0 收藏0

  • vue生命周期

    摘要：接触两个月了，今天说一说里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是里边可以操作属性，你记住就完事了，于是乎。。。 接触Vue两个月了，今天说一说vue里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是mounted里边可以操作属性，你记住mounted就完事了，于是乎。。。 数据...

    godlong_X 评论0 收藏0

  • 用生命周期感知组件处理生命周期

    摘要：生命周期感知组件会执行操作来响应另一个组件如和的生命周期状态的改变。使用两个主要枚举来追踪其关联组件的生命周期状态从和类中分发的生命周期事件，这些事件映射到和的回调事件中。 生命周期感知组件会执行操作来响应另一个组件（如 activity 和 fragment）的生命周期状态的改变。这些组件可以帮助你生成组织性更好、更轻量级、更易于维护的代码。 一个常见的模式是在 activity 和...

    acrazing 评论0 收藏0

发表评论

登陆后可评论

0条评论

OpenDigg

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<