Vue常见问题

163 阅读5分钟

1、Vue.js优点

MVVM框架、双向数据绑定、组件化开发、Virtual DOM、轻量高效

2、vue父组件向子组件传递数据

父组件使用子组件是可通过自定义属性来传值,子组件中通过props 来接收这个自定义属性,在子组件中直接使用即可。

3、子组件向父组件传递事件

子组件通$emit(eventName,value) 来传递事件,父子组件通过@eventName="回调函数名称"  来接收传递的value

4、v-show和v-if的区别

它们都可以隐藏和显示元素,但是v-show相当于display的block和none的切换,而v-if是对组件进行创建于销毁。所以当场景下开销较大时用v-show,较小时用v-if

5、如何让css只在当前组件中起作用

给style标签添加scoped属性

scoped渲染规则:

(1)给HTML的DOM节点加一个不重复data属性(例:data-v-2311c06a)来表示他的唯一性 

(2)在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式 

(3)如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性 

6、keep-alive的作用是什么?

用于缓存组件状态避免组件重新渲染

7、如何获取dom

通过ref=“xxx”绑定,用this.$refs.xxx来获取dom

8、vue-loader是什么?使用它的用途有哪些?

vue-loader是解析 .vue 文件的一个加载器,提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理。

用途:js可以写es6,style样式可以写scss或less、template可以加jade等。

9、为什么使用key

可以高效的更新虚拟dom

key是每一个vnode的唯一id,通过key我们可以快速准确的进行diff操作

10、分别简述 computed 和 watch 的使用场景

computed:属性计算,依赖于其他值,有缓存功能,只有当依赖值发生改变时,computed才会重新计算返回新的值。主要应用于数值计算,监听值依赖其他的值这种情况

watch:观察监听数据,没有缓存性,当监听的值发生改变时,就会执行回调下异步操作。适用于监听值发生改变时要执行相应的异步逻辑操作这种情况。

11、$nextTick的使用

this.$nextTick将回调延迟到下一次DOM更新后执行,在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

12、vue组件中data为什么必须是一个函数

因为组件是可以复用的,如何data是一个对象,那么可能造成子组件下的data属性值互相污染,所以data必须是一个函数。

13、vue中双向数据绑定是如何实现的

vue是采用数据劫持结合订阅-发布模式的方式,通过Object.defineProperty()来劫持各个属性的getter和setter,当数据发生改变时发布消息给订阅者,触发相应的监听回调。

14、单页面应用和多页面应用区别及优缺点

在这里插入图片描述

15、vue中过滤器有什么作用及详解

在dom渲染前对数据进行过滤处理,可以用在插值表达式和v-bind后面,通过定义一个过滤器,对原有的数据进行过滤处理返回过滤后的数据。

16、v-if和v-for的优先级

v-for 的优先级高于 v-if ,所以要避免同时使用这两个指令,不然会造成dom不停的创建与销毁,使页面性能下降。

17、vue的两个核心点

(1)数据驱动:vue 响应式核心就是,getter 的时候会收集依赖,setter 的时候会触发依赖更新,vue将遍历data中对象的所有property,并使用 Object.defineProperty() 把这些 property 全部转为 getter/setter。

这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。

每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。

getter 的时候我们会收集依赖,依赖收集就是订阅数据变化watcher的收集,依赖收集的目的是当响应式数据发生变化时,能够通知相应的订阅者去处理相关的逻辑。

setter 的时候会触发依赖更新,之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

(2)组件系统:

模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。

初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。

方法(methods):对数据的改动操作一般都在组件的方法内进行。

生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。

私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用

18、Vue-cli打包命令是什么?打包后悔导致路径问题,应该在哪里修改

www.cnblogs.com/dream111/p/…

19、Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?

www.cnblogs.com/styleFeng/p…

20、Vue2中注册在router-link上事件无效解决方法

router-link会阻止click事件,可通过添加修饰符.native监听原生事件来解决

21、RouterLink在IE和Firefox中不起作用(路由不跳转)的问题

(1)只用a标签,不适用button标签

(2)使用button标签和Router.navigate方法

(3)通过函数式编程 this.$router.push({name:"xxx"}) 的方法

22、vue初始化页面闪动问题

使用 v-cloak 指令,这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

23、vue禁止弹窗后的屏幕滚动

methods : {
   //禁止滚动
   stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
    /***取消滑动限制***/
    move(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
    }
}