简述MVVM
什么是MVVM,MVVM和MVC以及MVP有什么区别
首先是 MVC ,MVC 是最常见的软件架构之一,在这个架构中,它将软件分为了3个部分:View、Controller、Model,各部分的通信方式如下:
View 将用户指定发送到 Controller,Controller 完成业务逻辑后,让 Model 改变状态,Model 改变状态后将新数据传给 View,整个的过程都是单向通信。
随着业务量的扩大,Controller 需要处理各种逻辑,维护成本越来越高,也就衍生出了一个新的软件架构,即 MVVM。
MVP
MVVM 就是把 MVC 中的 Controller 的数据和逻辑处理部分从中抽离出来,用一个专门的对象去管理,即 ViewModel,是 Model 和 Controller 之间的一座桥梁。
MVVM 架构也是将软件分为了3个部分:View、ViewModel、Model,各部分通信方式如下:
View 与 ViewModel 双向绑定,View 的变动自动绑定在 ViewModel 中,然后 ViewModel 与 Model 进行双向通信,Model 就不与 View 直接进行通信。
Vue 生命周期
vue 生命周期就是 vue 实例从创建到销毁的过程,可以将此过程分为四个阶段:
创建阶段,此阶段有 beforeCreate 和 created 两个钩子函数:
beforeCreate 是new Vue()之后触发的第一个钩子,发生在实例创建之前,此时 data,methods 等数据和方法都还没初始化,还不能访问;
created 发生在实例创建之后,此时的 data 和 methods 已经初始化好了,可以进行调用或者操作,可以进行异步数据请求,例如数据初始化。
挂载阶段,此阶段有 beforeMount 和 mounted 两个钩子函数:
beforeMount 发生发生在挂载前,此时虚拟 Dom 已创建完成,可以对数据进行更改但是不会渲染到页面上;
mounted 发生在挂载后,此时真实的 Dom 挂载完毕,可以访问到 DOM 节点了,vue实例也完成了初始化,此时用户可以在浏览器上看到页面内容了。
运行阶段,此阶段有 beforeUpdate 和 updated 两个钩子函数:
beforeUpdate 发生在状态或者数据更新前,此时 data 中的数据状态已经发生变化了,但还没开始渲染 dom 树
updated 发生在更新后,此时 dom 节点被重新渲染了,页面显示的也是更新后的数据。但是要避免在这个阶段进行更改数据,可能会陷入死循环,可以用计算属性或者 watcher 进行状态改变。
销毁阶段,此阶段有 beforeDestroy 和 destroyed 两个钩子函数:
beforeDestroy 发生在实例销毁前,这个时候实例还没被销毁,vue 实例还能使用
destroyed 发生在实例销毁之后,这个时候 vue 实例已不存在,所有的子实例也被销毁,所有的指令被解绑,事件监听被移除。
每个生命周期适合哪些场景?生命周期钩子的一些使用方法:
beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
Vue 如何实现组件间通信?
vue 组件的通信分为两种方式
一个是父子组件之间的通信,一个是非父子组件之间的通信(bus)
父子组件
props / emits
这是Vue跨组件通信最常用,也是基础的一个方案。
父组件通过 prop 向子组件传值
父组件:
<template>
<div>
<h3>this is father</h3>
<!-- :传递到子组件的数据名="需要传递的数据" -->
<Child :shop="shopList" />
</div>
</template>
<script>
import Child from './child.vue';
export default {
name: 'Father',
components: {
Child
},
setup() {
const shopList = '三包烟, 两瓶啤酒, 一斤花生米';
return {
shopList
};
}
};
</script>
子组件:
<template>
<div>
<p>this is child</p>
{{ shop }}
</div>
</template>
<script>
export default {
name: 'Child',
props: ['shop']
};
</script>
子组件通过 emit 出发父组件的时间执行
父组件
<template>
<div>
<h1>【case1】父传子</h1>
<p>父:好大儿,去帮为父买几个东西吧,东西通过 props 传给你了</p>
<!-- :传递到子组件的数据名="需要传递的数据" -->
<Child :shop="shopList" @giveClick="giveMoney" />
<p>父:给给给,一共 {{ number }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import Child from './child.vue';
export default {
name: 'Father',
components: {
Child
},
setup() {
const shopList = '三包烟, 两瓶啤酒, 一斤花生米';
let number = ref();
const giveMoney = msg => {
console.log(msg);
number.value = msg;
console.log(number);
};
return {
shopList,
giveMoney,
number
};
}
};
</script>
子组件
<template>
<div>
<p>子:好的爸爸,这是我收到的东西:{{ shop }}</p>
<h1>【case2】子传父</h1>
<p>子:爸爸我没钱了</p>
<button @click="moneyClick">伸手要钱</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: ['shop'],
setup(props, { emit }) {
const moneyClick = () => {
// 触发父组件中的方法,方法名要与父组件中的监听事件名一样
emit('giveClick', '1000');
};
return {
moneyClick
};
}
};
</script>
expose / ref
父组件获取子组件的属性或者调用子组件方法
defineExpose
someMethod
ref=“comp”
attrs
包含父作用域里除 class 和 style 除外的非 props 属性集合
v-model
可以支持多个数据双向绑定
爷孙组件
provide / inject
适用于隔代通信,例如爷孙组件
provide / inject 为依赖注入
provide:可以让我们指定想要提供给后代组件的数据或
inject:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用
任意组件
Mitt
mitt 的用法:通过 on 方法添加事件,off 方法移除,clear 清空所有,emit
Vuex
Vuex 实现原理
Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作
vuex
的 mutation
和 action
vuex
模块化
vuex
的挂载过程
vue实现双向数据绑定原理是什么
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,
通过Object.defineProperty()来实现数据劫持
实现双向绑定 Proxy 与 Object.defineProperty 相比优劣如何
watch 和 computed 和 methods 区别
计算属性和watch有什么区别?以及它们的运用场景?
Vue 计算属性和 watch 在什么场景下使用
data () { a: { b: 1 } }; 如何用 watch 监听 b 的变化
VueRouter 实现原理
vue router懒加载
Vue hash 路由和 history 路由的区别
keep-alive的实现
Keepalive 是什么,里面有哪些钩子
nextTick的实现
$nexttick 是干嘛的,你一般拿它做什么
你怎么理解Vue中的diff算法
插槽是什么 怎么使用的
常用指令列举
自定义指令你是怎么用的
vue常用语法、内置组件
v-model的实现以及它的实现原理
v-for中key的作用
使用 v-for 要求写 key,为什么
你知道Vue3有哪些新特性吗?它们会带来什么影响?
说一下vue3.0你了解多少
说一下 vue
有哪些优点和特点
其他
vue
为什么要用 template
Vue 数据响应式怎么做到的?
如何解决 vue
初始化页面闪动问题
vue
首屏渲染优化有哪些
Vue.set 是做什么用的?
vue动态传参以及获取
Eventbus具体是怎么实现的
nuxt
怎样配置路由,如何自定义路由,自定义的和约定路由哪个优先级高
new Vue后整个的流程
v-show
和 v-if
有什么区别
vue
的模板编译原理
vnode的理解,compiler和patch的过程
你都做过哪些Vue的性能优化
vue中的data为什么返回的是一函数
Vue的父子组件生命周期钩子函数执行顺序
什么是组件以及如何使用组件