》关注前端开发社区，回复“1”加入前端技术交流群，回复“2”免费领取500G前端干货！1.Vue.js介绍Vue.jsisAlightweight,high-performance,componentizableMVVMlibrarywithaveryeasy-to-useAPIVue.jsisalibraryforbuildingdata-drivenWebinterfaces.Vue.jsisaprogressiveframeworkforbuilding用户界面，与其他权重不同的是，Vue采用了自下而上的增量开发设计，Vue的核心库只专注于视图层，非常容易学习和与其他库或现有项目集成，Vue完全有能力推动采用单个文件的复杂单页应用程序，使用Vue生态系统支持的组件和库开发。数据驱动+组件化前端开发。简而言之：Vue.js是一个用于构建数据驱动Web界面的渐进式框架.Vue.js的目标它是一个视图组件，通过尽可能简单的API实现响应式数据绑定和组合。核心是响应式数据绑定系统。2.什么是mvvm？(MVCMVPMVVM)MVVM是Model-View-ViewModel的缩写。Mvvm是一种设计思想。Model层代表数据模型，数据修改和操作的业务逻辑也可以定义在Model中；View代表UI组件，负责将数据模型转换成UI展示，ViewModel是一个同步的View和Model3.简述Vue的响应式原理当创建一个Vue实例时，Vue会遍历属性data选项的，使用Object.definePropertyporoupoti将它们转换成getter/setter并在内部跟踪相关的依赖关系，当属性被访问时Notify修改时发生变化。每个组件实例都有一个对应的watcher程序实例，它将记录属性为组件渲染时的一个依赖，然后调用依赖的setter时，会通知wocherwatcher重新计算，从而导致其关联的组件被更新。4、Vue.js的特点很简单：页面由HTML模板+Json数据+Vue实例组成数据驱动：自动计算属性和模板表达式跟踪依赖组件化：使用可重用解耦的组件构建轻量级页面：代码量小，不依赖其他库速度快：准确有效批量DOM更新模板友好：可通过npm、bower等方式安装，易于集成5、什么是scss？预处理css，编写css当前函数，定义变量，嵌套。6.vue生命周期的理解？共分为创建前/后、加载前/后、更新前/后、销毁前/后8个阶段。创建前/创建后：在beforeCreate阶段，vue实例的挂载元素el还没有。加载前/加载后：在beforeMount阶段，初始化了vue实例的$el和data，但在挂载前还是虚拟dom节点，data.message没有被替换。mounted阶段，vue实例挂载，data.message渲染成功。更新前/更新后：当数据发生变化时，会触发beforeUpdate和updated方法。销毁前/销毁后：执行完destroy方法后，data的改变不会触发periodic函数，说明此时vue实例已经释放了事件监听和与dom的绑定，但dom结构仍然存在。7、vue中的data为什么一定要是函数？该对象是引用类型。组件复用时，由于数据对象都指向同一个数据对象，当一个组件中的数据被修改时，其他复用组件中的数据也会同时被修改；而使用返回对象的函数，由于每次都返回一个新的对象（Object的实例），引用地址不同，所以不会出现这个问题。8、active-class是哪个组件的一个属性？vue-router模块的router-link组件。9.vue-router有哪几种导航钩子？三种。第一种：全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前判断拦截。第二种：组件中的hooks；第三种：独立路由和独享组件10.说出至少4条vue指令及其用法？v-if：判断是否隐藏；v-for：数据环出；v-bind:class:绑定一个属性；v-model：实现双向绑定11.什么是vue-loader？它的用途是什么？解析.vue文件并将模板/js/style转换为js模块的加载器。12.请说说vue.cli项目中src目录下的各个文件夹和文件的用途？assets文件夹是存放静态资源的；components用于组件；router用于定义路由相关的配置；查看视图；app.vue是一个应用程序主组件；main.js是一个入口文件。Computed和watchcomputed计算属性对于Vue来说是必不可少的。计算属性用于声明性地描述一个值依赖于其他值。当您将数据绑定到模板中的计算属性时，Vue将在它依赖的任何值导致计算属性更改时更新DOM。这个特性非常强大，它可以使你的代码更具声明性、数据驱动性和易于维护性。watch监听你定义的变量，当你定义的变量的值发生变化时，调用相应的方法。只要在div中写一个表达式name，在data中写num和lastname,firstname，当watch中num的值发生变化时，就会调用num的方法，方法中的形参对应num的新值和旧值，计算属性computed计算的是Name依赖的值，不能计算data中已经定义的变量。14.prop验证，以及默认值父组件传值给子组件时，为了避免不必要的错误，我们可以设置prop值的类型，这样当父组件传值给子组件时，更准确的说，prop可以传递一个数字，一个布尔值，一个数组，一个对象，一个对象的所有属性。组件可以指定道具的验证要求。如果没有指定验证要求，Vue会发出警告，比如传递了数字类型的数据，将其默认值设置为default，如果验证失败则发出警告。props:{visible:{default:true,type:Boolean,required:true},},15vue组件通信parentpassingchildparent:自定义属性名+数据（待传）=>:value="data"child:props["父组件上的自定义属性名称"]=>用于数据接收）子传递parent在父组件中注册子组件，并在子组件标签上绑定自定义事件监听器。child:this.$emit('customeventname',data)在子组件标签上绑定@customeventname='callbackfunction'parent:methods:{customevent(){//逻辑处理}}兄弟组件通过central发送communicationletbus=newVue()A:methods:{function{bus.$emit('customeventname',data)}sendB:created(){bus.$on('AsentCustomeventname',function)}资料接收这几天会更新~~，如果觉得总结的还可以，请点一个给小编看看，谢谢！上期：移动端H5面试12问答（必填），请支持帅哥小编，回复“1”加入前端技术交流群，回复“2”领取500G前端干货
