Vue全家桶 · 前端题

## Vue有什么优点？/ 为什么使用Vue？ * 响应式数据绑定，数据更新页面自动更新，摆脱繁杂的工作，使优化UI变得简单 * 组件化开发 ## 你怎么理解组件化开发？相似模块，比如轮播，弹窗，头部，底部可以做成组件，直接调用，不用每个页面重复些代码 ## vue的所有流程 1. 安装nodejs 2. 全局安装vue-cli脚手架 3. 通过vue init webpack 创建一个基于webpack模板的新项目 4. 进入新项目 5. 安装依赖 6. 运行项目 7. 项目完成后通过npm run build打包给运维或者项目主管 ## vue的数据双向绑定的原理是什么？对vue有自己的理解，有深入了解低层次的原理吗？ vue使用defineProperty指令定义属性，通过监听这个属性的变化实现数据双向绑定 ## v-if和v-show有什么区别？根据布尔值判断， v-show是页面元素的显示与隐藏，v-if是页面元素的存在或者不存在 ## 如何让css只在当前组件中起作用？ style标签加 scoped ## ref的使用场景？可以通过this.$refs拿到页面上定义了ref属性的元素。 ## 计算属性有何作用？ data和computed都是可以在view模板上直接使用的变量，data一般存放源数据，computed计算属性则可以根据data或者别的数据来重新计算一个新的数据。使用场景，比如购物车的总数量，可以通过data里面的购物车列表数据，用computed生成一个购物车长度的新值 ## 组件之间数据是怎么通讯？组件之间数据怎么传输? 组件数据怎么传递？ #### 1.Vuex #### 2.通过路由可以传递参数，比如id #### 3.父传子比如一般移动端头部样式都差不多的，只是标题不一样，可以写成子组件，通过给子组件的属性props，父组件就可以通过给子组件设置属性把数据传递进去，实现不同页面标题不一样 #### 4.子传父通过$emit触发父组件传的事件，然后把数据传给父组件，比如文本框组件，把文本框的值传递给父组件 ## Vuex的原理？ Vuex里面有state、actions、mutations，其中state是公用数据，actions是调接口的，mutaions是修改state用的，getter就是Vuex的计算属性，modules就是模块化。举个例子：列表页要调列表页数据，那么我可以通过dispatch去跟actions调接口，然后数据返回后通过commit让mutations去修改state，那么state更新后，就去渲染页面。 ## Vue的生命周期? 就是创建组件的时候，当创建之前会触发beforeCreated函数，创建好了会触发created函数，绑定到页面之前会触发beforeMounted，绑定好了触发mounted，更新之前会触发beforeUpdated，更新后触发updated，销毁前触发beforeDestroyed，销毁后触发destroyed。这些函数都是回调函数，也可以说是钩子函数。举个例子：进入这个列表页想要调接口，那么你可以在created初始化数据，mounted里面写调接口获取数据渲染页面 #### beforeCreate 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作 #### created 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取 #### beforeMount 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取 ### mounted 接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情... ### beforeUpdate 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿 ### updated 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom #### beforeDestroy 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等 #### destroyed 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以