未更新完…
1. vue2和vue3的区别
- 性能方面:Vue3在内部进行了大量的优化,使得渲染速度更快,性能更好,内存占用更少;比如,Vue3使用了Proxy替代Object.defineProperty实现响应式( Proxy监听的目标是对象本身,不需要像Object.defineProperty那样遍历每个属性,有一定的性能提升);
- 编码方式:vue3使用的是“组合式API”,可以更好地组织和复用逻辑代码,提高代码的可维护性;vue2使用的是“选项式API”,即数据放在data中,方法放在methods中,而Vue3则允许将一个功能的所有代码放到一起;
- 对TypeScript的支持:Vue3对TypeScript的支持更加友好,提供了完整的类型定义;
- 模板根元素:vue3可以没有根元素,vue2必须要有一个根元素。
2. vue的传参方式以及优缺点
- Vuex:包含五个核心属性:state、getters、mutations、actions和modules。
- state:保存共有数据,响应式;
- getter:可以对state进行计算操作,主要庸才过滤一些数据,可以在多组件之间复用;
- mutations:可以动态修改state中的数据,通过commit提交方法(同步);
- actions:将mutations里处理数据的方法变成异步;
- modules:模块化vuex。
- 优点:解决了多层组件之间繁琐的事件传播;解决了多组件依赖统同一状态的问题;单向数据流。
- 缺点:不能做数据持久化,刷新页面就要重制,要做数据持久化可以考虑使用localstorage或者下载插件;增加额外的代码体积,简单的业务场景不建议使用。
- EventBus: 通过共享一个vue实例,使用该实例的$ on以及$emit实现数据传递。
- 优点:解决了多层组件之间繁琐的事件传播;使用原理十分简单,代码量少。
- 缺点:由于是都使用一个Vue实例,所以容易出现重复触发。
- 父子之间的传参:
- 父传子:父组件在子组件标签中绑定自定义属性;子组件通过props:[‘’]接收。
- 子传父:父组件在子组件标签中绑定自定义事件;子组件通过this.$emit(‘自定义事件名称’,‘发送的数据’)方法触发自定义事件,传值给父组件。
- 缺点:单一组件层级一深需要逐层传递,会有很多不必要的代码量;不能解决多组件依赖统同一状态的问题。
- ref:组件绑定ref属性,通过refs获取组件内部进行传参。
- 插槽slot:
- 具名插槽:子组件用name属性来表示插槽的名字,不传为默认插槽;父组件中在使用时在默认插槽的基础上加上slot属性,值为子组件插槽name属性值。
- 默认插槽:子组件用标签来确定渲染的位置,标签里面可以放DOM结构,当父组件使用的时候没有往插槽传入内容,标签内DOM结构就会显示在页面;父组件在使用的时候,直接在子组件的标签内写入内容即可。
- 作用域插槽:子组件在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件v-slot接受的对象上;父组件中在使用时通过v-slot:(简写:#)获取子组件的信息,在内容中使用。
- 优点:复用性好,适合做组件开发。
- 缺点:和props一样不支持跨层级传递。
- $parent $children
- 通过this. p a r e n t 或者 t h i s . parent或者this. parent或者this.children拿到父或子组件实例。(并不推荐)。
3. v-if 和 v-for 的优先级哪个高?
- 在 vue2 中 v-for 的优先级更高,但是在 vue3 中v-if 的优先级更高。
- 优化:
- 用计算属性computed过滤出数据再进行渲染(效率高可维护性强);
- 先v-if再v-for(只判断一次,性能更高)。
4. computed、methods、watch之间的区别
- computed:能缓存,不支持异步,自动监听依赖值的变化而动态返回内容。
- methods:本身没有缓存,每次调用都得重新计算。
- watch:没有缓存,支持异步,只要数据发生变化就会执行监听函数。(监听是一个过程,属性值可以是一个对象)。
5. MVVM 和 MVC的区别
- MVVM:
M - Model 数据
V - View 视图
VM - ViewModel 视图-数据:它是View和Model的粘合体,负责View和Model的交互和协作
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法,get set 方法。
MVVM最标志的特性是数据绑定,核心理念是通过申明式的数据绑定实现View层和其它层的分离。完全解耦View层这种理念,也是的Web前端的测试用例编写变得简单。
MVVM 最重要的一个特征就是数据双向绑定, 而 React 是单向数据流, 状态驱动视图, 它没有纯粹意义上的 VM, 它有的只是用属性和状态去映射视图, 很明显不是 MVVM. 顶多也就是 MVVM 中的 V 层.对于 Vue从技术上讲,Vue.js 主要关注 MVVM 模式的 ViewModel 层, 它通过双向数据绑定连接视图和模型, 它更像是 MVVM 但并未完全按照 MVVM 去实现, 只是借鉴了 MVVM 中的一些思想.
在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
- MVC:
M - Model 数据:数据实体,用来保存页面要展示的数据。比如ajax获取的数据。
V - View 视图,显示数据的页面,一般为html。
C - Controller 控制器: 控制整个业务逻辑,负责处理数据,比如数据的获取,以及数据的过滤,进而影响数据在视图上的展示。
MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。
- 两者的区别:
1、mvvm各部分的通信是双向的,而mvc各部分通信是单向的;
2、mvvm是真正将页面与数据逻辑分离放到js里去实现,而mvc里面未分离。”
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式,用户对View的操作交给了Controller处理,在Controller中响应View的事件调用Model的接口对数据进行操作,一旦Model发生变化便通知相关视图进行更新。
具体的演变流程:传统MVC ——> MVP ——> MVVM