vue优势
1、数据双向绑定,组件化开发、虚拟dom、运行速度快
2、vue使用路由,不会刷新页面
3、单页面应用,页面局部刷新
4、数据与视图分开处理,使数据修改更加简洁
5、数据响应减少了原生DOM操作对性能的危害
vue与Jquery的区别
vue操作数据,jquery操作DOM
MVVM和MVC区别
本质区别不大,都是一种设计思想。
mvc即视图、模型、控制器,通过控制器操作大量的dom操作
mvvm即视图、模型、视图模型,通过视图模型操作数据
在mvc基础上增加一层vm(viewmodel),MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验。通过vm可以实现数据更新视图更新,视图更新数据更新,会更加便捷。
vue数据双向绑定原理
采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
Object.defineProperty()和Proxy的区别
proxy可以直接监听对象而非属性,可以直接监听数组的变化,拦截方法比Object.defineProperty()多,Proxy返回的是一个新对象,可以只操作新的对象达到目的,而Object.defineProperty()只能遍历对象属性直接修改
Object.defineProperty()兼容性好,支持ie9,兼容性比proxy好
vue生命周期阶段总共分为几个阶段?
Vue实例从创建到销毁的过程,就是生命周期。经历了创建–挂载–更新–销毁等一系列过程,这个就是vue的生命周期
beforeCreated:刚创建,data数据不能访问
created:创建完可以访问data等数据
beforeMount:刚挂载,页面结构已经在内存上运行,还没有渲染到页面,不能进行dom操作
mounted:挂载完,页面已渲染,可以进行dom操作
beforeUpdate:刚更新,数据已更新,页面还没有重新渲染
updated:更新完,页面已渲染
beforeDestroy:销毁前,自动解绑全部指令和事件监听器
destroy:组件完全销毁
备注:activated:keep-alive组件激活时调用
deactivated:keep-alive组件停用时调用
vue组件传值
父组件向子组件传值:
父组件内设置要传的数据,父组件中引用的子组件上绑定自定义属性并把数据绑定在自定义属性上,在子组件通过props接收
子组件向父组件传值:
子组件click触发$ emit并可以携带参数,然后触发父组件给子组件绑定的自定义事件,自定义事件触发对于的自定义事件执行
非父子组件传值:
引入第三方new vue定义为eventBus,在组件created中订阅方法eventBus.$ on('自定义事件名 ',methods中的方法名)
在另一个兄弟组件中的methods中写函数,在函数中发布eventBus订阅的方法,eventBus.$ emit(‘自定义事件名’)
在组件的template中绑定事件(比如click)
组件中写name选项有什么作用
1、项目使用keep-alive时,可搭配组件name进行缓存过滤
2、DOM做递归组件时需要调用自身name
3、vue-devtools调试工具里显示的组件名称由vue中组件name决定
vue组件data为什么必须是函数
组件中的data写成一个函数,数据以函数返回值形式定义,每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据,而单纯的写成对象形式,就使得所有组件实例共用一份data,就会造成一个变全都会变的结果。
怎么在组件中监听路由参数的变化
有两种方法,只能用在包含的组件内
1、
watch:{
'$route'(to,from){
//在此处监听
}
}
2、
beforeRouteUpdate(to,from,next){
//在此处监听
}
vue组件里的定时器要怎么销毁?
在beforeDestroy组件中写清除函数
vue中slot的使用方式,以及slot作用域插槽的用法
插槽就是父组件可以在子组件中加入内容
匿名插槽可以放在组件的任意位置,一个组件只能有一个匿名插槽,只能作为没有slot属性的元素的插槽
具名插槽,一个组件可以有多个,可以出现在不同的位置上
作用域插槽就是带数据的插槽,父组件通过scope来进行接收子组件传过来的数据
vue如何实现组件缓存
用vue内置组件keep-alive包裹动态组件时,会缓存不活动的组件实例,用于保留组件状态或避免重新渲染
vue常用修饰符有哪些
.prevent 提交事件不再重载页面
.stop 阻止单击事件冒泡
.self 当事件发生在该元素本身而不是子元素的时候触发
…capture 事件侦听,事件发生的时候会调用
v-show和v-if指令的共同点和不同点
共同点:都能控制元素的显示与隐藏
不同点:v-show通过设置css中的display为none,控制隐藏
v-if是dom元素的删除与添加
为什么避免v-if和v-for一起使用?
v-for比v-if优先级更高,如果每一次都先遍历的话,会影响速度。
watch、methods和computed的区别?
watch监听特定数据的变化,根据数据的变化做相应的逻辑处理,想进入页面立即调用的话,在选项参数中指定immediate:true,将立即以表达式的当前值触发回调
methods处理各种方法,不需要缓存时用methods
computed 当有一个性能开销很多的计算属性,需要遍历一个极大的数组和做大量的计算,有其他的计算属性依赖于此计算属性,这时需要缓存,而不是重新加载,就要用到computed,另外在模板中放入太多逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采用计算属性,使数据处理结构清晰
vue中key值的作用?
v-for正在更新已渲染过的列表,它默认使用“就地复用”策略,如果数据项顺序被改变,vue将不会移动dom元素来匹配数据项的顺序,使用key可以高效的更新虚拟dom
对vue-loader的理解 ?
基于webpack的一个loader,就是解析和转换vue文件,把我们写的代码转换为浏览器能识别的
对vuex的理解?
vuex是vue公共数据的状态管理机制,适用于多个组件需要共享数据的情况
state:保存要被共享的数据
mutation:修改state中的数据
action:定义异步方法
getter:对state中的数据进行加工,但不会修改,类似于计算属性
module:module可以将store分割成模块,每个模块拥有自己的state、mutation、getter和action
当多个组件依赖于同一状态时,对于多层嵌套的组件的传参将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
来自不同组件的行为需要变更同一状态,采用父子组件传值或通过事件来变更和同步状态的多份拷贝,以上这些模式非常脆弱,通常会导致无法维护的代码
dispatch触发action中的方法,commit触发mutation中的方法