Vue:深入实例:生命周期钩子 / 内置属性方法 / 响应式原理
在进一步学习计算属性之前,让我们先深入的了解一些Vue的实例。
提示:原理/底层,理解难度大,面试易涉及……
在Vue实例化时,我们传入了一个选项对象,其属性除了我们已经学过的el和data,还可以有:
实例生命周期钩子
比如:created、 mounted、updated、destroyed……
var vm = new Vue({
el: "#yz-hello",
data: {
students: ['夏康平', '陈国栋', '韩佳宝']
},
created: function(){
console.log('I was created');
},
mounted: function () {
console.log('I was mounted');
},
updated: function () {
console.log('I was updated');
}
})这些都是函数,内容由开发人员自定义,他们会在Vue实例初始化的某些个特定阶段被执行。他们又被称之为钩子(hook)函数。
演示:
交换钩子函数的位置,观察他们的执行顺序是否变化
更改vm.student,updated被触发
生命周期
我们把一个对象从生成(new)到被销毁(destroy)的过程,称之为生命周期。
学习Vue实例的生命周期,实际上就是学习:一个Vue对象,从创建到被销毁,它究竟干了些什么。在现目前阶段,我们稍微简化一下:
初始化:init
实例化一个Vue的JavaScript对象,在JavaScript语言内部为接下来的DOM渲染做准备。
该阶段以调用钩子函数:created结束。
演示:在created中设置断点,查看
未被渲染的HTML页面
控制台vm.students
挂载:mount
通过el获取模板,根据模板和vue data生成DOM元素,然后将其挂载到原HTML页面(渲染)。
该阶段以调用钩子函数:mounted结束。
演示:在mounted中设置断点,查看:HTML页面被渲染
@想一想@:使用Ajax获取数据的代码,放在created还是mounted里面好?
更新:update
当vue监控(watch)到vue data发生变动,需要重新(响应式)渲染,渲染完成后会触发钩子函数:updated。
演示:updated不会再次created或mounted
销毁:destroyed
顾名思义,如标题。
但问题是:什么情况下Vue实例才会被销毁呢?
@试一试@:
document.getElementById('yz-hello').remove()
或者,重新加载页面?……
要演示vm的实例的销毁,我们需要:
vm.$destroy()
PS:更多内容参考vue文档完整图
实例属性和方法
Vue为我们提供了这种内置的,属于Vue实例的属性和方法。
以$开头,主要是为了和开发人员自定义的:
data中的属性(复习)
methods中的方法:
data: {
students: ['夏康平', '陈国栋', '韩佳宝']
},
methods: { //和data、钩子函数并列
greet: function () {
return "Hello, 源栈";
}
},methods中定义的方法可以
直接由vm实例调用
vm.greet()
在template中使用
<h1>{{greet()}}</h1>
相区别。
F12控制台演示:
vm.$el
vm.$options.el
vm.$options.data()
vm.$data
响应式原理
复习:效果
Object.defineProperty()
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter
控制台演示:
var fg = {} //空对象
Object.defineProperty(fg, 'name', { value: '飞哥' })
还可以传入一个setter 函数,当属性值被修改时,会调用此函数。
Object.defineProperty(fg, 'name', {
set: function (value) {
console.log('set is called,and value is: ' + value);
}
});
这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。
简单的理解:有了getter/setter,才能在赋值的时候添加逻辑(又被称之为:数据劫持)。
@想一想@:为什么不直接用obj.Property=XXX呢?
阅读源代码
code is everything。
加载时渲染
在Vue.js上设置断点,5901行:
function createElm ( 该方法会在渲染生成HTML元素时使用,查看调用堆栈:
function Vue (options) //Vue实例构造函数
Vue.prototype.$mount = function ( //将生成的element挂载(mount)到DOM树
var Watcher = function Watcher ( //Watcher类
Vue.prototype._update = function (vnode, hydrating) { //更新节点
响应式渲染
断点设置在1053行:
function defineReactive$$1 ( //1014行
var dep = new Dep();
Object.defineProperty(obj, key, {
set: function reactiveSetter (newVal) {
dep.notify();
然后更新vue data。
响应式自定义
为了便于演示,我们把vue data独立出来:
var objGreet = {
greet: "Hello, 源栈"
};
var vm = new Vue({
el: "#yz-hello",
data: objGreet,
freeze()
在某些特殊情况下,我们可能想禁用掉Vue的响应式功能。
这时候我们可以使用Object.freeze()方法“冻结”住vue data:
//Object.freeze(objGreet);
演示:略
set()
基于上述知识,我们知道,Vue实例会在初始化时遍历vue data属性,然后予以监控(watch)。
因为Vue只会被实例化一次,所以,之后添加到vue data的属性,Vue是不
更多相关文章
- 【DB笔试面试253】在Oracle中,有哪些角色可以管理ASM实例,它们之间
- 7个设计模式在Spring中的应用
- 【DB笔试面试737】在Oracle中,将单实例备份集恢复为rac数据库的步
- 在Oracle公有云中2小时供应EBS环境
- 云关系型数据库(Relational Database Service,RDS)
- 服务器负载均衡(Server Load Balance,SLB)
- nginx配置实例解释
- Oracle 12c新特性--LREG进程专门负责注册实例服务
- spring-boot-2.0.3启动源码篇四 - run方法(三)之createApplicati