Vue教程学习一

vue.js :是一套用于构建用户界面的渐进式框架。

vue.js 开发的四个优点:

1.声明式数据
2.响应式数据绑定
3.组件化开发
4.虚拟DOM

1.声明的变量值可直接在html中用 {{}} 引用
2.响应式数据绑定是通过v-model 指令来实时改变数据值
比如:申明一个变量值,在input中用v-model绑定,当变量值改变时input中的框也会随之改变
3.组件化开发有利于开发人员开发,把功能模块化,不用多个模块结合在一起开发。
在单页面应用中:通过把多个模块组件化,在父级应用界面中写好每个模块的位置(通过组件和配置路由)
4.关于虚拟DOM:是与计算DOM的各种操作,把最后一次的结果给渲染出来 (减少DOM的渲染次数)
浏览器渲染界面速度慢的原因:浏览器自身处理DOM 的性能瓶颈,当使用jQuery和原生的js DOM操作函数的时候,浏览器会频繁的渲染新的DOM树,又因为浏览器的DOM处理瓶颈问题,所以就更慢了!

知道了vue.js是啥和开发优点后,我们就可以开始进入vue的学习了!(vue的安装,介绍,vue实例,模板语法 就不多说了-->可以看vue.js教程前几节  https://cn.vuejs.org/v2/guide/syntax.html)

一:Vue实例生命周期钩子

关于Vue 的生命周期的说法:

beforeCreate(即将创建):此阶段是实例初始化阶段,此时的data(数据)和el(DOM)都还没有生成(都为undefined!),
因此在 beforeCreate 钩子函数中不能使用data的数据,也无法获取到 DOM 的节点。


created(创建完毕):此阶段是Vue的实例已经创建完毕,此时能获取到data中的数据值,但是DOM的属性值还是不存在,因为在源码中,初始化方法执行完
created 函数之后编译器还没有将template 解析成 render方法,DOM也就没有相关的属性值!


beforemount(即将挂载):此阶段是将vue的实例挂载到Dom上,Vue通过一个el 参数来确定挂载的DOM节点,当我们根据vue构建函数new一个新的Vue时,只要设定
el元素,那么这个新的Vue的操作将只对这个 el及其子元素有效!


mounted(渲染完毕):此阶段是vue实例 和 Dom的元素都已被获取和渲染。是使用次数最多的钩子函数,一般放异步请求!


beforeUpdate(即将更新渲染):Vue遵循数据驱动Dom的原则,当修改vue实例的data时,vue会自动帮我们更新视图。beforeUpdate 在数据更新后没有立即改变
beforeUpdate 函数中的值(在beforeUpdate 函数中测试数据是否改变了!),但是Dom中的数据已经更新了(Vue的双向绑定)。


updated(更新渲染后):Dom 和 updated 函数中的测试打印的值相同。(得到目的:就是data中改变数据,dom中 和 updated 函数中确实是更新了新数据值!)


beforeDestroy(销毁之前):当vue已经成功通过数据驱动dom 更新后,我们不再需要这个Vue在操作dom 时,就需要销毁vue (也就是清除Vue实例和DOM的关联),
调用destroy() 可以销毁当前组件,销毁之前,就会触发beforedestroy 钩子函数。

destroyed(销毁之后):销毁之后,会触发destroyed钩子函数,在调用destroy()之前,改变Data中的数据,DOM也会随之改变,beforeDestroy 中测试读取的
值也和更新后的值相同,但是在destroy()调用之后,当改变了Data中的数据,Dom 中的值 ,和 destroyed 函数中的值不会改变。销毁之后,解除了Vue也Dom的绑定关系!
Vue的数据 和 Dom不在改变,说明成功销毁了这个实例。

 二:Vue的生命周期图

 

此博客仅为自己学习记录所用,如有不对之处,请大佬们指出批评,感谢!

猜你喜欢

转载自www.cnblogs.com/ruiannan/p/10026975.html
今日推荐