1.谈谈你对vue的认识

vue概念:是一个构建用户界面的渐进式框架,典型的MVVM框架。

注:模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新。这种设计让状态管理变得非常简单而直观。

vue作用:响应式的数据绑定和组合的视图组件

vue原理:数据双向绑定     模板编译和虚拟dom

Vue实现数据双向绑定的效果,需要三大模块:

  1. Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
  2. Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
  3. Watcher:作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。
  • Observer的核心是通过Obeject.defineProperty()来监听数据的变动,这个函数内部可以定义settergetter,每当数据发生变化,就会触发setter。这时候Observer就要通知订阅者,订阅者就是Watcher
  • Watcher订阅者作为ObserverCompile之间通信的桥梁,主要做的事情是:

  1. 在自身实例化时往属性订阅器(dep)里面添加自己
  2. 自身必须有一个update()方法
  3. 待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调
  • Compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。

vue生命周期:vue 实例从创建到销毁的过程,就是Vue 的生命周期,即开始创建、初始化数据、编译模板、挂载Dom→渲染、                            更新→渲染、卸载等一系列过程。总共分为8个阶段:

  • beforeCreate----创建前 组件实例更被创建,组件属性计算之前,数据对象data都为undefined,未初始化。
  • created----创建后 组件实例创建完成,属性已经绑定,数据对象data已存在,但dom未生成,$el未存在
  • beforeMount---挂载前 vue实例的$el和data都已初始化,挂载之前为虚拟的dom节点,data.message未替换
  • mounted-----挂载后 vue实例挂载完成,data.message成功渲染。
  • beforeUpdate----更新前 当data变化时,会触发beforeUpdate方法
  • updated----更新后 当data变化时,会触发updated方法
  • beforeDestory---销毁前 组件销毁之前调用
  • destoryed---销毁后 组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在 。

vue的优点:低耦合、可重用、性独立开发、可测试 。

vue和其他框架的对比:

前期借鉴了angular和react的一些优秀思想,比如虚拟dom、指令操作等

more

2.MVVM框架是什么?他和其他框架(jQuery)有什么区别,使用场景

MVVM框架:一个model+view+view-model的框架,model 是数据模型,view是视图,view-model连接数据和视图。

视图的输入框绑定了v-model, 用户输入后会改变data;Model改变也会同步视图更新相关的依赖, 双向绑定就是vm起了作用。

区别:vue数据驱动,通过数据来显示视图层而不是节点操作。

使用场景:数据操作比较多的场景更加方便快捷。

3.MVC框架和MVVM框架的区别

mvc和mvvm都是一种设计思想,主要是mvc中Controller演变成mvvm中的viewModel。

mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验,以及当 Model 频繁发生变化,开发者需要主动更新到View,这些问题。

4.vuex是什么,它的原理

vuex:状态管理器,实现组件间的数据共享。

原理:一个应用可以看作是由View, Actions,State三部分组成,数据的流动也是从View => Actions => State =>View 以此达到数据的单向流动。但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的.Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心。

一个实例化的Vuex.Store由state, mutations和actions三个属性组成:

  • state中保存着共有数据
  • 改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的
  • 如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改。

注:官网https://vuex.vuejs.org/

5.列举vue的指令及用法

v-for:遍历循环

v-html、v-text:文本信息

v-model:实现双向绑定

v-if、v-show:  判断是否隐藏显示

v-bind:class  绑定属性

@click    绑定事件

6.vue里面的自定义指令是什么,其中的钩子函数有哪些?

vue.directive,可以写在组件内部,也可以写在外部作为全局的使用。

它的钩子有bind,inserted,update等

7.vue组件之间如何传值通信

父到子

  •  子组件在props中创建一个属性,用来接收父组件传过来的值;
  • 在父组件中注册子组件;       
  • 在子组件标签中添加子组件props中创建的属性;   
  • 把需要传给子组件的值赋给该属性 

子到父

  • 子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
  • 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。 

平行组件

  • $emit推送,$on接收

8.vue组件之间如何跳转

  路由配置好之后,可以使用下面三总方式进行组件的跳转展示

 ① 直接修改地址栏的路由路径

 ② 用router-link标签的to属性配置path即可

 ③通过js编程方式,在事件里面调用this.$router.push("/home")实现

9.vue中跨域问题如何解决

  ① 后台更改header:

  • header('Access-Control-Allow-Origin:*');    //允许所有来源访问   
  • header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式 

  ② 使用JQuery提供的jsonp :  发起ajax请求,设置dataType为jsonp

  ③ 使用http-proxy-middleware 代理解决

10.es6和es5对比,有何改变

     es6常用语法:

  •  变量声明const和let
  •  import导入模块、export导出模块
  •  class类 
  •  promise
  •  箭头函数
  •  模板字符串
Logo

前往低代码交流专区

更多推荐