关于Vue面试会问到的问题

最新推荐文章于 2022-12-14 10:38:26 发布

转载最新推荐文章于 2022-12-14 10:38:26 发布 · 352 阅读

vue 专栏收录该内容

8 篇文章

订阅专栏

本文围绕Vue展开，介绍了MVVM架构，其通过ViewModel实现View和Model双向交互。阐述了Vue生命周期及钩子函数，说明了数据双向绑定基于Object.defineProperty。还涉及组件间参数传递、路由实现、过滤器定义等内容，最后分析了Vue的优缺点。

对于MVVM的理解

MVVM是Model-View-ViewModel的缩写

Model代表数据模型，也可以在Model中定义数据的修改和操作的业务逻辑。

View代表UI组件，它负责将数据模型转化成UI展现出来。

ViewModel监听模型数据（Model）的改变和控制视图行为，处理用户交互，

简单理解就是一个同步View 和Model的对象。连接Model和View的桥梁。

在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互的

这个交互是双向的，所以Model变化会同步到View ,View变化也会同步到Model.

ViewModel通过双向数据绑定把View和Model连接了起来，而View和Model之间的同步完全是自动，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM.复杂的数据状态的维护完全交给MVVM来统一管理。

Vue的生命周期

beforeCreate:（创建前）在数据观测和初始化事件还未开始前执行该钩子函数

created:(创建后) 完成数据观测，属性和方法的运算，初始化事件。$el属性还未显示出来

beforeMount：(载入前)在挂载前调用，相关的render函数首次被调用。实例已经完成以下配置：

编译模板，把data里的数据和模板生成html，但是还没有挂载到页面上去

mounted:(载入后)在el被新创建的vm.$el替换，并挂载到实例上去之后被调用。

实例已经完成以下配置：用编译好的html替换el指向的DOM对象。完成页面的渲染

此过程中进行ajax交互

beforeUpdate:(更新前) 在数据更新前调用，发生在虚拟DOM重新渲染

和打补丁之前。可以在这里进一步修改状态

updated:(更新后) 在数据更改后导致虚拟DOM重新渲染和打补丁后

调用。调用时DOM已经更新

beforeDestroy:(销毁前) 在实例销毁之前调用，实例仍然可用

destroyed: 在实例销毁后调用，销毁就是所有的事件监听被移除，子实例被销毁

什么是Vue生命周期

Vue实例从创建到销毁的过程就是生命周期

生命周期中的钩子函数可以让我们在控制Vue实例的时候书写更好的逻辑

第一次页面加载会触发哪几个钩子函数？

beforeCreate created beforeMounte mounted

DOM渲染在哪个周期中就已经完成？mounted

Vue实现数据双向绑定的原理：Object.defineProperty

vue实现数据双向绑定主要是：采用数据劫持和发布-订阅模式的方式，

通过Object.defineProperty()来劫持各个属性的getter 和setter方法，在数据发生变化时

发布消息给订阅者，触发相应的监听回调。当把一个普通的js对象传给vue实例作为它的data

选项时，Vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter，它们让Vue

追踪依赖，发生变化时通知变化。

vue的数据双向绑定整合Observer,Compile,Watcher三者。

Observer来监听自己的Model的数据变化，通过Compile来解析编译模版指令

（vue中是用来解析{{}}）

最终利用watcher搭起observer和Compile之间的通信桥梁，达到

数据变化->视图更新；视图交互变化（input）->数据model变更双向绑定的结果

js实现简单双向绑定的例子

<body>
   <div id ='app'>
     <input type="text" id='txt'>
     <p id="show"></p>
   </div>
</body>
<script>
   var obj={}
   Object.defineProperty(obj,'txt',{
      get: function(){
        return obj.txt
      },
      set: function(newValue){
        document.getElementById('txt').value=newValue
        document.getElementById('show').innerHTML=newValue
      }
   })
   document.addEventListener('keyup',function(e){
      obj.txt=e.target.value
   })
</script>

Vue组件间的参数传递

1 父组件与子组件之间的传值

父组件给子组件传值：父组件用v-bind传递一个对象给子组件，子组件用props接收对象里的每个属性。

或者父组件用:title传递title给子组件，子组件用props接收title

子组件给父组件传值：子组件触发一个事件，把数值作为参数传给给父组件this.$emit('eventname','value')。

父组件监听事件@eventname

2 兄弟组件之间传值，1 vuex

2 使用根元素$root触发事件,缺点：谁都可以改，不好维护

A组件
this.$root.$emit('add-todo','helloworld')
B组件create方法里监听
this.$root.$on('add-on',(value)=>{
   console.log(value)
})

Vue路由的实现：hash history模式

hash模式：浏览器中#及#之后的称为hash,用window.location.hash获取

hash虽然在url中，但不包含在HTTP请求中。

history模式：history模式采用H5新特性，且提供了pushState()

replaceState(),可以对浏览器历史记录栈进行修改。

history模式下，前端url必须和向后端发起请求对url一致。

路由的钩子函数

router实例上的：beforeEach afterEach

单个路由：beforeEnter

组件内的钩子：beforeRouteEnter beforeRouteUpdate beforeRouteLeave

参数

to: 要进入的目标，到哪里去

from:正要离开的路由对象，从哪里来

next:用来决定跳转或取消导航

this.$router.forward()前进

this.$router.back() 后退

this.$router.push('/home')

this.$router.push({path:'/home'})

Vue如何定义一个过滤器

<div>
  <input type="text" v-model="msg">
  {{msg|capitalize}}
</div>
<script>
   new Vue({
     el:"#app",
     data:{
       msg: ''
     },
     filters:{
       capitalize:function(value){
           return value.charAt(0).toUpperCase()+value.substring(1)
       }
     }
   })
</script>

定义全局过滤器

Vue.filter('capitalize',function(){})