面试官常问——vue篇

quietin 发布于2019-08-02 14:19 / 1871人阅读

摘要：如果要相应状态改变，通常最好使用计算属性或取而代之。那解决问题的思路便是在改变的情况下，保证页面的不刷新。后面值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。

1.vue生命周期
2.vue 双向绑定原理
3.vue router原理
4.vue router动态路由

1.vue 生命周期钩子

注意:所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如:created:() => this.fetchTodos() )。这是因为箭头函数绑定了父级上下文，因此this与你期待的vue实例不同,this.fetchTodos的行为未定义。

beforeCreate 
 在实例初始化之后,数据观测(data observer)和 event/watcher事件配置之前被调用。

created  
在实例创建完成后被立即调用.在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

beforeMount 
在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。该钩子在服务器渲染期间不被调用。

mounted 
el被新创建的 vm.$el 替换,病挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当 mounted
被调用时 vm.$el 也在文档内。 注意： mounted 不会承诺所有子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用
vm.$nextTick 替换调 mounted:(该钩子在服务器端渲染期间不被调用)

    mounted:function() {
        this.$nextTick(function () {
        //code that will run only after the 
        //entire view has been rendered
   }) }

beforeUpdate  
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的DOM,比如
手动移除已经添加的事件监听器。 
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或watcher取而代之。

注意 updated 不会承诺所有的子组件都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用vm.$nextTick 替换调
mounted:(该钩子在服务器端渲染期间不被调用)

mounted:function() {
    this.$nextTick(function () {
    //code that will run only after the 
    //entire view has been rendered
}) }

activated 
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。 
构建组件 keep-alive 
动态组件 keep-alive

deactivated 
keep-alive组件停用时调用。 该钩子在服务器端渲染期间不被调用
构建组件 keep-alive 
动态组件 keep-alive

beforeDestory 
实例销毁之前调用。在这一步，实例仍然完全可用。 
该钩子在服务器端渲染期间不被调用。

destoryed 
vue实例销毁后调用。调用后，vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。

2.vue 双向绑定原理

Object.defineProperty是ES5新增的一个API,其作用是给对象的属性增加更多的控制
Object.defineProperty(obj,prop,descriptor)
参数：

 obj: 需要定义属性的对象(目标对象)
 prop:需要定义或修改的属性名(对象上的属性或方法)
 对于setter和getter,我的理解是它们是一对钩子hook函数,当你对一个对象的某个属性赋值时,则会自动调用相应的setter函数;
 而当获取属性时,则调用getter函数。这也是实现双向数据绑定的关键。




    
    vue 双向绑定

3.vue router原理

路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样

http://www.xxx.com/login

大致流程可以看成这样：

1.浏览器发出请求
2.服务器监听到80端口（或443）有请求过来，并解析url路径
3.根据服务器路由配置，返回相应的信息（可以是html字串,也可以是json数据,图片等）
4.浏览器根据数据包`Content-Type`来决定如何解析数据

简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。

前端路由
1.hash模式
随着ajax的流行,异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是SPA——单页应用。单页应用不仅仅在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。
类似于服务器路由，前端路由实现起来其实也很简单，就是匹配不同的url路径,进行解析,然后动态的渲染出区域html内容。但是这样存在一个问题，就是URL每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变URL的情况下，保证页面的不刷新。在2014年之前，大家是通过hash来实现路由，URL hash 就是类似于：

http://www.xxx.com/login

这种#。后面hash值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次hash值的变化，还会触发
hashchange这个事件,通过这个事件我们就可以知道hash值发生了哪些变化。然后我们便可以监听hashchang来实现更新页面部分内容的操作:

function matchAndUpdate () {
    // todo 匹配 hash 做 DOM 更新
}
window.addEventListener("hashchange",matchAndUpdate)

2.history 模式
14年后，因为HTML5标准发布。多了两个API,pushState 和 replaceState,通过这两个API 可以改变url地址且不会发送请求。同时还有 popState 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

function matchAndUpdate () {
    // todo 匹配 hash 做 DOM 更新
}
window.addEventListener("popstate",matchAndUpdate)

vue router实现
我们在使用vue-router的时候,主要有以下几步:


    
    



// 1. 安装 插件
Vue.use(VueRouter);

// 2. 创建router对象
const router = new VueRouter({
    routes // 路由列表 eg: [{ path: "/foo", component: Foo }]
});

// 3. 挂载router
const app = new Vue({
    router
}).$mount("#app");

vue-router 实现 -- install
理解Object.defineProperty的作用

云服务器 GPU云服务器上一篇属性篇速度篇提高篇

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

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

面试官常问——vue篇

摘要：如果要相应状态改变，通常最好使用计算属性或取而代之。那解决问题的思路便是在改变的情况下，保证页面的不刷新。后面值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。 1.vue生命周期2.vue 双向绑定原理3.vue router原理4.vue router动态路由 1.vue 生命周期钩子 showImg(https://segmentfault.com/...

BlackMass 2019-08-30 15:55 评论0 收藏0
面试官常问——vue篇

摘要：如果要相应状态改变，通常最好使用计算属性或取而代之。那解决问题的思路便是在改变的情况下，保证页面的不刷新。后面值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。 1.vue生命周期2.vue 双向绑定原理3.vue router原理4.vue router动态路由 1.vue 生命周期钩子 showImg(https://segmentfault.com/...

xingqiba 2019-08-23 15:25 评论0 收藏0
2019-我的前端面试题

摘要：先说下我面试情况，我一共面试了家公司。篇在我面试的众多公司里，只有同城的面问到相关问题，其他公司压根没问。我自己回答的是自己开发组件面临的问题。完全不用担心对方到时候打电话核对的问题。 2019的5月9号，离发工资还有1天的时候，我的领导亲切把我叫到办公室跟我说：阿郭，我们公司要倒闭了，钱是没有的啦，为了不耽误你，你赶紧出去找工作吧。听到这话，我虎躯一震，这已经是第2个月没工资了。公...

iKcamp 2019-08-23 17:52 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

spacewander 2019-08-21 17:42 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

xfee 2019-08-15 12:33 评论0 收藏0