22-撩课大前端-面试宝典-第二十二篇

1.mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。

都是一种设计思想。

主要就是mvc中Controller演变成mvvm中的viewModel。

mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，

加载速度变慢，影响用户体验。

区别：

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

场景：
数据操作比较多的场景，更加便捷

2.vue的优点是什么？

低耦合。

视图（View）可以独立于Model变化和修改，
一个ViewModel可以绑定到不同的"View"上，
当View变化的时候Model可以不变，
当Model变化的时候View也可以不变。
可重用性。

你可以把一些视图逻辑放在一个ViewModel里面，
让很多view重用这段视图逻辑。
独立开发。
开发人员可以专注于业务逻辑和数据的开发（ViewModel），
设计人员可以专注于页面设计。
可测试。

界面素来是比较难于测试的，
而现在测试可以针对ViewModel来写。

3.vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：
在components目录新建你的组件文件（indexPage.vue），
script一定要export default {}

第二步：
在需要用的页面（组件）中导入：
import indexPage from '@/components/indexPage.vue'

第三步：
注入到vue的子组件的components属性上面,components:{indexPage}

第四步：
在template视图view中使用，
例如有indexPage命名，
使用的时候则index-page

4.请列举出3个Vue中常用的生命周期钩子函数?

created: 

实例已经创建完成之后调用,
在这一步,实例已经完成数据观测, 
属性和方法的运算, watch/event事件回调. 
然而, 挂载阶段还没有开始, 
$el属性目前还不可见

mounted: 

el被新创建的 vm.$el 替换，
并挂载到实例上去之后调用该钩子。
如果 root 实例挂载了一个文档内元素，
当 mounted 被调用时 vm.$el 也在文档内。
activated: keep-alive组件激活时调用

5.vue如何自定义一个过滤器？

html代码：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

JS代码：

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

过滤器接收表达式的值 (msg) 作为第一个参数。
capitalize 过滤器将会收到 msg的值作为第一个参数。