1、V-if和V-show的区别
答案:区别就是dom元素是否挂载了,v-show是dom树上有内容,不显示,display:none;v-if是dom树上无内容
2、Vue组件间是怎么通讯的
答案:1、父组件-->子组件
方式:父组件给子组件绑定属性,子组件通过props属性来接收传递的数据
注意:属性的值必须在组件中通过props属性指定,属性名必须与父组件中定义的一致。props可以是一个数组或对象
2、子组件-->父组件
方式:在父组件中声明一个接受数据的函数,父组件给子组件绑定事件,子组件通过$emit触发事件,并且可在此时传递参数,
父组件通过定义好的监听事件接收参数(注意参数是什么 )
3、非父子组件间的通讯
方式: 创建一个新Vue的实例,让各个兄弟共用同一个事件机制。(关键点)
传递数据方,通过事件触发$emit(方法名, 传递的数据)。
接收数据方,在mounted() 钩子函数(挂载实例) 中 触发事件$on(方法名, callback(接收数据的数据)),
此时callback函数中的this已经发生了改变, 可以使用箭头函数。
对于大型复杂的项目,采用vuex 状态管理更适合
3、常见指令
答案:
v-text:更新DOM对象的 textContent
v-html:更新DOM对象的 innerHTML
v-bind:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
v-on:绑定事件
v-for:基于源数据多次渲染元素或模板块
v-if:根据表达式的值的真假条件,销毁或重建元素
v-show:根据表达式之真假值,切换元素的 display CSS 属性
v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
4、怎么定义组件
答案:
全局定义:Vue.component(组件名, {template: 模板字符串})
局部定义:components:{组件名: {template: 模板字符串}}
单文件组件:包含template,script,style三部分
5、vue路由是怎么做的(路由的原理)
答案:浏览器URL中的哈希值(# hash)和 component的对应关系,一个哈希值对应一个组件
6、怎么请求数据的
答案:用axios发送请求
7、谈谈组件化和模块化的区别
答案:
组件化:组件化就是基于可重用的目的,将一个大的软件系统按照分离关注点的形式,拆分成多个独立的组件,主要目的就是减少耦合。
一个独立的组件可以是一个软件包、web服务、web资源或者是封装了一些函数的模块。
这样,独立出来的组件可以单独维护和升级而不会影响到其他的组件。
模块化:模块化的目的在于将一个程序按照其功能做拆分,分成相互独立的模块,
以便于每个模块只包含与其功能相关的内容,模块之间通过接口调用。
将一个大的系统模块化之后,每个模块都可以被高度复用。
区别:模块化的目的是为了重用,模块化后可以方便重复使用和插拨到不同的平台,不同的业务逻辑过程中。
组件化的目的是为了解耦,把系统拆分成多个组件,分离组件边界和责任,便于独立升级和维护。
8、Vue的数据双向绑定原理(如果更深层的话就要涉及到订阅发布者模式了可以自己看)
答案:
Vue在初始化实例的时候,会把data中所有的数据,用Object.defineProperty方法全部加给vm对象,
这个时候,vm对象中的数据就有了set和get方法,set这个函数会在属性被赋值的时候自动调用,
get这个函数会在属性被获取值的时候自动调用,用户获取到的属性的值,其实就是get方法的返回值。也就能实现双向绑定了
9、Vue全家桶有些什么
vue:主要Vue
vue-router:关于路由方面的配置
vuex:数据共享和缓存用
vue-resource:于后台交互用(现在改为axios 但是axios不是Vue里面的东西)
vue-cli:快速创建项目的脚手架
答案:
10、Filter过滤器
作用:
文本数据格式化 , 也就是: 将数据按照我们指定的一种格式输出(可以直接说过滤)
过滤器可以用在两个地方:{{}}和 v-bind 表达式
两种过滤器:1 全局过滤器 2 局部过滤器
11、Vue生命周期
一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期
beforeCreate()
说明:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意:此时,无法获取 data中的数据、methods中的方法
created()
说明:这是一个常用的生命周期,可以调用methods中的方法、改变data中的数据
beforeMounted()
说明:在挂载开始之前被调用,此时无法获取到el中的DOM元素
mounted()
说明:此时,vue实例已经挂载到页面中,可以获取到el中的DOM元素,进行DOM操作
beforeUpdated()
说明:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
注意:此处获取的数据是更新后的数据,但是获取页面中的DOM元素是更新之前的
updated()
说明:组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作
beforeDestroy()
说明:实例销毁之前调用。在这一步,实例仍然完全可用。
使用场景:实例销毁之前,执行清理任务,比如:清除定时器等
destroyed()
说明:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
12、小程序和vue的区别和联系
区别:微信小程序是运行在微信里的APP,vue是一个流行框架
联系:微信小程序借鉴了vue的部分语法,但也有一些区别,例如:显示隐藏元素,v-show和hidden;事件处理:v-on和bindtap
13、Vuex的使用和五个核心
五个核心:state , getter , mutation , action , module
14、vue中Tab栏怎么实现
每一个tab标题对应一个tab组件,并且每一个标题都有一个点击事件和传入的参数,在点击的时候tab组件接收参数来控制显示和隐藏
也可以用路由实现,适用于全屏的tab
15、在vue中获取dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用$refs去引用它,从而操作该dom元素
16、vue单页面 首屏加载怎么优化
按需加载
基于DllPlugin 和 DllReferencePlugin 的 webpack 构建优化
异步组件
优化组件加载时机
18、什么是MVVM。分别描述一下你对MVVM优缺点的理解
即:Model-View-ViewModel 它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,
这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
MVVM不仅简化了业务与界面的依赖关系,还优化了数据频繁更新的解决方案,甚至可以说提供了一种有效的解决模式。
MVVM用来做服务端是极其不适用的,因为:网络资源成本过高 开发成本过高
19、vue.js的view-model是如何工作的
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。
它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,
保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。
20、vue中$set什么时候用
生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去,此时使用 vm.$set实例方法,这也是全局 Vue.set方法的别名
21、Vue-cli的src文件夹中有哪些文件
assets中是图片,字体等一些静态资源
components中是组件
filters中是过滤器
router中是路由文件
App.vue 根组件
mian.js
22、vue-router有哪几种导航钩子?(具体怎么用的)
三种,
第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子
第三种:单独路由独享组件
23、路由之间是如何跳转的跳转?
1、router-link to = 'path'
2、router.push('path')
24、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id
25、vue-router是什么?它有哪些组件?
vue用来写路由一个插件。router-link、router-view
26、如何让CSS只在当前组件中起作用?
将当前组件的style修改为<style scoped>
27、<keep-alive></keep-alive>的作用是什么?
<keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
大白话: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染
28、如何实时修改data中数组中的值(数据改变试图改变)
this.$set(this.data,”key”,value’)
$set的使用方法自己查
29、slot是什么
插槽:
三种方式:1、匿名插槽
2、具名插槽
3、带参数的插槽