vue.js简介和生命周期

wizChen 发布于2019-08-26 12:02 / 1281人阅读

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

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

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

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

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

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的值，视图也不会在更新了，说明实例已经被销毁了。

GPU云服务器云服务器生命周期软件生命周期生命周期理论页面生命周期

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

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

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

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

KavenFan 2019-08-23 12:16 评论0 收藏0
详解 mpvue 小程序框架及和原生的差异

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

IamDLY 2019-08-26 13:52 评论0 收藏0
Vue.js基础教程

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

XboxYan 2019-08-23 15:24 评论0 收藏0
vue 源码学习（一）目录结构和构建过程简介

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

lavnFan 2019-08-23 14:36 评论0 收藏0
Vue 实例中的生命周期钩子详解

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

gityuan 2019-08-20 15:16 评论0 收藏0