资讯专栏INFORMATION COLUMN

vue.js简介和生命周期

wizChen / 1295人阅读

摘要:五当修改实例的时,就会自动帮我们更新渲染视图,在这个过程中,提供的钩子函数,在检测我们要修改数据的时候,更新渲染视图之前就会触发钩子函数。

本文详情:http://www.zymseo.com/vue/
1、Vue.js框架是什么,为什么学习它?
世界上最好的MVVM框架:

MVVM可以拆分成:View --- ViewModel --- Model三部分 


中间的监控着负责监控两侧的数据,相对应的实现数据互通,不需要手动的去操作DOM.
Vue.js的两大核心:数据驱动和组件化

2.最简单的数据双向绑定

{{name}}

watch是一个json,每一个json的键名就是监测的data中的数据,键值是一个function,第一个参数是新数据,第二个参数是旧数据。

4.VueJs实例的生命周期

一.beforeCreate
此阶段为实例初始化,此时的数据观察个时间配置都没准备好,实例中的data和el还是undefined

二、created
beforeCreate之后紧接着的钩子韩式就是created,此时我们可以读取到data的值,但是DOM还没有生成,多以el属性还不存在,$data为一个object对象,而$el的值为underfined

三、beforeMount
此阶段即将挂载,DOM生成,$el成功获取关联到节点,但是{{name}}还没有成功的被渲染出来达成我们data里面的数据

四、mounted
mounted也就是挂载完毕阶段,此时数据会被成功的渲染出来,我们编写这个钩子,{{name}}被成功的渲染出来。

五、beforeUpdate
当修改vue实例的data时,vue就会自动帮我们更新渲染视图,在这个过程中,vue提供beforeUpdata的钩子函数,在检测我们要修改数据的时候,更新渲染视图之前就会触发钩子函数beforeUpdate。
此时我们 即将更新 data里面的数据,但是并未更新成功

六、updated
此时 我们data的数据已经更新完毕

七、beforeDestroy
调用$destriy()方法可以销毁当前组件,在销毁前,会触发beforeDestroy钩子

八、destroyed

销毁之前,修改name的值,可以成功修改视图显示,一旦调用实例$destroy()方法之后,实例与视图的关系解绑,在修改name的值,视图也不会在更新了,说明实例已经被销毁了。

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

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

相关文章

  • 再谈Vue生命周期----结合Vue源码

    摘要:中的生命周期函数也可以称之为生命周期钩子函数,在特定的时期,调用特定的函数。吊起钩子函数调起钩子函数问题为什么是一个数组卸载组件,会触发一个这行代码之后发生了什么背后实现原理。 简介 关于Vue的生命周期函数,目前网上有许多介绍文章,但也都只是分析了表象。这篇文档,将结合Vue源码分析,为什么会有这样的表象。 Vue中的生命周期函数也可以称之为生命周期钩子(hook)函数,在特定的时期...

    KavenFan 评论0 收藏0
  • 详解 mpvue 小程序框架 及原生的差异

    摘要:在这一步,实例已完成以下的配置数据观测,属性和方法的运算,事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低 简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点3.可完全组件化开发 特点 1.组件化开发2.完成的Vue.js开发体验(前提是熟悉Vue)3.可使用Vuex管理状态4.Webpack构建项目5.最终H5...

    IamDLY 评论0 收藏0
  • Vue.js基础教程

    摘要:自定义名称縮放控制器可以使用中的动画设计更为华丽的效果。在和中必须使用,不然它们会同时生效,动画也会瞬间完成。先在标签内加入,接着类似自定义动画可以给命名。 文章链接:Vue.js基础教程 开发工具准备: 根据个人喜欢选择IDE,我使用的是WebStorm,推荐使用Atom和VSCode; 安装git base和node.js; 安装vue-cli,命令npm i -g @vue/...

    XboxYan 评论0 收藏0
  • vue 源码学习(一) 目录结构构建过程简介

    摘要:框架使用了作为类型检查,来保证项目的可读性和维护性。的主目录下有的配置文件,还有目录,指定了各种自定义类型。表示构建出来的文件遵循规范。 Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型。 在学习源码前可以先看下Flow的语法 官方文档 目录结构 vue....

    lavnFan 评论0 收藏0
  • Vue 实例中的生命周期钩子详解

    摘要:实例在文档中经常会使用这个变量名表示实例,在实例化时,需要传入一个选项对象,它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程,就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程...

    gityuan 评论0 收藏0

发表评论

0条评论

wizChen

|高级讲师

TA的文章

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