生命周期:Vue实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期,各个阶段有相对应的事件钩子。
beforeCreate(创建前),在数据观测和初始化事件还未开始
created(创建后),完成数据观测,属性和方法的运算,初始化事件, $el 属性还没有显示出来
beforeMount(载入前),在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted(载入后),在 el 被新创建的 vm$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换 el 属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前),在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
updated(更新后),在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的 *** 作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前),在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后),在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
注意:
created 阶段的ajax请求与 mounted 请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态。
mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm$nextTick 。
初始化组件时,仅执行了 beforeCreate/Created/beforeMount/mounted 四个钩子函数
当改变 data 中定义的变量(响应式变量)时,会执行 beforeUpdate/updated 钩子函数
当切换组件(当前组件未缓存)时,会执行 beforeDestory/destroyed 钩子函数
初始化和销毁时的生命钩子函数均只会执行一次, beforeUpdate/updated 可多次执行
仅当子组件完成挂载后,父组件才会挂载
当子组件完成挂载后,父组件会主动执行一次beforeUpdate/updated钩子函数(仅首次)
父子组件在data变化中是分别监控的,但是在更新props中的数据是关联的
销毁父组件时,先将子组件销毁后才会销毁父组件
组件的初始化(mounted之前)分开进行,挂载是从上到下依次进行
当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的
mixin中的生命周期与引入该组件的生命周期是仅仅关联的,且mixin的生命周期优先执行
1、什么是vue生命周期?
答: Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。
2、vue生命周期的作用是什么?
答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段?
答:它可以总共分为8个阶段:创建前/后、载入前/后、更新前/后、销毁前/销毁后。
5、DOM 渲染在哪个周期中就已经完成?
答:DOM 渲染在 mounted 中就已经完成了。
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 ObjectdefineProperty() 来劫持各个属性的 setter,getter ,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 ObjectdefineProperty() 将它们转为 getter/setter 。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口,整合 Observer ,Compile和 Watcher 三者,通过 Observer 来监听自己的 model 的数据变化,通过 Compile 来解析编译模板指令(vue中是用来解析 {{}}),最终利用 watcher 搭起observer和 Compile 之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化( input )—>数据 model 变更双向绑定效果。
js实现简单的双向绑定:
1、父组件与子组件传值
父组件传给子组件:子组件通过 props 方法接受数据;
子组件传给父组件: $emit 方法传递参数
2、非父子组件间的数据传递,兄弟组件传值 eventBus ,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用 windowlocationhash 读取。特点:hash虽然在URL中,但不被包括在>
1、当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件。以上三部分内容构成了 Vue 的整个执行过程。
2、Vue 实现了一个 观察者-消费者(订阅者) 模式来实现数据驱动视图。通过设定对象属性的 setter/getter 方法来监听数据的变化,而每个属性的 setter 方法就是一个观察者, 当属性变化将会向订阅者发送消息,从而驱动视图更新。
3、Vue 的订阅者 watcher 实现在 /src/watchrjs 。构建一个 watcher 最重要的是 expOrFn 和 cb 两个参数,cb 是订阅者收到消息后需要执行的回调,一般来说这个回调都是视图指令的更新方法,从而达到视图的更新,但是这也不是必须的,订阅回调也可以是一个和任何无关的纯函数。一个订阅者最重要的是要知道自己订阅了什么,watcher 分析 expOrFn 的 getter 方法,从而间接获得订阅的对象属性。
4、Vue 双向数据绑定实现
数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 ObjectdefineProperty() 定义的数据 set、get 函数中。Vue 中对于的函数为 defineReactive,在精简版实现中,我只保留了一些基本特性:
function defineReactive(obj, key, value) {
var dep = new Dep()
ObjectdefineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
if (Deptarget) {
depdepend()
}
return value
},
set: function reactiveSetter(newVal) {
if (value === newVal) {
return
} else {
value = newVal
depnotify()
}
}
})
}
在对数据进行读取时,如果当前有 Watcher(对数据的观察者吧,watcher 会负责将获取的新数据发送给视图),那将该 Watcher 绑定到当前的数据上(depdepend(),dep 关联当前数据和所有的 watcher 的依赖关系),是一个检查并记录依赖的过程。而在对数据进行赋值时,如果数据发生改变,则通知所有的 watcher(借助 depnotify())。这样,即便是我们手动改变了数据,框架也能够自动将数据同步到视图。
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调
Vue中能够被网页直接使用的最小单位就是组件,我们经常写的:
var vm = new Vue({
el: '#app',
}
是根组件,el指定了它挂载到哪里(id为app的元素包裹的部分)
也可以跟普通组件一样这样写:
var vm = new Vue({
}
vm$mount("#app");
也可以跟普通组件一样在里面定义template属性指定模板,比如
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
methods:{
}
})
根组件里面可使用子组件,并起一个名字:
var vm = new Vue({
components: {
'my-components': child
}
}
vm$mount("#app");
这样就可以在id为app的div中使用名字my-components来引用child组件
div id="app">
<my-components :msg="msg1" v-if="show"></my-components>
</div>
beforeCreate:在实例初始化之后,这时候el 和 data 并未初始化
created:实完成了 data 数据的初始化,但Vue 实例使用的根 DOM 元素el还未初始化
beforeMount:data和el均已经初始化,el并没有渲染进数据,el的值为“虚拟”的元素节点
mounted:此时el已经渲染完成并挂载到实例上
使用keeplive缓存组件视图
有时候我们显示页面的时候不需要重新加载,使用上次的缓存页面即可,比如单页面应用使用路由进行页面切换时,再切回来,很多时候并不需要重新加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=">
在使用vue和小程序时,会发现一些生命周期钩子函数的异同之处:
首先看下图
这是8个vue生命周期钩子函数(为了方便阅读,其调用时间与方法均注释在函数中)
以下三种生命周期钩子函数是针对 keep-live 和 识别子元素错误时调用
同上,其调用均注释在函数中,方便理解;
这是小程序常用页面生命周期(运用注释在对应函数中)
以上为小程序其他页面函数
以上我们可以看到两种页面生命周期函数的异同点:
vue小程序中都具备页面创建,页面渲染,和页面销毁时候的调用钩子,但是在小程序中,结合其特别的存在,前后台执行、滑动滚动执行这一类钩子函数都为开发者配备的比较齐全;
另外还需要注意的是,在vue中的数据改变使用thisdata直接进行更改即可,但是在小程序中,数据的改变需要调用thissetData() 进行改变(见上图)!
END
以上就是关于Vue 面试中常问知识点整理全部的内容,包括:Vue 面试中常问知识点整理、vue是怎么将数据绑定到组件的原理、vue执行方法后如何不让钩子函数加载等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)