实例中的生命周期钩子_vue

By admin in 澳门新葡亰娱乐官网 on 2019年12月15日

Vue 框架的入口正是 Vue 实例,其实便是框架中的 view model
,它包蕴页面中的业务管理逻辑、数据模型等,它的生命周期中有多少个事件钩子,让大家在调整总体Vue实例的进度时更便于形成好的逻辑。

Vue 实例

在文书档案中平常会接纳 vm 那些变量名表示 Vue 实例,在实例化 Vue
时,供给传入三个精选另一半,它能够蕴涵数据、挂载成分、生命周期钩子等选用。

Vue 实例化的选项

急需留意的是含 this 的函数许多不要接纳箭头函数,因为大家期待 this 指向
Vue 实例。

data

Vue 实例的数量都封存在 data 对象中,Vue 将会递归将 data 的质量调换为
getter/setter,进而让 data 的性质能够响应数据变动。

var data = { a: 1 }// 直接创建一个实例var vm = new Vuevm.a // -> 1vm.$data === data // -> true

这么数据就绑定在 HTML 中,Vue 框架监视 data 的数量变化,自动更新 HTML
内容。

computed

估测计算属性将被混入到 Vue 实例中。全数 getter 和 setter 的 this
上下文自动地绑定为 Vue

var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取,值只须为函数 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { return this.a + 1 }, set: function  { this.a = v - 1 } } }})vm.aPlus // -> 2vm.aPlus = 3vm.a // -> 2vm.aDouble // -> 4

此处能够简不难单setter,即便轻便了setter,那么值即然则普通函数,然而必需有再次回到值。

methods

methods 将被混入到 Vue 实例中。能够一向通过 VM
实例访谈这几个点子,也许在指令表达式中接纳。方法中的 this 自动绑定为 Vue
实例。

var vm = new Vue({ data: { a: 1 }, methods: { plus: function vm.plus()vm.a // 2

看上边那些事例,methods 和 computed
看起来能够做相通的政工,单纯看结果二种办法实乃同等的。不过,分歧的是精兵简政属性是依据它们的信任性实行缓存的。总括属性只有在它的相关正视爆发改动时才会重复求值。这就象征意气风发旦
message 还尚无发出变动,数次拜见 reversedMessage
总计属性会立马回到以前的简政放权结果,而无需再次实行函数。相比较来讲,只要爆发再一次渲染,method
调用总会实施该函数。

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split.join

watch

叁个目的,键是须求观看的表达式,值是对应回调函数。值也得以是方法名,只怕隐含选项的靶子。Vue实例将会在实例化时调用
$watch(卡塔尔,遍历 watch 对象的每三个性子。

var vm = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { // 监控a变量变化的时候,自动执行此函数 a: function  { console.log('new: %s, old: %s', val, oldVal) }, // 深度 watcher c: { handler: function  { /* ... */ }, deep: true } }})vm.a = 2 // -> new: 2, old: 1

Vue 实例的生命周期

Vue
实例有二个安然无恙的生命周期,也正是从最初创办、开始化数据、编写翻译模板、挂载Dom→渲染、更新→渲染、卸载等黄金时代层层进度,我们称那是
Vue 的生命周期。通俗说就是 Vue 实例从创设到销毁的长河,就是生命周期。

在Vue的所有的事生命周期中,它提供了部分生命周期钩子,给了大家试行自定义逻辑的机缘。

接下去大家用多少个例子来拜望生命周期钩子是怎么用的:

 {{ number }} 

我们对 input 和 p 绑定了data 对象的 number 数据,Vue 实例创设如下:

var app = new Vue({ el: '#app', data: { number: 1 }})

在实例中分别在各类生命周期钩子中 console.log
大家开采,第叁遍页面加载时接触了 beforeCreate, created, beforeMount,
mounted 那多少个钩,data 数据在 created 中可获得到。

再去 console.log(‘mounted: ‘, document.getElementsByTagName ,DOM 渲染在
mounted 中早就做到。

小编们再试着去校订 input
输入框中的剧情,能够看出输入框上方的数码同步发生转移,那正是数据绑定的职能,在更新数据时触发
beforeUpdate 和 updated 钩子,且在 beforeUpdate 触发时,数据已更新完毕。

而 destroy 仅在调用app.$destroy(卡塔尔(英语:State of Qatar);时接触,对 vue
实例进行销毁。销毁形成后,大家再重复退换 number 的值,vue
不再对此动作实行响应了。不过原先生成的dom成分还存在,能够这么了解,实行了destroy操作,后续就不再受vue调节了。

Vue.nextTick

在下一次 DOM
更新循环停止之后实践延迟回调。在校勘数据以往立即利用这么些法子,获取更新后的
DOM。

Vue.nextTick { // DOM 更新了})

法定还提供了生机勃勃种写法,vm.$nextTick,用 this 自动绑定到调用它的实例上

created => { this.number = 100 this.$nextTick => { console.log('nextTick', document.getElementsByTagName}

怎么着时候需求用的Vue.nextTick(卡塔尔

在 Vue 生命周期的 created(卡塔尔(英语:State of Qatar) 钩子函数进行的 DOM 操作必然要放在
Vue.nextTick(卡塔尔(英语:State of Qatar) 的回调函数中。原因是何许吗,原因是在 created(卡塔尔(英语:State of Qatar)钩子函数实践的时候 DOM 其实并未开展任何渲染,而当时進展 DOM
操作无异于徒劳,所以那边应当要将 DOM 操作的 js 代码放进 Vue.nextTick(卡塔尔(英语:State of Qatar)的回调函数中。与之相应的就是 mounted
钩子函数,因为该钩子函数实施时怀有的 DOM
挂载和渲染皆已经产生,那个时候在该钩子函数中张开任何DOM操作都不会有标题 。

在数据变动后要实践的某部操作,而那一个操作需求选用随多寡变动而更动的 DOM
构造的时候,这么些操作都应当放进 Vue.nextTick(卡塔尔 的回调函数中。

生命周期小结

生命周期钩子的片段应用方式:

beforecreate : 能够在此加个loading事件,在加载实例时触发 created :
初叶化实现时的事件写在这里边,如在此甘休loading事件,异步央求也适用在那地调用
mounted : 挂载元素,获取到DOM节点 updated :
如若对数据统后生可畏管理,在这里处写上相应函数 beforeDestroy :
能够做贰个承认结束事件的确认框 nextTick : 更新数据后随时操作dom

上述正是本文的全部内容,希望对我们的就学抱有扶持,也指望咱们多都赐教脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有