【博学谷学习记录】超强总结,用心分享|Vue基础笔记(二) - 草稿

一、Vue实例的生命周期

  Vue实例对象充当ViewMdoel角色来进行数据的双向绑定,既然是一个实例,那么他就存在一个完整的生命周期,从Vue实例对象被创建开始,到整个实例完成任务被销毁期间,经历了如下几个过程:


创建vue实例。

初始化实例数据。

运行。

销毁。

在以上节点中,为了控制各个节点的状态和要执行的任务,vue为我们提供了如下几个事件,分别在这些阶段合适的时机被触发,我们只需要在这些事件中注册我们自己的逻辑,就能完成想要的任务。这些事件又称为生命周期函数或生命周期钩子等,现列举如下:


beforeCreate:实例刚刚在内存中被创建,但是还没有初始化data和method属性时被触发。

created:实例已经创建且data和method属性被初始化,但是还未开始进行模板编译时被触发。

beforeMount:已完成模板编译(指在内存中创建DOM树),但是还未挂载到页面中时被触发。

mounted:编译的模板已被挂载到指定的DOM容器中时被触发。

beforeUpdate:data属性中的值即将被更新到DOM界面时触发(即重新渲染数据前)。

updated:data属性中的值被更新到DOM界面后触发(即重新渲染数据后)。

beforeDestroy:实例被将要被销毁之前触发。

destroyed:实例被销毁之后触发,执行该事件后,实例相关的所有数据和子实例也被销毁。

二、Vue实例的属性

  除了事件属性外,还存在其他属性,我们可以在创建实例的时候以选项的形式传入属性值,来实现想要的行为。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象 (一些根实例特有的选项除外)。其选项对象如下:


data属性:Object | Function类型,Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter,从而让 data 的 property 能够响应数据变化。data 应该只能是数据 ,不推荐是拥有状态行为的对象。data 必须声明为返回一个初始数据对象的函数(防止共享引用),因为组件可能被用来创建多个实

实例。

props属性:Array<string> | Object类型,props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

propsData属性:{ [key: string]: any }类型,只用于 new 创建的实例中。创建实例时传递 props。主要作用是方便测试。

computed属性:{ [key: string]: Function | { get: Function, set: Function } }类型,称为计算属性,他的对象为一个函数,用于返回一个计算后得到的结果,这个结果可以像data数据一样被渲染和使用。计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定Vue 实例。

methods属性:{ [key: string]: Function }类型,methods 属性将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。也就是说,可以在这个属性下创建我们的自定义方法,然后在其他地方调用。

watch属性:{ [key: string]: string | Function | Object | Array }类型,称为监听器,键是需要监听的对象,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容